• France
état des services
démonstrations
assistance
FAQContacter le support
Video tutorials
Rechercher
Catégories
Tags
docs.
France
Espagne
Europe (Anglais)
Inde
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
SDK Mobile
Échange de fichiers
Mandats SEPA par API REST
Exemples de code
Moyens de paiement
Modules de paiement
Marketplace
Guides
Back Office Marchand
Back Office Expert
Guides fonctionnels

Mettre en évidence un moyen de paiement

La mise en évidence d'un moyen de paiement est possible quel que soit le mode d'affichage choisi :

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

Positionnez le bouton 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).

Illustration

Mode liste avec carte embarquée

Exemple de code

  • Créez votre mise en page et placez correctement le bouton de paiement avec CSS Flexbox (lien : CSS Flexbox).
<head>
(...)
<style type="text/css">
/*Flexbox direction row*/
.container {
  display: flex;
  flex-direction: row !important;
}  
/*Change the button : width, border*/
.container .kr-smart-button {
  width : 75% !important;
  border-style: solid;
  border-color: orange;
}
.container>div {
  margin: 0 100px;
  flex: 1;
 }
</style>
</head>

<body>
  <!-- payment form -->
 <div class="container">
    <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div>
    <div class="kr-smart-button" kr-payment-method="['OTHER_PAYMENT_MEANS_1']"></div>
 </div>

</body>

Remplacez [OTHER_PAYMENT_MEANS_1] par la valeur du moyen de paiement de votre choix.

<div class="kr-smart-button" kr-payment-method="['OTHER_PAYMENT_MEANS_1']"></div>

Moyens de paiement compatibles

// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="AKULAKU_ID"></div>
<div class="kr-smart-button" kr-payment-method="AKULAKU_PH"></div>
<div class="kr-smart-button" kr-payment-method="ALIPAY_CN"></div>
<div class="kr-smart-button" kr-payment-method="ALIPAY_HK"></div>
<div class="kr-smart-button" kr-payment-method="BILLEASE"></div>
<div class="kr-smart-button" kr-payment-method="BOOST"></div>
<div class="kr-smart-button" kr-payment-method="BPI"></div>
<div class="kr-smart-button" kr-payment-method="DANA"></div>
<div class="kr-smart-button" kr-payment-method="GCASH"></div>
<div class="kr-smart-button" kr-payment-method="KAKAOPAY"></div>
<div class="kr-smart-button" kr-payment-method="KREDIVO_ID"></div>
<div class="kr-smart-button" kr-payment-method="MAYA"></div>
<div class="kr-smart-button" kr-payment-method="MPAY"></div>
<div class="kr-smart-button" kr-payment-method="RABBIT_LINE_PAY"></div>
<div class="kr-smart-button" kr-payment-method="TNG"></div>
<div class="kr-smart-button" kr-payment-method="TOSS"></div>
<div class="kr-smart-button" kr-payment-method="TRUEMONEY"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="ALMA_2X"></div>
<div class="kr-smart-button" kr-payment-method="ALMA_3X"></div>
<div class="kr-smart-button" kr-payment-method="ALMA_4X"></div>
<div class="kr-smart-button" kr-payment-method="ALMA_10X"></div>
<div class="kr-smart-button" kr-payment-method="ALMA_12X"></div>
// Choose to create one or many buttons
  <div class="kr-smart-button" kr-payment-method="APPLE_PAY"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="BIZUM"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="COFIDIS_3X_FR"></div>
<div class="kr-smart-button" kr-payment-method="COFIDIS_4X_FR"></div>
<div class="kr-smart-button" kr-payment-method="COFIDIS_LOAN_CB"></div>
<div class="kr-smart-button" kr-payment-method="COFIDIS_LOAN_FR"></div>
<div class="kr-smart-button" kr-payment-method="COFIDIS_PAY_FR"></div>
<div class="kr-smart-button" kr-payment-method="COFIDIS_DFPAY_FR"></div>
<div class="kr-smart-button" kr-payment-method="COFIDIS_4X_ES"></div>
<div class="kr-smart-button" kr-payment-method="COFIDIS_LOAN_ES"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="FLOA_3X"></div>
<div class="kr-smart-button" kr-payment-method="FLOA_4X"></div>
<div class="kr-smart-button" kr-payment-method="FLOA_10X"></div>
<div class="kr-smart-button" kr-payment-method="FLOA_PAYLATER"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="FRANFINANCE_3X"></div>
<div class="kr-smart-button" kr-payment-method="FRANFINANCE_4X"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="GOOGLEPAY"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="MULTIBANCO"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="MB_WAY"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="PAYCONIQ"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="PAYPAL"></div>
<div class="kr-smart-button" kr-payment-method="PAYPAL_BNPL"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="SAMSUNG_PAY"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="UPI"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="IP_WIRE"></div>
// Choose to create one or many buttons
<div class="kr-smart-button" kr-payment-method="WECHAT"></div>
Nous recrutons
Mentions légales
Charte de Protection des Données Personnelles
25.20-1.11