Mettre en évidence plusieurs moyens de paiement
La mise en évidence de plusieurs paiement est possible quel que 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.
Sélection
Sélectionnez les moyens de paiement, lors de la création du formToken
.
- utiliser le champ paymentMethods pour lister les moyens de paiement proposés à l'acheteur;
- voir : Sélectionner les moyens de paiement.
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.
Cas d'utilisation : mettre en évidence le paiement par cartes
Ci dessous un exemple avec 2 boutons de paiement mis en évidence : AMEX
et MAESTRO
.
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; } .container_column { display: flex; flex-direction: column !important; width : 50% !important; } .container_column_color .kr-smart-button { border-color: orange !important; } /*Gap between the container and the div*/ .container>div { margin: 0 100px; flex: 1; } </style> <body> <!-- payment form --> <div class="kr-smart-form" kr-form-token="<?php echo $formToken;?>"></div> <div class="container"> <div class="container_column"> <div class="kr-smart-button" kr-brands="VISA" kr-payment-method="CARDS"></div> <div class="kr-smart-button" kr-brands="MASTERCARD" kr-payment-method="CARDS"></div> </div> <div class="container_column_color"> <div class="kr-smart-button" kr-brands="AMEX" kr-payment-method="CARDS"></div> <div class="kr-smart-button" kr-brands="MAESTRO" kr-payment-method="CARDS"></div> </div> </div> </body>