Personalize the page layout
Horizontal alignment
To align , horizontally , the fields of the embedded form, use the , Flexbox in CSS , with the ,flex-direction
property, set to row
.
The fields of the embedded form are enclosed in one or more containers:
<div class="flex-container">...</div>
Inside a parent DIV:
<div class="kr-smart-form">...</div>
For more information CSS Flexbox (Flexible Box).
Example
Code sample
<head> <!-- Javascript library. Should be loaded in head section --> <script type="text/javascript" src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"> </script> <!-- theme and plugins. should be loaded in the HEAD section --> <link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script type="text/javascript" src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon.js"></script> <style type="text/css"> /*choice the size*/ .kr-smart-form { width: 33% !important; } /*to choice the size of the embedded form*/ .kr-smart-form .kr-embedded { width: 100% !important; } /*to use the CSS Flexbox (Flexible Box)*/ .kr-smart-form .kr-embedded .flex-container { flex-direction: row !important; display: flex; } /*tocenter the button*/ .kr-smart-form .kr-embedded .kr-payment-button { margin-left: auto; margin-right: auto; width: 100% !important; } </style> </head> <body> <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"> <div class="kr-embedded"> <div class="flex-container"> <div class="kr-pan"> </div> <div class="kr-expiry"> </div> <div class="kr-security-code"> </div> </div> <button class="kr-payment-button"> </button> </div> </div> </body>