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. (Voir : tableau des valeurs).
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.
Illustration
Mode liste avec carte embarquée
Exemple de code
- Créez votre mise en page et placez correctement les boutons de paiement avec CSS Flexbox (lien : CSS Flexbox).
<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;
}
/*Buttons direction column*/
.container .column {
display: flex;
flex-direction: column !important;
}
/*Gap between the container and the div*/
.container>div {
margin: 0 100px;
flex: 1;
}
</style>
(...)
</head>
<body>
<!-- payment form -->
<div class="container">
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div>
<div class="column">
<div class="kr-smart-button" kr-payment-method="['OTHER_PAYMENT_MEANS_1']"></div>
<div class="kr-smart-button" kr-payment-method="['OTHER_PAYMENT_MEANS_2']"></div>
</div>
</div>
</body>Remplacez [OTHER_PAYMENT_MEANS_1] et [OTHER_PAYMENT_MEANS_2] par la valeur du moyen de paiement de votre choix.
<div class="kr-smart-button" kr-payment-method="['OTHER_PAYMENT_MEANS_1']"></div> <div class="kr-smart-button" kr-payment-method="['OTHER_PAYMENT_MEANS_2']"></div>