Personnaliser le bouton "Payer"
Le bouton de paiement est automatiquement ajouté dans votre formulaire à partir du code suivant :
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 :
Personnaliser le label
Si vous souhaitez gérer vous-même le label du bouton, il suffit de l'ajouter de la façon suivante :
<button class="kr-payment-button">Custom label</button>
Vous pouvez également insérer une variable qui représente le montant et la devise. Le client JavaScript effectura automatiquement le remplacement :
<button class="kr-payment-button">this will cost %amount-and-currency% !!</button>
Personnaliser la couleur
Le bouton "Payer" est placé dans le conteneur <div class="kr-embedded">.
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.
Voici 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/classic-reset.min.css">
<script type="text/javascript" src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js"></script>
<!-- Overrride payment button background color -->
<style type="text/css">
.kr-embedded .kr-payment-button {
background-color: #00D152 !important;
}
</style>
</head>
<body>
...
</body>