Démarrer : paiement simple

3 étapes sont nécessaires pour intégrer un formulaire de paiement sur le site marchand:

• L'initialisation du formulaire embarqué
• L'affichage du formulaire embarqué
• La vérification du statut de la transaction en fin de paiement

Le schéma suivant détaille les interactions entre les différents acteurs (formulaire embarqué, serveur marchand, plateforme de paiement) pour chacune de ces étapes :

1. Initialiser le formulaire

Avant d'afficher un nouveau formulaire de paiement sur le site marchand, vous devez initialiser le formulaire en générant un token de formulaire (ou formToken) qui synthétise toutes les options liées au paiement.

Pour créer un formToken, il faut appeler le Web Service REST Charge/CreatePayment depuis votre serveur :

Étape	Description
1	Appel du Web Service REST Charge/CreatePayment depuis les serveurs du marchand.
2	Réception du résultat contenant le formToken.

Le formToken est valide pendant 15 minutes.

Consultez la liste des cas d'utilisation pour vous aider à initialiser votre formulaire.

2. Afficher le formulaire

Pour afficher le formulaire de paiement, vous devez inclure notre librairie JavaScript dans le header de votre page de paiement.

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.

Le formToken est à ajouter au code d'intégration. Il sera utilisé par la librairie JavaScript pour afficher le formulaire à partir du formToken défini à l'étape précédente :

Étape	Description
3	Téléchargement de la librarie JavaScript. Requête effectuée depuis le navigateur de l'acheteur.
4	Récupération du JavaScript, puis affichage de la page contenant le formulaire de paiement.

Pour un site utilisant un framework Javascript (Angular, React, Vue.js, ...), le concept est légèrement différent : voir checkout en une page ou SPC (Single Page Checkout )

Une fois le formulaire affiché, l'acheteur peut entrer ses données bancaires. Si le paiement est refusé, l'acheteur reste sur le site marchand. Si le paiement est accepté, les informations de la transaction sont envoyées sur le serveur marchand.

3. Vérifier le statut de la transaction

Lorsque la transaction est acceptée ou que le nombre maximum de tentatives est atteint, le client JavaScript effectue un POST du formulaire de paiement. Il se déroule exactement comme s'il s'agissait d'un formulaire HTML classique. Vous récupérez les informations de paiement dans les paramètres POST envoyés à votre serveur.

Étape	Déscription
5	L'acheteur a cliqué sur le bouton "payer" : soumission du formulaire depuis le navigateur de l'acheteur vers nos serveurs. Cet appel est effectué automatiquement par notre client JavaScript.
6	Une fois la transaction traitée, nous effectuons un appel depuis nos serveurs vers une URL que vous avez déterminée. L'objet Transaction complet sera envoyé pour vous permettre de mettre à jour votre système d'information avant le retour navigateur. C'est l'IPN (Instant Payment Notification).
7	Nos serveurs renvoient le résultat du paiement au client JavaScript.
8	Le client JavaScript POSTe le formulaire de paiement sur vos serveurs.

Pour les sites dynamiques (qui utilisent AngularJS, React ou Vue.js), il est également possible de récupérer les informations de paiement en JavaScript : Application web monopage

Traiter l'IPN vous permet de mettre à jour votre système d'information de manière plus sécurisée et vous garantit de ne perdre aucun paiement dans le cas où l'acheteur perdrait sa connexion internet. Pour plus d'informations, veuillez consulter l'article dédié à l'IPN ici : Ipn: Présentation

C'est parti !

Après cet entremet théorique, il est temps de passer aux choses concrètes : Créer un formToken