Afficher le formulaire intelligent (smartForm)
Dans l'étape précédente, nous avons créé un formToken à l'aide du Web Service REST Charge/CreatePayment Le formToken est utilisé par la librairie JavaScript pour afficher un formulaire de paiement.
Exemple de code
Pour insérer un formulaire de paiement, il suffit d'inclure le code suivant (avec le formToken précédemment généré) :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Javascript library. Should be loaded in head section -->
<script
src="https://static-clicandpay.groupecdn.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="33659165:testpublickey_udUn5ozc6NwSbM3r479WfIJQkot5O1gWabElhClL3MJNY"
kr-post-url-success="paid.html">
</script>
<!-- theme and plugins. should be loaded after the javascript library -->
<!-- not mandatory but helps to have a nice payment form out of the box -->
<link rel="stylesheet"
href="https://static-clicandpay.groupecdn.fr/static/js/krypton-client/V4.0/ext/classic-reset.css">
<script
src="https://static-clicandpay.groupecdn.fr/static/js/krypton-client/V4.0/ext/classic.js">
</script>
</head>
<body>
<!-- payment form -->
<div class="kr-smart-form" kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
<!-- error zone -->
<div class="kr-form-error"></div>
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Javascript library. Should be loaded in head section -->
<script
src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="<?php echo $client->getPublicKey();?>"
kr-post-url-success="paid.php">
</script>
<!-- theme and plugins. should be loaded after the javascript library -->
<!-- not mandatory but helps to have a nice payment form out of the box -->
<link rel="stylesheet"
href="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic-reset.css">
<script
src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic.js">
</script>
</head>
<body style="padding-top:20px">
<!-- payment form -->
<div class="kr-embedded" kr-form-token="<?php echo $formToken;?>">
<!-- payment form fields -->
<div class="kr-pan"></div>
<div class="kr-expiry"></div>
<div class="kr-security-code"></div>
<!-- payment form submit button -->
<button class="kr-payment-button"></button>
<!-- error zone -->
<div class="kr-form-error"></div>
</div>
</body>
</html>Les sections suivantes décrivent en détail l’exemple de code précédent.
Chargement de la librairie
Vous devez charger la librairie JavaScript qui construit le formulaire de paiement dans le HEAD de votre page.
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:
<!-- Javascript library. Should be loaded in head section --> <script src="https://static-clicandpay.groupecdn.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="33659165:testpublickey_udUn5ozc6NwSbM3r479WfIJQkot5O1gWabElhClL3MJNY" kr-post-url-success="paid.html"> </script>
<!-- Javascript library. Should be loaded in head section --> <script src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="<?php echo $client->getPublicKey();?>" kr-post-url-success="paid.php"> </script>
Plusieurs paramètres sont disponibles (liste non exhaustive) :
| Nom | Requis | Description |
|---|---|---|
| kr-public-key | ✓ | Clé publique. Ce paramètre est obligatoire. Pour plus de détails, voir Prérequis (Clés). |
| kr-post-url-success | URL vers laquelle est redirigé le navigateur de l'acheteur en cas de paiement réussi. Si le paramètre n'est pas défini, le résultat du paiement est posté sur l'URL en cours. | |
| 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. |
Pour une liste complète des paramètres de configuration disponibles, rendez-vous ici.
Appliquer un thème
Le formulaire de paiement utilise les styles standards (CSS) pour personnaliser le formulaire de paiement. Plusieurs feuilles de styles sont disponibles, mais vous pouvez aussi créer la votre.
Pour utiliser le thème par défaut, il suffit d'inclure, dans la section HEAD de votre page, la feuille de style suivante:
néon est le thème par défaut. Les fichiers associés sont :
| fichiers | description |
|---|---|
| neon-reset.css | Applique le thème classic en forçant les styles (!important) |
| neon.css | Applique le thème classic en tenant compte des styles de la page |
| neon.js | Partie active du thème classic |
Les fichiers de thèmes sont optionnels. S'ils ne sont pas inclus, le formulaire de paiement sera fonctionnel mais avec un aspect minimaliste.
Plus de détails sur la personnalisation du formulaire ici : Thèmes.
Initialisation du formulaire intelligent (smartForm) avec la classe kr-smart-form
Le formulaire intelligent (smartForm) est initialisé et doit être défini dans un conteneur div ayant kr-smart-form pour classe.
Le paramètre kr-form-token doit contenir le formToken préalablement généré lors de l'appel au web service REST Charge/CreatePayment.
Exemple de code en mode liste, par défaut :
<body>
<!-- new class kr-smart-form with the kr-form-token-->
<div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]">
</div>
</body>Gestion du mode d'affichage
Il existe 3 modes d'affichage :
| Mode | Description |
|---|---|
| liste | Affiche sous forme de liste le bouton du paiement par cartes et ceux des moyens de paiement compatibles. Affichage par défaut. |
| pop-in | Affiche un bouton unique qui ouvre une pop-in contenant le bouton du paiement par cartes et ceux des moyens de paiement compatibles. |
| liste avec carte embarquée | Affiche les champs embarqués pour le paiement par cartes et les moyens de paiement compatibles. |
Mode liste (par défaut)  | Mode liste avec carte embarquée  |
Il est possible de choisir les affichages suivants :
- Affichage du mode liste (par défaut);
- Affichage du mode pop-in;
- Affichage du mode liste avec carte embarquée;
- Mettre en évidence un moyen de paiement;
- Mettre en évidence plusieurs moyens de paiement;
- Personnaliser le formulaire intelligent (smartForm);
Gestion des erreurs
Les erreurs sont automatiquement affichées dans la div ayant pour classe kr-form-error:
<!-- error zone -->
<div class="kr-form-error"></div> <!-- error zone -->
<div class="kr-form-error"></div>Vous pouvez également gérer les erreurs vous-même. Rendez-vous ici pour plus de détails.