Afficher le formulaire intelligent (smartForm)

Processing... 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é) :

/doc/fr-FR/rest/V4.0/api/kb/authentication.html

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L45-L85

https://api-sogecommerce.societegenerale.eu/api-payment/V4/Charge/CreatePayment

<!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 :

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L81-L82

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
   kr-public-key="61881992:testpublickey_k7sM5cu1WTzkCCqU966agj3Ia3b04Pcsw4dZoeLVVUbc3" 
   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.min.css	Applique le thème néon en forçant les styles (!important)
neon.css	Applique le thème néon en tenant compte des styles de la page
neon.js	Partie active du thème néon

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 :

Gestion des erreurs

Les erreurs sont automatiquement affichées dans la div ayant pour classe kr-form-error :