Example description: Single payment using Card Token ID

In this demo example you have Custom Form with enabled support for verification for a single Payment using Card Token ID. One click transaction can be splitted in some steps to show each part of the process.

Fill the form with a valid name, email and a valid card* number (or use default values clicking on the EXAMPLE DATA button).

Step 1
Collecting the personal information and credit card data. All required fields must be filled before sending data.
Step 2
Card data is sent to CentralPay through the browser with token.js. CentralPay stores the card data and returns the CardToken ID to the merchant form.
Step 3
CardToken ID, currency, amount, and order data are sent to the API from the form. CentralPay creates a Transaction and returns Transaction ID with JSON response to the merchant.
Click on the button to fill the form fields:          
Test Card number: 4000 0000 0000 0002    
Expiration date: valid date
CVV: 3 digit number

Card data

Choose your card and enter CVV   
Secure payment by CentralPay
CentralPay is an Electronic Money Issuer authorised by the Banque de France (CIB 17138).

function onValidFormPay()
    var form = document.querySelector('form[data-centralpay="form"]');
    var urlCentralpayApi = 'https://test-api.centralpay.net/v2/rest/';

    var firstname = form.querySelector('input[name="order[firstName]"]').value;
    var lastname = form.querySelector('input[name="order[lastName]"]').value;
    var number = form.querySelector('input[data-centralpay="card[number]"]').value;
    var holderEmail = form.querySelector('input[name="card[cardholderEmail]"]').value;
    var expirationMonth = form.querySelector('input[data-centralpay="card[expirationMonth]"]').value;
    var expirationYear = form.querySelector('input[data-centralpay="card[expirationYear]"]').value;
    var cvc = form.querySelector('input[data-centralpay="card[cvc]"]').value;

    var data = {
        'merchantPublicKey': document.querySelector('input[data-example="merchantPublicKey"]').value,
        'card[holderEmail]': holderEmail,prettyprint lang-html
        'card[holderName]': lastname + " " + firstname,
        'card[number]': number,
        'card[cvc]': cvc,
        'card[expirationMonth]': expirationMonth,
        'card[expirationYear]': expirationYear,

    const query = new URLSearchParams(data);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', urlCentralpayApi + 'cardToken');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if(xhr.status === 400){
                console.log("400: Manage this case");
            else if(xhr.status === 200){
               //Get cardTokenId from response and send it during customer creation
                console.log("Error: Manage this case");