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){
               console.log(JSON.parse(xhr.responseText));
               //Get cardTokenId from response and send it during customer creation
            }
            else{
                console.log("Error: Manage this case");
            }
        }
    };
    xhr.send(query.toString());
}
22