Example description: Installment Payment

In this demo example you have Custom Form with enabled support for installment payment. It is required to create or retrieve a customer to create an installment payment.

The card belonging to the customer object will be used to process the transactions of the installment 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:
installmentPaymentId:
threeDSServerTransID:
authentificationValue:

Offer 1

450.00€

deposit of
15000€

Offer 2

850.00€

deposit of
25000€

Offer 3

1,600.00€

deposit of
45000€

I accept installment

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. 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.

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

<form method="post" data-centralpay="form" action="https://example.centralpay.net/v2/process/display">
   <div class="row mx-0">
      <div class="col-4 px-0">
         <div class="card card-offer text-center">
            <div class="card-header">
               <label for="amount0"><strong><span data-display="offer-name">offer</span></strong></label>
            </div>
            <div class="card-body with-suffix">
               <p class="text-price"><span data-display="amount"></span><span data-display="currency-symbol">-</span></p>
               <input type="radio" name="offer" id="amount0" data-select="amount" required />
               <p class="text-deposit">deposit of <br/><span data-display="deposit-amount"></span><span data-display="deposit-currency-symbol">-</span></p>
            </div>
         </div>
      </div>
      <div class="col-4 px-0">
         <div class="card card-offer text-center">
            <div class="card-header">
               <label for="amount1"><strong><span data-display="offer-name">offer</span></strong></label>
            </div>
            <div class="card-body with-suffix">
               <p class="text-price"><span data-display="amount"></span><span data-display="currency-symbol">-</span></p>
               <input type="radio" name="offer" id="amount1" data-select="amount" />
               <p class="text-deposit">deposit of <br/><span data-display="deposit-amount"></span><span data-display="deposit-currency-symbol">-</span></p>
            </div>
         </div>
      </div>
      <div class="col-4 px-0">
         <div class="card card-offer text-center">
            <div class="card-header">
               <label for="amount2"><strong><span data-display="offer-name">offer</span></strong></label>
            </div>
            <div class="card-body with-suffix">
               <p class="text-price"><span data-display="amount"></span><span data-display="currency-symbol">-</span></p>
               <input type="radio" name="offer" id="amount2" data-select="amount" />
               <p class="text-deposit">deposit of <br/><span data-display="deposit-amount"></span><span data-display="deposit-currency-symbol">-</span></p>
            </div>
         </div>
      </div>
   </div>
   <div data-centralpay="errors" class="custom-form"></div>
   <p data-form="main-description" class="mt-3 mb-0">Card data</p>
   <div class="form-row" data-toggle="popover-example-data">
      <div class="form-group col-6">
         <div class="has-feedback input-group">
            <div class="input-group-prepend">
               <div class="input-group-text"><div class="ico ico-user"></div></div>
            </div>
            <input data-centralpay="firstName" type="text" name="order[firstName]" autocomplete="off"
                  data-form="card-user" class="form-control" placeholder="First name" required="required" />
         </div>
      </div>
      <div class="form-group col-6">
         <div class="has-feedback input-group">
            <div class="input-group-prepend">
               <div class="input-group-text"><div class="ico ico-user"></div></div>
            </div>
            <input data-centralpay="lastName" type="text" name="order[lastName]" autocomplete="off"
                  data-form="card-user" class="form-control" placeholder="Last name" required="required" />
         </div>
      </div>
   </div>
   <div data-form="card-validation">
      <div class="form-row">
         <div class="form-group col-12">
            <div class="has-feedback input-group">
               <div class="input-group-prepend">
                  <div class="input-group-text"><div class="ico ico-envelope"></div></div>
               </div>
               <input data-centralpay="card[holderEmail]" type="email" name="card[cardholderEmail]"
                     autocomplete="off" class="form-control" data-form="card-user"
                     placeholder="E-mail" required="required" />
            </div>
         </div>
      </div>
      <div class="form-row">
         <div class="col-12">
            <div data-form="remember-div" class="remember remember-option d-flex align-items-center mb-3">
               <span class="remember-checkbox form-check">
                  <input class="form-check-input" data-form="remember-select"
                        data-terms="accept-subscription-terms" id="check-terms" type="checkbox" name="store-card"/>
                  <label class="form-check-label" for="check-terms">I accept subscription
                     <a href="#">terms and conditions.</a></label>
               </span>
               <span class="card-stored">Your card is stored at <b>CentralPay</b></span>
               <a class="help-icon" data-toggle="popover-info">
                  <img src="/v2/src/img/question-mark.png" alt="">
               </a>
               <div id="popover-card-info" class="d-none">
                  <span class="npfppv">CentralPay stores your card data with total security. <a href="#">More information</a></span>
               </div>
            </div>
         </div>
      </div>
      <div class="form-row d-none">
         <div class="form-group col-12">
            <select list="userCards" data-form="card-list" type="text" name="cardId" class="form-control input-large">
               <option> -- pay with a new credit card -- </option>
            </select>
         </div>
      </div>
      <div id="card-option" class="new-card-ok">
         <div class="form-row">
            <div class="form-group col-12 new-card">
               <div class="has-feedback input-group">
                  <span class="input-group-prepend">
                     <div class="input-group-text"><div class="ico ico-cb"></div></div>
                  </span>
                  <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" />
               </div>
            </div>
         </div>
         <div class="form-row align-items-center">
            <div class="form-group col-8 new-card">
               <div class="has-feedback input-group">
                  <span class="input-group-prepend">
                     <div class="input-group-text"><div class="ico ico-calendar"></div></div>
                  </span>
                  <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" />
                  <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" />
               </div>
            </div>
            <div class="form-group col-8 stored-card use-cvv text-right">Pay using card and CVV</div>
            <div class="form-group col-4 use-cvv">
               <div class="has-feedback input-group">
                  <span class="input-group-prepend">
                     <div class="input-group-text"><div class="ico ico-lock"></div></div>
                  </span>
                  <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" />
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="text-center mt-2">
      <button class="btn btn-cpay" type="submit" value="submit" data-form="submit" data-toggle="popover"
            data-placement="bottom" data-trigger="hover">
         <div class="np-button-content">
            <span data-display="submit-value">Pay</span>
            <div class="np-loader"></div>
         </div>
      </button>
   </div>
</form>

MerchantPublicKey •

username:password •

pointOfSaleID (optional) •

Order country: