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.

Chargez notre librairie JavaScript

src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"

Implémentez la clé publique

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

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

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

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 connaître les autres paramètres. Après la balise <script>, choisissez un thème.

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.systempay.fr/static/js/krypton-client/V4.0/ext/classic.css">
  <script
  src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 (...)
 </head>

Plus d'infos, sur les thèmes.

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.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 CLASSIC should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script src="https://static.systempay.fr/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 :

IV. Exemple simplifié PHP

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

embedded.php.
popin.php.

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

Catégories