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 Paypal et Apple Pay
Ci dessous un exemple pour le moyen de paiement Paypal 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="PAYPAL"> </div> <div class="kr-smart-button" kr-payment-method="APPLE_PAY"> </div> </div> </div> </body>