Personnaliser la mise en page
Pour aligner horizontalement les champs du formulaire embarqué, utilisez les Flexbox en CSS avec la propriété flex-direction
valorisée à row
.
Les champs du formulaire embarqué sont placés dans un ou plusieurs conteneurs:
<div class="flex-container">...</div>
A l'intérieur d'une DIV parent:
<div class="kr-smart-form">...</div>
Pour plus d'infos CSS Flexbox (Flexible Box).
Exemple

Exemple de code
<head> <!-- Javascript library. Should be loaded in head section --> <script type="text/javascript" src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"> </script> <!-- theme and plugins. should be loaded in the HEAD section --> <link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon-reset.css"> <script type="text/javascript" src="https://static.lyra.com/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>