Migration du formulaire embarqué (cartes) vers le formulaire embarqué (smartForm)

Objectif

• Migrer du formulaire embarqué (cartes) vers le formulaire embarqué (smartForm)

I. 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é
• mode pop-in

Mode embarqué

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

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.

II. 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, remplacez dans votre code:

src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/material.js">
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/material-reset.css">

Par

src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon.js">
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon-reset.min.css">

Si vous souhaitez en savoir plus sur le thème, cliquez sur ce lien "Thèmes".

Personnalisation avancée

Si vous avez personnalisé le formulaire embarqué, cliquez sur ce lien "Personnalisation avancée". Cette page décrit comment personnaliser votre nouveau formulaire de paiement.

• Par exemple : remplacez dans votre CSS le nom de la classe :
  • class="kr-embedded"par class="kr-smart-form"

III. 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",
        (...)
      },
    },
  },
 ],