Start: Single payment

3 steps are required for integrating a payment form on the merchant website. The following diagram presents the interactions between the different actors at each of these stages:

1. Creating a formToken

Before displaying a new payment form on the merchant website, you must generate the formToken.

In order to create a formToken, you must call the Charge/CreatePayment REST Web Service via your servers:

Step Description
1 Call to the Charge/CreatePayment REST Web Service via merchant servers.
2 Reception of the result containing the formToken.

2. Displaying a form

To display a payment form, you must include our JavaScript library in the payment page of the merchant website. The formToken must be added in the integration code. It will be used by the JavaScript library to display the form as it was defined by you in the previous step:

Step Description
3 Download of the JavaScript library. Request made via the buyer&aposs browser.
4 Retrieval of JavaScript, then display of the page containing the payment form as well as the formToken.

For a dynamic website (using Angular, React, Vue.js, etc.), the concept is slightly different: see Single Page Checkout).

Once the form is displayed, the buyer can enter their bank details. If the payment is rejected, the buyer stays on the merchant website. If the payment is accepted, the transaction details are sent to the merchant server.

3. Verifying the transaction status

When the transaction is accepted or the maximum number of attempts has been reached, the JavaScript client POSTs the payment form. It is made in exactly the same way as for a classic HTML form. You retrieve the payment information in the POST parameters sent to your server.

Step Description
5 The buyer has clicked the “pay” button: submission of the form via the buyer&aposs browser to our servers. This call is made automatically by our JavaScript client.
6 Once the transaction has been processed, we make a call via our servers to the URL that you have defined. The complete transaction object will be sent to allow you to update your information system before the browser return. it is the IPN (Instant Payment Notification).
7 Our servers return the payment result to the JavaScript client.
8 The JavaScript client POSTs the payment form to your servers.

For dynamic websites (that use AngularJS, React or Vue.js), it is also possible to retrieve payment details in JavaScript: Single-page application

POST parameters contain only minimal information to check the transaction status. All the information related to the transaction is sent via a server to server call, also called Instant Payment Notification (or IPN).

Processing the IPN allows you to update your information system more securely and guarantees that you will not lose any payments if the buyer loses their Internet connection. For more information, see the article dedicated to the IPN: Ipn: Presentation

Let&aposs start!

After this theoretical part, it is time to move on to the practical steps: Creating a formToken