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

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>
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.

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.

Catégories

Tags