Mettre en évidence plusieurs moyens de paiement
Intégration
- utiliser la classe kr-smart-button;
- ajouter l'attribut kr-payment-method pour choisir un moyen de paiement.
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 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>