Implémentation du formulaire de paiement
Principe :
Vous affichez une page de paiement comprenant un formulaire de paiement, sauf que les champs de saisie de carte bancaire sont remplacés par des 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 javascript des 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 les librairies javascript suivantes entre les balises <head>…</head>
<script type="text/javascript" src="https://js.sandbox.be2bill.com/hostedfields/v1/hosted-fields.min.js"/>
<script type="text/javascript" src=" https://js.sandbox.be2bill.com/branddetector/v1/brand-selector-widget.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="card-container"></span>
<span id="expiry-container"></span>
<span id="cvv-container"></span>
<span id="brand-container"></span>
<input type="submit" value="Pay">
</form>L’url à renseigner dans l’attribut action est la suivante :
URL_API/psp/submitcardpayment
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
fields: {
'card': {
id: 'card-container',
//enable the card field format auto spacing
enableAutospacing: true
},
'expiry': {
id: 'expiry-container'
},
'cryptogram': {
id: 'cvv-container'
},
'brand': {
id: 'brand-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 de la carte bancaire 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- 7- Inclure les propriétés Smoney OPERATIONID, PAYINTOKENID et EXTRADATA (issues du résultat de l’appel api pour créer le paiement par carte bancaire) en champs hidden en plus de celui du jeton.
<input type="hidden" name="smoperationid" value="@Model.OperationId" />
<input type="hidden" name="smpayintokenid" value="@Model.PayinTokenId" />
<input type="hidden" name="smextradata" value="@Model.ExtraData" />Les attributs « name » des balises input hidden ne doivent pas être changés.
Paiement avec authentification 3DSecure :
Selon la carte utilisée lors du paiement, à la soumission du formulaire de paiement, une authentification 3DSecure peut être nécessaire.
Dans ce cas, en réponse à l’action du formulaire, la page HTML du formulaire 3DSecure est envoyé en contenu de la réponse accompagné d’un http status code 200 (OK).
La soumission du formulaire 3DSecure se terminera par une redirection 302 vers l’url renseignée dans le champ urlReturn de la requête initiale.
Dans le cas contraire, une réponse 302 (redirect) est directement faite et redirige le navigateur de l’utilisateur vers l’url renseignée dans le champ urlReturn de la requête initiale.