Example description: Credit Card Storage

In this demo example you have Custom Form with enabled support for verification for a Payment with Credit Card storage. Once the payment has been processed and the card is stored. Retrieve a list of Customer Cards is easily available using an e-mail address.



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. Select the Remember my card option to store your card.
Step 2
Card data is sent to CentralPay through the browser with token.js. CentralPay stores the card data and returns the CardTokenID to the merchant form. Using the CardToken ID, a new Customer ID is requested.
Step 3
Either if it's a new card or an existing one, use your Customer ID / Card ID validated with the CVV to process a new transaction.
Step 4
The Payment Authentication Response, Customer ID / Card ID, currency, amount, and order data are sent to the API by submitting the form. CentralPay creates a Transaction and returns TransactionId with JSON response to the merchant.

Try a new transaction using the Customer / Card created here »
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

Use your card
Your card data is stored securely. More information»
Select 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());
}

 
curl -v customer \
-u ' ' \
-d merchantCustomerId=  \
-d cardTokenId=  \
-d firstName=  \
-d lastName=  \
-d email=  \
 

curl -v card \
-u ' ' \
-d merchantCardId=  \
-d customerId=  \
-d cardTokenId=  \



curl -v https://test-api.centralpay.net/v2/rest/transaction \
-u ' ' \
-d merchantTransactionId=  \
-d amount= \
-d capture=  \
-d currency= \
-d receiptEmail=  \
-d pointOfSaleId=  \
-d cardTokenId=  \
-d customerId=  \
-d cardId=  \
-d cvcValidation=  \
-d description=  \
-d endUserIp= 35.172.217.40 \
-d order[firstName]=  \
-d order[lastName]=  \
-d order[country]=  \
-d endUserLanguage=  \
-d browserAcceptLanguage=  \
-d browserUserAgent=  \
22