Migration du formulaire embarqué (cartes) vers le formulaire intelligent (smartForm)
Objectif
- Basculer d'une intégration du formulaire embarqué vers une intégration du formulaire smartForm
I. Prérequis
Verifiez si vous utilisez la valeur CUSTOMER_WALLET
dans le champ action formAction.
A ce jour, le formulaire intelligent (smartForm) n'est pas encore compatible avec l’ajout de carte dans un wallet via la valeur CUSTOMER_WALLET
.
Si vous utilisez cette valeur, vous ne pouvez pas migrer vers le formulaire intelligent (smartForm).
II. Choisir le mode d'affichage
Cette étape permet de définir le mode d'affichage du smartForm, en fonction de l'implémentation de votre formulaire de paiement actuel. Choisissez votre mode d'implémentation :
Mode embarqué :
Le formulaire est embarqué dans votre site marchand
Remplacer dans votre code:
<div class="kr-embedded" kr-form-token="GENERATED TOKEN">
Par
<div class="kr-smart-form" kr-form-token="GENERATED TOKEN">
Le formulaire s'affiche selon le mode liste, si la boutique dispose de moyens de paiement compatibles (lien vers Liste des moyens de paiement compatibles).
Si la boutique dispose uniquement du paiement par cartes, alors le formulaire s'affiche directement avec les champs embarqués.
Mode pop-in :
le formulaire de paiement est affiché en mode Pop-in par dessous votre site
Remplacer dans votre code:
<div class="kr-embedded" kr-popin kr-form-token="[GENERATED FORMTOKEN]">
Par
<div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]">
Si vous cliquez sur le bouton de paiement, une fenêtre contextuelle s'affiche avec l'ensemble des moyens de paiement compatibles.
III. Choix du thème
Le thème material n'est pas supporté par le formulaire smartForm, assurez vous de ne pas l'utiliser.
Si vous l'utilisez, remplacer dans votre code:
src="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/material.js">
<link rel="stylesheet" href="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/material-reset.css">
Par
src="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/neon.js">
<link rel="stylesheet" href="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/neon-reset.css">
Si vous souhaitez en savoir plus sur le thème, cliquez sur ce lien " Thèmes".
IV. Analyse du paiement - Notification instantanée
Un objet supplémentaire est renvoyé à la fin du paiement. Ce nouvel objet décrit le moyen de paiement utilisé par l'acheteur :
- objet
paymentMethodDetails
Vous pouvez l'ignorer si vous le souhaitez. Il n'est pas impératif d'en prendre compte. Vous pouvez donc conserver votre implémentation actuelle gérant la notification instantanée à la fin du paiement ( IPN).
Par exemple,
si vous utilisez la carte de TEST "VISA" avec ce pan (numéro de la carte) "4970 1000 0000 0014", vous aurez dans l'objet paymentMethodDetails
ce résultat :
"transactions":[ { (...) "transactionDetails":{ (...) "paymentMethodDetails":{ "id":"497010XXXXXX0014", (...) }, }, }, ],