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,
- Chargez notre librairie JavaScript dans une balise script.
<head>
(...)
<script type="text/javascript"
src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
(...)
>
</script>
(...)
</head>Si pour des raisons de sécurité (contraintes PCI-DSS) vous devez implémenter le SRI, consultez la page : Intégrer l'intégrité des sous-ressources (SRI).
- Implémentez la clé publique
Valorisez la clé publique dans le paramètre kr-public-key
<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"
(...) >
</script>
(...)
</head>Pour rappel, elle correspond à la 3 ème clé du tableau.
3. Ajoutez d'autres paramètres d'initialisation
| 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 **les autres paramètres**.
Après la balise script, choisissez un **thème**.
4. Choisissez un thème
<head> (...) <link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon.js"> </script> (...) </head>
Plus d'infos : thèmes.
5. 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
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 NEON should be loaded in the HEAD section -->
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
<script src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon.js">
</script>
</head>II. Définir le mode d'affichage
Dans le BODY, choisissez le mode d'affichage et valorisez le paramètre kr-form-token avec le formToken généré (Etape 3 : Créer un formToken).
| Mode | Description |
|---|---|
| liste | Affiche sous forme de liste les moyens de paiement disponibles et compatibles Affichage par défaut. |
| pop-in | Affiche un bouton de paiement qui ouvre une pop-in contenant les moyens de paiement disponibles et compatibles. |
| liste avec carte embarquée | Affiche les champs embarqués pour le paiement par cartes et les moyens de paiement disponibles et compatibles. |
| Mode liste (par défaut) | Mode Popin | Mode liste avec carte embarquée |
|---|---|---|
 |  | |
<body>
<div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
</body> | <body>
<div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
</body> | <body>
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
</body> |
| Plus d'infos : Mode liste | Plus d'infos : Mode pop-in | Plus d'infos : Mode liste avec carte embarquée |
Vous avez également le choix :
III. Personnalisation avancée
Cette étape est facultative.
Exemple de personnalisation :
- Masquer les logos du paiement par cartes
- Modifier l'ordre d'affichage
- Personnalisation des boutons de paiement
- Personnaliser la mise en page
IV. Exemple simplifié PHP
Dans le dossier sample, le fichier de cette étape est smartForm.php.
Pour avoir plus de détails, Fichier d'exemple : smartForm.php