• France
état des services
démonstrations
assistance
FAQContacter le support
Video tutorials
Rechercher
Catégories
Tags
France
France
Espagne
Europe (Anglais)
Inde
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
SDK Mobile
Échange de fichiers
Mandats SEPA par API REST
Exemples de code
Moyens de paiement
Modules de paiement
Marketplace
Guides
Back Office Marchand
Back Office Expert
Guides fonctionnels

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",
        (...)
      },
    },
  },
 ],
Nous recrutons
Mentions légales
Charte de Protection des Données Personnelles
25.18-1.11