v3

Implémentation du formulaire de saisie du CVV

Principe :
Vous affichez une page de saisie du CVV comprenant un champ de saisie du CVV au sein de conteneurs de champs hébergés. Ces conteneurs peuvent être n’importe quelle balise HTML : DIV, P, SPAN… la bibliothèque JavaScript des champs hébergés injecte des iframes hébergés par Dalenys dans ces conteneurs, chacun contenant les champs de saisie de données de la carte.
Lors du processus de soumission, vous devrez appeler la méthode Javascript createToken de la bibliothèque de champs hébergés qui déclenchera la création de jetons des données du titulaire de la carte (numéro de carte, date d’expiration et cryptogramme). Si la création de jetons aboutit, vous devez ajouter le jeton reçu à votre demande de soumission de formulaire dans un champ <input type="hidden" />

Création du formulaire :
Vous devez posséder un certificat TLS (voir en fin de documentation) pour héberger une page de paiement HTTPS valide, sinon le navigateur de l’utilisateur affichera des alertes de sécurité et le bloquera probablement.
La bibliothèque de champs hébergés doit toujours être appelée en ligne.
L’utilisation d’une version téléchargée hébergée sur votre propre serveur peut entraîner de graves dysfonctionnements, notamment dans le cas d’une mise à jour de l’API Dalenys.

1-Inclure la librairie javascript suivante entre les balises <head></head>
<script type="text/javascript" src="https://js.sandbox.be2bill.com/hosted-fields/v1/hosted-fields.min.js"/>

2-Déclarer l’encodage UTF-8 dans les métadonnées
<meta charset="UTF-8">

3-Créer un formulaire <form></form> avec trois conteneurs identifiés par un attribut id. Le choix de l’identifiant utilisé est libre mais doit être unique et seront utilisés dans le code javascript présenté dans les points suivants.

A noter que l’exemple ci-dessous est minimaliste et selon le besoin peut être complété :

<form method="post" action="URL">
<span id="cvv-container"></span>
<input type="submit" value="Pay">
</form>

L’url à renseigner dans l’attribut action est la suivante :
URL_API/psp/submitcvv

4-configuration des champs hébergés
L’étape suivante consiste à désigner les conteneurs dans lesquels créer les champs hébergés sécurisés, à l’aide de JavaScript.
Pour ce faire, initialisez la bibliothèque de champs hébergés avec votre clé API publique et la configuration souhaitée : S-money doit fournir les clés nécessaires au hosted fields.

<script type="text/javascript">
   // Initialize the hosted-fields library
   var hfields = be2bill.hostedFields({
       // Use your Public API Key
       key: {
           id : ‘XXX’
           value : ‘XXX’
       },
       // Link and configure each hosted input field by providing the corresponding container ID
<script type="text/javascript">
   // Initialize the hosted-fields library
   var hfields = be2bill.hostedFields({
       // Use your Public API Key
       key: {
           id : ‘XXX’
           value : ‘XXX’
       },
       // Link and configure each hosted input field by providing the corresponding container ID
       fields: {
           'cryptogram': {
               id: 'cvv-container'
           },
       },
       // Choose the language for error messages
       location: "fr"
   });
</script>

Les identifiants utilisés dans le script pour désigner les champs sont ceux utilisés pour les identifiants des conteneurs créés dans le formulaire. Ceci permettant au script d’injecter les champs hébergés par Dalenys dans ces conteneurs.

5-Charger la bibliothèque des champs hébergés

<script type="text/javascript">
   hfields.load();
</script>

À ce stade, votre navigateur Web peut afficher les champs de saisie du CVV dans leurs conteneurs.

6-Générer le jeton
A la soumission du formulaire, vous devez appeler la méthode createToken() sur l’événement onsubmit() pour déclencher le processus de création de jetons.
Cette méthode attend un paramètre de rappel qui sera déclenché une fois la demande de tokénisation terminée.
Votre rappel recevra un objet de résultat contenant ces propriétés :

  • execCode : code de résultat technique de l’appel tokenization. En cas de succès, 0000 sera envoyé
  • message : la description liée à l’execCode
  • cardType : le type de carte
  • cardCode : Les 6 premiers et les 4 derniers chiffres du numéro de la carte du titulaire
  • cardValidityDate : Date d’expiration de la carte
  • hfToken : le jeton généré
    En cas de succès, vous devez ajouter le jeton reçu à la demande d’envoi de formulaire dans une balise <input type="hidden" />
<form method="post" name="formName" action="URL_API/psp/submitcardpayment" onsubmit="return tokenizeHandler()">
   <!-- ... -->
   <input type="hidden" name="hftoken" id="hftoken">
   <!-- ... -->
</form>

<script type="text/javascript">
   function tokenizeHandler() {
       hfields.createToken(function (result) {
           //console.log(result); // Debug
           if (result.execCode == '0000') {
               // Set the token in an hidden input field to transmit it to the merchant submit page
               document.getElementById('hftoken').value = result.hfToken;
               // Send the form request
               document.formName.submit();
           }
       });
       // Prevents the submit of the form in case of failed tokenization request
       return false;
   }
</script>

7-Inclure la propriété Smoney EXTRADATA en champs hidden en plus de celui du jeton.

<input type="hidden" name="smextradata" value="@Model.ExtraData" />

Les attributs name des balises input hidden ne doivent pas être changés.