Mettre en évidence un moyen de paiement
Intégration
- utiliser la classe kr-smart-button;
- ajouter l'attribut kr-payment-method pour choisir un moyen de paiement.
Exemple de code
<!-- DIV select payment method -->
<div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>Cas d'utilisation : mettre en évidence le paiement par cartes
Ci dessous un exemple avec 1 bouton de paiement mis en évidence AMEX.
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>
</div>
</body>