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.
Cas d'utilisation : mettre en évidence le paiement par cartes
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.
Mise en évidence des moyens de paiement : AMEX et VISA
Exemple de code :
<head>
(...)
<!-- link Bootstrap -->
</head>
<style type="text/css">
/*Flexbox direction row*/
.container {
display: flex;
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="container">
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="<?php echo $formToken;?>"></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="VISA" kr-payment-method="CARDS"></div>
</div>
</div>
</body>