• France
lyra.com
Rechercher
Catégories
Tags
docs.
France
Espagne
Europe (Anglais)
Inde
Implémentation
Formulaire intelligent (smartForm)
Formulaire embarqué (cartes)
API REST
API REST PCI-DSS
API REST SEPA
Formulaire en redirection
Échange de fichiers
Paiement mobile
Exemples de code
Modules de paiement
Marketplace
Back Office
Back Office Marchand
Back Office Expert
Guides
Aide
FAQ
Tutoriels vidéos
Support

Présentation du formulaire intelligent (smartForm)

Le formulaire intelligent (smartForm) vous permet d'intégrer un parcours de paiement fluide et de présenter plusieurs moyens de paiement.
L'acheteur effectuera son parcours de paiement sans quitter le site marchand.

Evolution majeure du formulaire embarqué (cartes)

Le formulaire intelligent (smartForm) a pour avantage de faire évoluer le formulaire embarqué (cartes) en proposant de nouvelles fonctionnalités. Si vous souhaitez migrer, cliquez ici

Intégration de nouveaux moyens de paiement

Le formulaire intelligent (smartForm) permet d'ajouter facilement sans développement des moyens de paiement "non cartes" (redirection, QR code, paiement cash...) par exemple : initiation de virement, Apple Pay,...

Personnalisation avec le CSS et mise à disposition de plusieurs thèmes

Personnalisez l'aspect de votre formulaire grâce à une feuille de style ainsi que des thèmes prêts à l'emploi et disponibles en open source.

Liste des moyens de paiement compatibles

Consultez la liste des moyens de paiement compatibles.

Cas d'utilisation

Description Mode liste (par défaut)
Ce mode affiche sous forme de liste le bouton du paiement par cartes et ceux des moyens de paiement compatibles.
Consultez ce lien pour avoir des informations complémentaires : mode liste

Description Mode pop-in
Ce mode affiche un bouton unique qui ouvre une pop-in contenant le bouton du paiement par cartes et ceux des moyens de paiement compatibles.
Consultez ce lien pour avoir des informations complémentaires : mode pop-in

Description Mode liste avec carte embarquée
Ce mode affiche les champs embarqués pour le paiement par cartes et les moyens de paiement compatibles.
Consultez ce lien pour avoir des informations complémentaires : mode liste avec carte embarquée

Description Mode liste (par défaut)
Voici une illustration pour mettre en avant le Virement SEPA (Initiation de Paiement).

Elle affiche les champs du paiement par cartes et un bouton du moyen de paiement compatible de votre choix.
Consultez ce lien pour avoir des informations complémentaires : mettre en évidence un moyen de paiement.

Description Mode pop-in
Voici une illustration pour mettre en avant le Virement SEPA (Initiation de Paiement).

Elle affiche un bouton pour le paiement par cartes et un bouton du moyen de paiement compatible de votre choix.
Consultez ce lien pour avoir des informations complémentaires : mettre en évidence un moyen de paiement.

Description Mode liste avec carte embarquée
Voici une illustration pour mettre en avant le Virement SEPA (Initiation de Paiement).

Elle affiche les champs du paiement par cartes et un bouton du moyen de paiement compatible de votre choix.
Consultez ce lien pour avoir des informations complémentaires : mettre en évidence un moyen de paiement.

Apple Pay est uniquement compatible avec un navigateur Safari, disponible depuis les ordinateurs ou appareils mobiles de la marque Apple (Mac, iPhone et iPad).

Description Mode liste avec carte embarquée
Voici une illustration pour mettre en avant plusieurs moyens de paiement : le Virement SEPA (Initiation de Paiement) et Apple Pay.

Elle affiche les champs du paiement par cartes et un bouton pour chaque moyen de paiement compatible mis en évidence.
Consultez ce lien pour avoir des informations complémentaires : mettre en évidence plusieurs moyens de paiement

Description Mode pop-in
Voici une illustration pour mettre en avant plusieurs moyens de paiement : le Virement SEPA (Initiation de Paiement) et Apple Pay.

Elle affiche un bouton pour le paiement par cartes et un bouton pour chaque moyen de paiement compatible mis en évidence.
Consultez ce lien pour avoir des informations complémentaires : mettre en évidence plusieurs moyens de paiement

Description Mode liste avec carte embarquée
Voici une illustration pour mettre en avant plusieurs moyens de paiement : le Virement SEPA (Initiation de Paiement) et Apple Pay.

Elle affiche les champs du paiement par cartes et un bouton pour chaque moyen de paiement compatible mis en évidence.
Consultez ce lien pour avoir des informations complémentaires : mettre en évidence plusieurs moyens de paiement

Masquer les logos du paiement par cartes
<body>
 <div class="kr-smart-form" kr-card-form-expanded kr-no-card-logo-header kr-form-token="[GENERATED FORMTOKEN]">
(...)
</div> 
</body>

Intégrez la classe kr-smart-form et le paramètre kr-no-card-logo-header au sein de la DIV, contenant le formToken.

En intégrant cette fonctionnalité, le marchand peut intégrer ses logos pour personnaliser le formulaire de paiement.

Consultez ce lien pour avoir des informations complémentaires : Masquer les logos du paiement par cartes

Personnaliser la mise en page
<style type="text/css">
    (...)
 /* to use the CSS Flexbox (Flexible Box) */  
  .kr-smart-form .kr-embedded .flex-container {
    flex-direction: row !important;
    display: flex;
  }
  </style>
<body>
 <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]">
  (...)
  </div>
</div>
</body>

Intégrez la classe kr-smart-form et le paramètre kr-card-form-expanded au sein de la DIV, contenant le formToken.

Pour aligner horizontalement les champs du formulaire embarqué, vous pouvez utiliser les Flexbox en CSS avec la propriété flex-direction valorisée à row.

Consultez ce lien pour avoir des informations complémentaires : Personnaliser la mise en page


Vous avez aussi la possibilité de :
  • Modifier l'ordre d'affichage des moyens de paiement
  • Sélectionner les moyens de paiement

Implémentation technique

Si vous avez déjà implémenté le formulaire embarqué (cartes), vous trouverez les informations pour migrer vers le formulaire intelligent (smartForm) :

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

Les différentes étapes d'intégration sont :

  1. Prérequis
  2. S’authentifier
  3. Créer le formToken.
  4. Afficher le formulaire de paiement.
  5. Analyser le résultat du paiement.
  6. Passer en Production.

Pour avoir plus d'informations, rendez vous à la rubrique Intégration du formulaire de paiement.

Nous recrutons

Head Office :

LYRA NETWORK
109, rue de l’innovation
31670 Labège
FRANCE

2.24.0-doc-1.8