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.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
(...)
>
</script>
(...)
</head>- Implémentez la clé publique
Valorisez la clé publique dans le paramètre kr-public-key
<head>
(...)
<script type="text/javascript"
src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ"
(...) >
</script>
(...)
</head>Pour rappel, elle correspond à la 3 ème clé du tableau.
3. 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.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ"
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
**Néon** est le nouveau thème par défaut. Voici les liens pour charger ce thème.
<head> (...) <link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script src="https://static.systempay.fr/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 HEADsans 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.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ"
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.systempay.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
<script src="https://static.systempay.fr/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 :
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