Personnalisation des boutons de paiement
Le bouton : "Payer"
Le bouton de paiement est automatiquement ajouté dans votre formulaire à partir du code suivant :
<!-- payment form submit button --> <button class="kr-payment-button"></button>
<!-- payment form submit button --> <button class="kr-payment-button"></button>
Il y a de multiples avantages à utiliser notre bouton de paiement :
- Les labels sont traduits automatiquement
- Le montant est automatiquement formaté et mis à jour
- Nous gérons pour vous l'animation d'attente
- Le bouton passe automatiquement en read-only si nécessaire
Il est tout à fait possible de surcharger le bouton de paiement en procédant à la :
Personnalisation du label
<button class="kr-payment-button">Custom label</button>
Vous pouvez également insérer une variable qui représente le montant et la devise.
<button class="kr-payment-button">this will cost %amount-and-currency% !!</button>
Personnalisation de la couleur
Le style du bouton "Payer" est défini par la classe kr-payment-button.
Pour surcharger la couleur du bouton "Payer", il est recommandé de définir le nouveau style dans la balise <HEAD>
de votre page de paiement, juste après le chargement du thème et du code Javascript.
Ci joint un exemple utilisant la règle css !important
.
<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> <!-- Overrride payment button background color --> <style type="text/css"> .kr-smart-form .kr-payment-button { background-color: #00D152 !important; } </style> </head> <body> ... </body>
Les boutons des moyens de paiement compatibles
Personnalisez le label et l'icône des boutons de moyens de paiement compatibles, grâce au code suivant :
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig({
smartForm: {
paymentMethods: {
"[NAME]": {
label: "[CUSTOM_NAME]",
icon : "[SRC_PICTURE]",
}
}
},
});
});
</script>
Utilisez les méthodes KR.onFormReady
et KR.setFormConfig
, dans le header de votre page de paiement (pour plus de détails, consultez les fonctions JS).
Intégrez les données suivantes :
Attribut | Description | Format |
---|---|---|
"[NAME]" | Sélectionne le moyen de paiement ( lien vers le tableau des moyens de paiement) | Chaîne de caractères. |
"[CUSTOM_NAME]" | Change le label du moyen de paiement | Chaîne de caractères. |
"[SRC_PICTURE]" | Change l'icône du moyen de paiement | Image encodée en base64, en png, jpg, svg ou un lien externe CDN. |
Illustration pour personnaliser le moyen de paiement Virement SEPA
- Utilisez la valeur
IP_WIRE
avec l'attributpaymentMethods
pour choisir le moyen de paiement Virement SEPA. - Modifiez le label par Payment by bank transfer.
- Changez l'icône par un lien externe CDN.
Exemple de code :
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig({
language:'en',
smartForm: {
paymentMethods: {
"IP_WIRE": {
label: "Payment by bank transfer",
icon : "https://img.icons8.com/external-wanicon-lineal-wanicon/64/null/external-bank-money-exchange-wanicon-lineal-wanicon.png",
},
}
},
});
});
</script>