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'attributkr-payment-methods
de la div duformToken
.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 fonctionKR.setFormConfig
avec l'attributhidden
.<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.
- Masquez notre formulaire de paiement: dans le
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.