Afficher le formulaire
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://epaync.nc/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="15578053:testpublickey_1xhxA8MgmKyFJJK8fS7EaNRPAHDJFTv9AzlF6ue2ZJU8o"
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://epaync.nc/static/js/krypton-client/V4.0/ext/classic-reset.css">
<script
src="https://epaync.nc/static/js/krypton-client/V4.0/ext/classic.js">
</script>
</head>
<body>
<!-- payment form -->
<div class="kr-embedded" kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
<!-- 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> <!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 librarie
Vous devez charger la librairie JavaScript qui contruit 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://epaync.nc/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="15578053:testpublickey_1xhxA8MgmKyFJJK8fS7EaNRPAHDJFTv9AzlF6ue2ZJU8o" 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:
<!-- 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://epaync.nc/static/js/krypton-client/V4.0/ext/classic-reset.css"> <script src="https://epaync.nc/static/js/krypton-client/V4.0/ext/classic.js"> </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>
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.
Insertion des champs de formulaire
<!-- payment form -->
<div class="kr-embedded" kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
<!-- 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> <!-- 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>Le formulaire doit être défini dans un conteneur div ayant kr-embedded 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.
Les champs du formulaire sont insérés à partir de conteneurs DIV spéciaux. Ils sont identifiés à partir des classes suivantes :
| Paramètre | Description |
|---|---|
| kr-pan | Numéro de la carte |
| kr-expiry | Date d'expiration |
| kr-security-code | Code de sécurité (cvv) |
| kr-installment-number | Nombre d'échéances (champ spécifique à l'Amérique Latine) |
| kr-first-installment-delay | Nombre de mois de différé à appliquer sur la première échéance (champ spécifique à l'Amérique Latine) |
| kr-identity-document-type | Type de document d'identité (champ spécifique à l'Amérique Latine) |
| kr-identity-document-number | Numéro de la pièce d'identité (champ spécifique à l'Amérique Latine) |
| kr-card-holder-name | Nom du porteur de la carte (champ spécifique à l'Amérique Latine) |
| kr-card-holder-mail | Adresse e-mail du porteur de la carte (champ spécifique à l'Amérique Latine) |
| kr-do-register | la case à cocher de confirmation de creation de token de carte |
Le client JavaScript ajoute automatiquement les champs requis par l'acquéreur.
Vous pouvez ajuster l’ordre d’affichage des champs du formulaire en les déclarants dans votre code. Par exemple, pour forcer le champ kr-installment-number à s’afficher juste avant le bouton "payer", il suffit de le déclarer en dernier :
<!-- payment form fields --> <div class="kr-pan"></div> <div class="kr-expiry"></div> <div class="kr-security-code"></div> <div class="kr-installment-number"></div> <!-- payment form submit button --> <button class="kr-payment-button"></button>
Si vous avez déclaré un champ non requis par l'acquéreur, le client JavaScript le supprimera automatiquement.
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.
Bouton de paiement
Pour valider votre formulaire, il suffit d'ajouter un bouton HTML classique avec la classe kr-payment-button. Le label sera inséré automatiquement dans la bonne langue :
<!-- payment form submit button -->
<button class="kr-payment-button"></button> <!-- payment form submit button -->
<button class="kr-payment-button"></button>Tester le formulaire
Pour accéder à l'étape suivante, vous devez effectuer un paiement. Sélectionnez une carte valide à partir de la barre de debug du formulaire (en bas a gauche) et cliquez sur payer :
Vous pouvez également vous rendre directement à l'étape suivante : retour à la boutique.