Personnaliser la mise en page
Personnaliser l'ordre d'affichage
Par défaut, les champs du formulaire de paiement s'affichent dans cet ordre :
| Ordre | Description | Paramètre | Exemple |
|---|---|---|---|
| 1 | Numéro de la carte | kr-pan | 4970 XXXX XXXX 0057 |
| 2 | Date d'expiration | kr-expiry | 12/29 |
| 3 | Code de sécurité (cvv) | kr-security-code | 123 |
Dans le BODY, changez l'ordre des paramètres pour personnaliser l'affichage.
Exemple 1 : Date d'expiration en premier
| Intégration | Illustration |
|---|---|
<div class="kr-smart-form">
<div class="kr-embedded">
<div class="kr-expiry"></div>
<div class="kr-pan"></div>
<div class="kr-security-code"></div>
</div>
</div> |  |
Exemple 2 : Date d'expiration en premier avec un encadré en rouge
| Intégration | Illustration |
|---|---|
<div class="kr-smart-form">
<div class="kr-embedded">
<div style="all:revert;border:1px solid red">
<div class="kr-expiry"></div>
</div>
<div class="kr-pan"></div>
<div class="kr-security-code"></div>
</div>
</div> |  |
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>