• 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

Etape 4 : Afficher le formulaire de paiement

Objectif

  • Afficher l'ensemble des champs de paiement (numéro de carte, date d'expiration, CVV, etc.) sur votre site Web.

I.Initaliser le formulaire de paiement

Dans le HEAD de la page, il faut inclure dans une balise <script> les données suivantes.

  1. Chargez notre librairie JavaScript

Il est impératif que la librairie principale soit chargée très tôt, bien avant les autres librairies JS utilisées sur votre page.

src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
  1. Implémentez la clé publique

Valorisez la clé publique dans le paramètre kr-public-key

<head>
(...)
<script type="text/javascript"
        (...)
        kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"
        (...)
 </script>
(...)
 </head>

Pour rappel, elle correspond à la 3 ème clé du tableau.

  1. Ajoutez d'autres paramètres d'initialisation
  • Ajout de 2 paramètres d'initialisation, par exemple :
Nom Description
kr-post-url-success URL vers laquelle est redirigé le navigateur de l'acheteur en cas de paiement réussi. (recommandé)
kr-language Définit le langage d'affichage du formulaire. Accepte l'iso ISO 639-1 (fr ou fr-FR). Si le paramètre n'est pas défini, le formulaire utilise la langue du navigateur.

Exemple de code :

<head>
(...)
<script type="text/javascript"
        src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"
        kr-post-url-success="paid.php";
        kr-language="en-EN">
 </script>
(...)
 </head>

Référez vous à ces 2 rubriques Paramètres généraux et Paramètres de personnalisation des "placeholders" pour connaître les autres paramètres. Après la balise <script>, choisissez un thème.

  1. Choisissez un thème

Classic est le thème par défaut. Voici les liens pour charger ce thème.

<head>
(...)
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.css">
  <script
  src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 (...)
 </head>

Plus d'infos, sur les thèmes.

  1. Ajout des fonctions JS (facultatif) :
  • Dans une autre balise <script>, intégrez au choix des évènements ou des méthodes JS.

  • Pour plus de détails, Présentation des événements et Présentation des méthodes.

Exemple de code pour le HEAD sans fonction JS:

<head>
<!-- STEP :
1 : load the JS librairy 
2 : required public key with file config.php
3 : the JS parameters url sucess and langage EN  -->

<script type="text/javascript"
        src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"
        kr-post-url-success="paid.php";
        kr-language="en-EN">
 </script>

  <!--  theme CLASSIC should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 </head>

II. Définir le mode d'affichage

Dans le BODY, choisissez le mode d'affichage qui vous convient.

Mode Description
embarqué Affiche les champs du paiement par cartes (numéro de carte, date d'expiration, CVV, etc.)
pop-in Affiche un bouton de paiement qui ouvre une pop-in contenant les champs de paiement (numéro de carte, date d'expiration, CVV, etc.).
Mode embarqué Mode Popin
<body>
        <div class="kr-embedded" kr-form-token="[GENERATED FORMTOKEN]"></div>
        (...)
</body>
<body>
        <div class="kr-embedded" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div>
        (...)
</body>
Plus d'infos : Mode embarqué Plus d'infos : Mode pop-in

III. Personnalisation avancée

Cette étape est facultative.

Exemple de personnalisation :

  • Personnaliser le bouton "Payer";
  • Personnalisation de la mise en page pour le formulaire embarqué;

IV. Exemple simplifié PHP

Dans le dossier sample, les fichiers d'exemple sont :

  1. embedded.php.
  2. popin.php.

Pour avoir plus de détails, Fichiers d'exemple : embedded.php et popin.php

ETAPE SUIVANTE N°5

Nous recrutons
Mentions légales
Charte de Protection des Données Personnelles
25.18-1.11