Formulaire de paiement CUSTOM

Temps estimé :6 minutes

1/ Introduction

Le service API Transaction permet d’opérer une autorisation puis une capture de la carte de paiement de votre client. Les différents modes de paiement par carte sont pilotés via ce même service.

Pour initier la première transaction d’un client encore inconnu, vous devez d’abord collecter les données de sa carte de paiement en générant un « cardTokenId » via le service de tokenisation de CentralPay « token.js ».

Un objet « card » sera ensuite retourné en tant que « cardId », pourra être enregistré dans un « customer » et ensuite être utilisé lors des prochaines transactions de ce client (pour des paiements en 1 clic ou des paiements récurrents).

Attention, avec le Custom Form, vous devrez également intégrer le processus d’authentification 3DS 2.0 avant d’initier vos transactions.

Schéma de transaction avec « cardTokenId » via le service « token.js » :

Note : Si vous disposez déjà des données de la carte dans votre système et que vous disposez d’un agrément PCI-DSS level 1, vous pouvez directement utiliser le sous-objet « card » en adressant toutes les données de la carte de paiement (BIN, date d’expiration, CVC).

2/ Prérequis

  • Déclarez les domaines autorisés
    Déclarez les domaines sur lesquels vos formulaires de paiement CUSTOM vont être hébergés.
    Allez sur votre Portail utilisateur > Administration > Mon compte > Onglet Technique > cliquez sur « Modifier » > Déclarez vos domaines dans « Hosts Custom Forms autorisés »
  • Sécurisez vos pages de paiement
    Utilisez TLS (1.2 min) (Transport Layer Security) afin qu’elles utilisent les protocoles HTTPS requis par la norme
  • Passez en revue et validez la conformité PCI de votre service chaque année
    Grâce à la combinaison de « CUSTOM + TOKEN.JS », vous gérez vous-même vos formulaires de paiement pour une expérience de paiement optimisée. Cette méthode implique que vous initialisez les paiements sur vos serveurs et vous devez vous conformer au niveau PCI-DSS SAQ A-EP. Vous pouvez télécharger le formulaire SAQ A-EP ici.

3/ Création d’un formulaire de paiement par carte (WEB)

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 CUSTOM.

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.

Consultez nos exemples en ligne de formulaires CUSTOM FORM :

3.1 Créer un formulaire de paiement HTML

Contrairement à la page de paiement SMART FORM qui est généré et hébergé par CentralPay, le CUSTOM FORM doit être créé et intégré par vos soins. Vous devez donc générer le code HTML qui convient à votre parcours de paiement, avec notamment les champs suivants :

  • Numéro de carte (16 digits pour CB, Visa, Mastercard – 15 digits pour Amex)
  • Date d’expiration (MM/AAAA)
  • CVC (3 digits pour CB, Visa, Mastercard – 4 digits pour Amex)

3.2 Envoyer les informations de carte avec le Token.js

Envoyez les données cartes du navigateur du client à la plateforme PCI-DSS de CentralPay qui vous adressera un cardTokenId en retour. Pour ce faire, vous devez ajouter dans le <body> le tag ci-dessous :

  • Tag du Token.js de recette :
<script src="https://test-js.centralpay.net/js/token.js"></script>
  • Tag du Token.js de production :
<script src="https://js.centralpay.net/js/token.js"></script>

Ajoutez également 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. Remplacez celle présente dans l’exemple ci-dessus par la vôtre. Consultez notre rubrique sur l’Authentification de nos API pour connaitre comment la récupérer.

3.3 Réceptionner le cardTokenID dans votre système

Récupérez le cardTokenID qui vous a été retourné 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 min. C’est donc cette valeur que vous devrez transmettre à notre API et en aucun cas les données brutes de la carte bancaire.

3.4 Créer une transaction à l’aide de la cardTokenID

Maintenant que vous êtes en possession du cardTokenID, vous êtes prêts pour initialiser une transaction. À la différence des étapes précédentes qui se déroulent depuis le navigateur, celle-ci sera exécutée depuis vos serveurs.

Consultez les pages dédiés au mode de paiement par carte que vous souhaitez intégrer :

Ou consultez directement le swagger du service API Transaction pour avoir plus de détails techniques.

3.5 Sauvegarder les informations d’une carte dans un profil client

Le cardTokenId n’est utilisable qu’une seule fois. Si vous prévoyez d’utiliser les données de la carte ultérieurement (paiement en 1 clic, paiement récurrent…), 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.

4/ Créer un formulaire de paiement par carte (APP)

Les marchands veulent généralement pouvoir débiter des cartes de paiement sans avoir à stocker des données sensibles sur leurs serveurs. Notre javascript Token.js rend cela simple depuis un navigateur web, mais vous pouvez utiliser la même technique dans d’autres environnements avec notre cardToken.

Ces tokens sont créés grâce à votre merchantPublicKey, qui peut être intégrée en toute sécurité dans des applications téléchargeables telles que les applications iPhone et Android. Vous pouvez ensuite utiliser ces Tokens pour initier vos transactions.

Vous devez ajouter un header « Origin » avec une URL précédemment déclaré dans vos domaines autorisés (voir 2/ Prérequis).
Pour vos tests, vous pouvez utiliser l’Origin : https://example.centralpay.net

Transaction par carte -Précédent Informations générales Prochain- Transaction par carte Authentification 3DS 2.0
CONTENU