• France
état des services
Back Office Marchand
assistance
FAQContacter le support
Video tutorials
Rechercher
Catégories
Tags
Français
Français
Anglais
Accueil
Cas d'usage
Créer un paiement
Créer un paiement en plusieurs fois
Proposer un paiement complémentaire
Créer un paiement par alias (token)
Créer un lien de paiement
Créer un abonnement
Gérer vos abonnements
Gérer vos transactions (rembourser,...)
Analyser vos journaux
Docs API
Formulaire embarqué
API REST
Formulaire en redirection
Intégration mobile
Échange de fichiers
Exemples de code
Logos
Push mail
Moyens de paiement
Modules de paiement
Guides
Back Office Marchand
Guides fonctionnels

Mettre en évidence plusieurs moyens de paiement

La mise en évidence de plusieurs paiement est possible quel que 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.

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

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

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>
© 2025 Tous droits réservés à SystempayMentions légales
25.20-1.11