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://epaync.nc/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="15578053:testpublickey_1xhxA8MgmKyFJJK8fS7EaNRPAHDJFTv9AzlF6ue2ZJU8o:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"> </script> <!-- theme and plugins. should be loaded in the HEAD section --> <link rel="stylesheet" href="https://epaync.nc/static/js/krypton-client/V4.0/ext/classic-reset.min.css"> <script type="text/javascript" src="https://epaync.nc/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>