Example description: Card acceptance using CustomerID / CardID

In this demo example you have Custom Form enabled to pay creating a CustomerID / CardID first. After that CustomerID is used to process next transactions and acceptance rules will request a second validation depending on different settings:

The third transaction for the same customer will require always, at least,CVV.
Payments above 90€ will require 3DS validation.
If total amount per customer in a day exceeds 725€, transaction will be refused.

After creating CustomerID in the first payment, new examples will show the different behavior of the rule engine for each one-click payment.

Continue process flow / Receive CardTokenID / CustomerID and then click again to create transaction.

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

Show CURL code to make the transaction Show JSON response from CentralPay API

cardTokenId:
customerId:
cardId:
enrollmentId:
transactionId:

Offer 1

25.00€

Offer 2

75.00€

Offer 3

400.00€

remember me Use your card

Select card and enter CVV

Secure payment by

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.

Step 3

CardTokenId, currency, amount, and order data are sent to the API from the form. CentralPay creates a CustomerId with a CardId that can be used to make recurrent Transactions.

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.

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());
}

<div class="html-style-code">
            <form method="post" data-centralpay="form" action="https://example.centralpay.net/v2/process/display"><br>
                <div class="row mx-0 text-center"><br>
                    <div class="col-4 px-0"><br>
                        <div class="card card-offer"><br>
                            <div class="card-header"><br>
                                <label for="amount0"><span data-display="offer-name">offer</span></label><br>
                            </div><br>
                            <div class="card-body"><br>
                                <p class="text-price">
                                    <span data-display="amount"></span>
                                    <span data-display="currency-symbol">-</span>
                                </p><br>
                                <input type="radio" name="offer" id="amount0" data-select="amount" required /><br>
                            </div><br>
                        </div><br>
                    </div><br>
                    <div class="col-4 px-0"><br>
                        <div class="card card-offer"><br>
                            <div class="card-header"><br>
                                <label for="amount1"><span data-display="offer-name">offer</span></label><br>
                            </div><br>
                            <div class="card-body"><br>
                                <p class="text-price">
                                    <span data-display="amount"></span>
                                    <span data-display="currency-symbol">-</span>
                                </p><br>
                                <input type="radio" name="offer" id="amount1" data-select="amount" /><br>
                            </div><br>
                        </div><br>
                    </div><br>
                    <div class="col-4 px-0"><br>
                        <div class="card card-offer"><br>
                            <div class="card-header"><br>
                                <label for="amount2"><span data-display="offer-name">offer</span></label><br>
                            </div><br>
                            <div class="card-body"><br>
                                <p class="text-price">
                                    <span data-display="amount"></span>
                                    <span data-display="currency-symbol">-</span>
                                </p><br>
                                <input type="radio" name="offer" id="amount2" data-select="amount" /><br>
                            </div><br>
                        </div><br>
                    </div><br>
                </div><br>
                <div data-centralpay="errors" class="custom-form"></div><br>
                <p data-form="main-description" class="sr-only">Card data</p><br>
                <div class="form-row mt-3" data-toggle="popover-example-data"><br>
                    <div class="form-group col-6"><br>
                        <div class="has-feedback input-group"><br>
                            <div class="input-group-prepend"><br>
                                <div class="input-group-text">
                                    <div class="ico ico-user"></div>
                                </div><br>
                            </div><br>
                            <input data-centralpay="firstName" type="text" name="order[firstName]" autocomplete="off" data-form="card-user" class="form-control" placeholder="First name" required="required" /><br>
                        </div><br>
                    </div><br>
                    <div class="form-group col-6"><br>
                        <div class="has-feedback input-group"><br>
                            <div class="input-group-prepend"><br>
                                <div class="input-group-text">
                                    <div class="ico ico-user"></div>
                                </div><br>
                            </div><br>
                            <input data-centralpay="lastName" type="text" name="order[lastName]" autocomplete="off" data-form="card-user" class="form-control" placeholder="Last name" required="required" /><br>
                        </div><br>
                    </div><br>
                </div><br>
                <div data-form="card-validation"><br>
                    <div class="form-row"><br>
                        <div class="form-group col-12"><br>
                            <div class="has-feedback input-group"><br>
                                <div class="input-group-prepend"><br>
                                    <div class="input-group-text">
                                        <div class="ico ico-envelope"></div>
                                    </div><br>
                                </div><br>
                                <input data-centralpay="card[holderEmail]" type="email" name="card[cardholderEmail]" autocomplete="off" class="form-control" data-form="card-user" placeholder="E-mail" required="required" /><br>
                            </div><br>
                        </div><br>
                    </div><br>
                    <div class="form-row"><br>
                        <div class="col-12"><br>
                            <div data-form="remember-div" class="remember remember-option d-flex align-items-center mb-3"><br>
                                <span class="remember-checkbox form-check"><br>
                                    <input class="form-check-input" data-form="remember-select" id="remember" type="checkbox" name="store-card"/><br>
                                    <label class="form-check-label" for="remember">remember me</label><br>
                                </span><br>
                                <span class="card-stored">Use your card</span><br>
                                <a class="help-icon" data-toggle="popover-info"><br>
                                    <img src="/v2/src/img/question-mark.png" alt=""><br>
                                </a><br>
                                <div id="popover-card-info" class="d-none"><br>
                                    <span class="np-popover-style">Your card data is stored securely. <a href="#">More information</a></span><br>
                                </div><br>
                            </div><br>
                        </div><br>
                    </div><br>
                    <div class="form-row d-none"><br>
                        <div class="form-group col-12"><br>
                            <select list="userCards" data-form="card-list" type="text" class="form-control input-large"><br>
                                <option> -- pay with a new credit card -- </option><br>
                            </select><br>
                        </div><br>
                    </div><br>
                    <div id="card-option" class="new-card-ok"><br>
                        <div class="form-row"><br>
                            <div class="form-group col-12 new-card"><br>
                                <div class="has-feedback input-group"><br>
                                    <div class="input-group-prepend"><br>
                                        <div class="input-group-text">
                                            <div class="ico ico-cb"></div>
                                        </div><br>
                                    </div><br>
                                    <input data-centralpay="card[number]" type="tel" pattern="([0-9 ]{14,20})?" autocomplete="off" class="form-control form-card-data form-card-number" placeholder="Credit card number"  maxlength="20" data-form="card-data" /><br>
                                </div><br>
                            </div><br>
                        </div><br>
                        <div class="form-row align-items-center"><br>
                            <div class="form-group col-8 new-card"><br>
                                <div class="has-feedback input-group"><br>
                                    <div class="input-group-prepend"><br>
                                        <div class="input-group-text">
                                            <div class="ico ico-calendar"></div>
                                        </div><br>
                                    </div><br>
                                    <input data-centralpay="card[expirationMonth]" type="tel" pattern="[0-9]{1,2}"  maxlength="2" autocomplete="off" class="form-control form-card-data" placeholder="MM"   data-form="card-data" /><br>
                                    <input data-centralpay="card[expirationYear]" type="tel" max="9999" inputmode="tel"  pattern="[0-9]{4}" autocomplete="off" class="form-control form-card-data"   data-form="card-data" placeholder="YYYY" /><br>
                                </div><br>
                            </div><br>
                            <div class="form-group col-8 stored-card use-cvv text-right">Select card and enter CVV</div><br>
                            <div class="form-group col-4 use-cvv"><br>
                                <div class="has-feedback input-group"><br>
                                    <div class="input-group-prepend"><br>
                                        <div class="input-group-text">
                                            <div class="ico ico-lock"></div>
                                        </div><br>
                                    </div><br>
                                    <input data-centralpay="card[cvc]" type="tel" pattern="[0-9]{3,4}" maxlength="4"  autocomplete="off" class="form-control form-card-data" placeholder="CVV2" name="customerValidationValue" /><br>
                                </div><br>
                            </div><br>
                        </div><br>
                    </div><br>
                </div><br>
                <div class="text-center mt-2"><br>
                    <button class="btn btn-cpay" type="submit" value="submit" data-form="submit" data-toggle="popover" data-placement="bottom" data-trigger="hover"><br>
                        <div class="np-button-content"><br>
                            <span data-display="submit-value">Pay</span><br>
                            <div class="np-loader"></div><br>
                        </div><br>
                    </button><br>
                </div><br>
            </form>
        </div>

MerchantPublicKey •

username:password •

pointOfSaleID (optional) •

Order country: