Mettre en évidence plusieurs moyens de paiement
La mise en évidence de plusieurs paiement est possible quelque soit le mode d'affichage choisi :
Cette fonction vous permet de positionner plusieurs boutons 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.
Cas pour 2 boutons de paiement :
Implémentez 2 DIV, une par bouton.
Ces 2 DIV sont ensuite imbriquées dans une DIV PARENT pour pouvoir y appliquer un style CSS.
Exemple :
<!-- DIV select payment method -->
<div>
<div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
(...)
<div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
(...)
</div>Cas d'utilisation : mettre en évidence le Virement SEPA (Initiation de Paiement) et Apple Pay
Ci dessous un exemple pour le moyen de paiement Virement SEPA (Initiation de Paiement) et Apple Pay, 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 les boutons 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;
}
/* 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>
<div class="kr-smart-button" kr-payment-method="IP_WIRE">
</div>
<div class="kr-smart-button" kr-payment-method="APPLE_PAY">
</div>
</div>
</div>
</body>