• France
lyra.com
Rechercher
Catégories
Tags
France
France
Espagne
Europe (Anglais)
Inde
Implémentation
Formulaire intelligent (smartForm)
Formulaire embarqué (cartes)
API REST
API REST PCI-DSS
API REST SEPA
Formulaire en redirection
Échange de fichiers
Paiement mobile
Exemples de code
Modules de paiement
Marketplace
Back Office
Back Office Marchand
Back Office Expert
Guides
Aide
FAQ
Tutoriels vidéos
Support

Mettre en évidence plusieurs moyens de paiement

La mise en évidence de plusieurs paiement est possible quelque soit le mode d'affichage choisi :

  • mode liste;
  • mode pop-in;
  • mode liste avec carte embarquée.

Cette fonction vous permet de positionner plusieurs boutons d'un moyen de paiement où vous le souhaitez sur votre page.

Intégration

  • utiliser la classe kr-smart-button;
  • ajouter l'attribut kr-payment-method pour choisir un moyen de paiement.

Consultez le tableau des valeurs de l'attribut kr-payment-method.

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 Virement SEPA (Initiation de Paiement) et Apple Pay

Ci dessous un exemple pour le moyen de paiement Virement SEPA (Initiation de Paiement) et Apple Pay, en mode liste avec carte embarquée.

Apple Pay est uniquement compatible avec un navigateur Safari, disponible depuis les ordinateurs ou appareils mobiles de la marque Apple (Mac, iPhone et iPad).

A titre indicatif, vous pouvez utiliser CSS Flexbox pour créer votre mise en page et placer correctement les boutons 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;
  flex-direction: row;
}  

/* Change the button : width, border */
.container .kr-smart-button {
  width : 75% !important;
  border-style: solid;
  border-color: orange;
}

/* 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="[GENERATED FORMTOKEN]">
    </div>
    <div>
      <div class="kr-smart-button" kr-payment-method="IP_WIRE">
      </div>
      <div class="kr-smart-button" kr-payment-method="APPLE_PAY">
      </div>
    </div>
  </div>
</body>
Nous recrutons

Head Office :

LYRA NETWORK
109, rue de l’innovation
31670 Labège
FRANCE

2.16.0-doc-1.8