• France
Démonstrations
Rechercher
Catégories
Tags
Français
Français
Anglais
Implémentation
Formulaire intelligent (smartForm)
Formulaire embarqué (cartes)
API REST de paiement
Formulaire en redirection
Formulaire de collecte de données
Paiement Mobile
Modules de paiement
Back office
Guides
Aide
FAQ
Tutoriels vidéos
Support

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

Si la boutique dispose uniquement du paiement par cartes, alors seuls les boutons de paiement par cartes seront disponibles.

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>
© 2023 | Tous droits réservés à Scellius
2.47.0-doc-1.9