Mettre en évidence un moyen de paiement
La mise en évidence d'un moyen de paiement est possible quelque soit le mode d'affichage choisi :
Cette fonction vous permet de positionner le bouton d'un moyen de paiement où vous le souhaitez sur votre page.
Intégration
- utiliser la classe kr-smart-button;
- ajouter l'attribut kr-payment-method pour choisir un moyen de paiement.
Consultez le tableau des valeurs de l'attribut kr-payment-method.
Exemple de code
<!-- DIV select payment method -->
<div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>Cas d'utilisation : mettre en évidence le Virement SEPA (Initiation de Paiement)
Ci dessous un exemple pour le moyen de paiement Virement SEPA (Initiation de Paiement), en mode liste avec carte embarquée.
A titre indicatif, vous pouvez utiliser CSS Flexbox pour créer votre mise en page et placer correctement le bouton du moyen de paiement.
Pour plus d'informations, consultez ce lien :
CSS Flexbox.
Exemple de code :
<head>
(...)
<!-- link Bootstrap -->
</head>
<style type="text/css">
/*Flexbox direction row*/
.container {
display: flex;
flex-direction: row !important;
}
/*Change the button : width, border*/
.container .kr-smart-button {
width : 75% !important;
border-style: solid;
border-color: orange;
}
/*Gap between the container and the div*/
.container>div {
margin: 0 100px;
flex: 1;
}
</style>
<body>
<!-- payment form -->
<div class="container">
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div>
<div class="kr-smart-button" kr-payment-method="IP_WIRE">Payer avec sa banque</div>
</div>
</body>