Menu

Le custom form

Le principal avantage d’un Custom Form tient dans le fait que le formulaire de paiement est créé et hébergé par vos soins tout en vous permettant de réduire fortement les risques sécuritaires quant à la manipulation de données bancaires. En intégrant le processus de paiement de votre coté, vous gardez le contrôle de la page de paiement et de l’expérience utilisateur.

Vous pouvez également traiter les paiements complexes très évolués.

Tutoriel Custom Form

Ce tutoriel explique comment utiliser le langage HTML et Token.js pour obtenir un cardTokenID afin de créer une transaction depuis votre propre formulaire de paiement.

Le Token.js est le JavaScript que nous mettons à votre disposition pour vous aider à implémenter le premier composant dont vous avez besoin pour créer un CardTokenID.

Une fois que vous obtenez un cardTokenID, vous serez en mesure d’initialiser une transaction pour débiter la carte de votre client.

Voici les étapes :

1Créer un formulaire de paiement HTML

Contrairement au formulaire POPIN qui est généré par la plate-forme sur la base d’une initialisation de votre part, le formulaire CUSTOM est à créer.

Vous devez donc générer le code HTML qui vous convient.

2Envoyer les informations de carte de débit/de crédit avec le Token.js

Vous devez maintenant envoyer les données cartes du navigateur du client à la plateforme PCI qui vous adressera un cardTokenId. Pour se faire, vous devez ajouer dans le <body> le tag suivant :

<script src="https://test-js.centralpay.net/js/token.js"></script>

Puis votre merchantPublicKey dans un tag séparé :

<script type="text/javascript">
  window.Centralpay ? Centralpay.card.setMerchantPublicKey('8ce4b92abd7c3110e2033ffbfa7cca0f097a66f1f1d267ff6c94429884ed82ac') : alert('Error loading html form');
</script>

La merchantPublicKey identifie vos requêtes vers la Plateforme. Dans l’exemple ci-dessous, il faudra utiliser celle qui vous a été communiqué.

3Réceptionner le cardTokenID dans votre système

Cette étape va consister à récupérer le CardTokenID que vous récupérerez dans le JavaScript afin de pouvoir soumettre votre requête à la plateforme.

Toutes les données de la carte sont maintenant stockées dans cardTokenId pendant une durée de 5 mn. C’est donc cette valeur que vous présentez à l’API et non les données de la carte bancaire.

4Créer une transaction à l'aide de la cardTokenID

Maintenant que vous êtes en possession du CardTokenID vous allez pouvoir l’utiliser pour initialiser une Transaction.

À la différence des étapes précédentes qui se déroulent depuis le navigateur, celle-ci sera executée depuis vos serveurs. Par exemple :

curl -v https://test-api.centralpay.net/v2/rest/transaction \
-u 'DEMOPSC:eUZG&DVD6cCD' \
-d amount= 100
-d currency= EUR
-d cardTokenId=d5bc9bec-aec2-4b92-b45c-23d53719a058 \
-d endUserIp=92.154.127.221 \

5Sauvegarder les informations d’une carte dans un customer en vue d’un usage ultérieur (1 click, subscription…)

CardTokenID n’est utilisable qu’une fois. Si vous prévoyez d’utiliser les données de la carte ultérieurement, vous devez donc créer un customer et y enregistrer une card.

Ainsi, la prochaine fois, au lieu d’utiliser un nouveau cardTokenId, vous utiliserez le customerId correspondant.