Personnaliser la mise en page
Alignement horizontal
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.min.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>Mode compact
Le mode compact sert à personnaliser l'affichage du mode liste et du mode liste avec carte embarquée.
En mode liste, les boutons des moyens de paiement s'affichent sur la même ligne (par paire).
Intégez l'attribut smartForm: { layout: 'compact' } en utilisant les fonctions KR.onFormReady() et KR.setFormConfig(), dans le header de votre page de paiement (plus de détails, consultez les fonctions JS).
Exemple de code :
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
smartForm: { layout: 'compact' },
}
);
});
</script>En mode liste avec carte embarquée, la date d'expiration et le CVV s'affichent sur la même ligne.
Intégrez l'attribut cardForm: { layout: 'compact' } en utilisant les fonctions KR.onFormReady() et KR.setFormConfig(), dans le header de votre page de paiement (plus de détails, consultez les fonctions JS).
Exemple de code :
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
cardForm: { layout: 'compact' },
}
);
});
</script>Combiner les attributs cardForm et smartForm
Il est possible de combiner les attributs cardForm et smartForm, si votre boutique dispose du paiement par cartes et des moyens de paiement compatibles.
Exemple de code :
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
cardForm: { layout: 'compact' },
smartForm: { layout: 'compact' },
}
);
});
</script>