• France
état des services
démonstrations
assistance
FAQContacter le support
Tutoriels vidéo
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
Moyens de paiement
Modules de paiement
Guides
Back Office Marchand
Guides fonctionnels

Intégrer un PSP tiers avec le formulaire embarqué

Vous souhaitez intégrer plusieurs PSP (Prestataire de service de paiement) sur la même page de paiement.

Adaptez notre formulaire de paiement et créez vos boutons de paiement personnalisés.

I. Prérequis

L'intégration de notre formulaire de paiement est requise.

II. Étapes d'intégration

A. Choisir l'affichage du paiement par cartes

  1. Soit vous conservez l'affichage du paiement par cartes de notre formulaire.

    Dans ce cas, intégrez la valeur CARDS dans l'attribut kr-payment-methods de la div du formToken.

    Exemple en mode liste avec carte embarquée :

    <body>
        (...)
        <div class="kr-smart-form" kr-card-form-expanded kr-payment-methods="CARDS" kr-form-token="[GENERATED FORMTOKEN]"></div>
        (...)
        </body>
  2. Soit vous créez un bouton de paiement personnalisé pour le paiement par cartes (ou si vous utilisez un autre PSP pour le paiement par cartes, ...).
    • Masquez notre formulaire de paiement: dans le head, utilisez la fonction KR.setFormConfig avec l'attribut hidden.

      <head>
              (...)
              <script>
              (...)
                  KR.setFormConfig({ smartForm: { hidden: true } }) // Hides the smart form
              (...)
              </script>
              (...)
              </head>
    • Créez votre bouton de paiement personnalisé pour le paiement par cartes, comme les autres moyens de paiement à l'étape suivante.

B. Créer vos boutons de paiement personnalisés

Dans le body, personnalisez vos boutons de paiement et appliquez votre style CSS pour chaque moyen de paiement.

Exemple en HTML d'un bouton simple :

<body>
(...)
<button type="button">Payment Method</button>
(...)
</body>

C. Intégrer des fonctions JS

Dans votre bouton, intégrez la fonction onclick pour appeler une fonction lors du clic de l'acheteur.

Dans cet exemple, la fonction correspond à userClic().

<body>
(...)
<button type="button" onclick="userClic()">Payment Method</button>
(...)
</body>

Dans le head, intégrez la fonction userClic() avec un appel vers notre fonction KR.openPaymentMethod().

Cette fonction sert à proposer directement un moyen de paiement en ouvrant une pop-in (ou un pop-up).

Par exemple, remplacez la variable NAME_PAYMENT_MEAN par la valeur du moyen de paiement.

<head>
(...)
<script>
 (...)
function userClic(){
 KR.openPaymentMethod("NAME_PAYMENT_MEAN");
}
(...)
</script>
(...)
</head>

Retrouvez la valeur du moyen de paiement :

  • Soit depuis ce lien : Tableau des moyens de paiement
  • Soit avec la fonction KR.getPaymentMethods(). La valeur du moyen de paiement se trouve dans le tableau paymentMethods.

Ensuite, votre acheteur clique sur votre bouton de paiement personnalisé pour payer.

À la fin du paiement, récupérez le résultat du paiement. Cette dernière étape de votre intégration ne change pas.

III. Exemple

Apple Pay

Pour le HTML

<body>
(...)
<button type="button" onclick="userClic()">Apple Pay</button>
(...)
</body>
<p>Pour le <no-translate>JS</no-translate></p>
<script>
  (...)
  function userClic(){
    KR.openPaymentMethod("APPLE_PAY");
  }
  </script>
Avec plusieurs moyens de paiement (cartes et PayPal)

Pour le HTML :

<body>
(...)
<button type="button" onclick="userClic('CARDS')">Cards</button>
<button type="button" onclick="userClic('PAYPAL')">PayPal</button>
(...)
</body>

Pour le JS :

<script>
 (...)
function userClic(method) {
       KR.openPaymentMethod(method)
     }
</script>

IV. Restriction

La fonctionKR.openPaymentMethod() doit être appelée directement après le clic de l'acheteur. Il ne faut pas effectuer d'autres actions (comme des appels vers d'autres fonctions, du traitement de données, ...) entre le clic de l'acheteur et l'appel de la fonctionKR.openPaymentMethod(). Sinon, le navigateur (ou ApplePay) peut bloquer l'affichage de la pop-in (ou du pop-up) du moyen de paiement.

Ce mécanisme protège l'acheteur et empêche l'ouverture automatique de pop-in (ou pop-up) sans son interaction.

Pour intégrer ApplePay, testez en priorité les navigateurs les plus stricts, comme Firefox et Safari.

© 2025 Tous droits réservés à Sogecommerce
25.22-1.11