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>