Example description: Subscription Signup

In this example, a Custom Form is used to manage a Subscription Signup based on a previously configured SubscriptionModel. This demo was designed on the basis of 3 used cases:

Basic: 1€ is charged every day during 3 days.
Standard: 1€ is charged at the order and the subscription starts a day +1 with 3€ per day for 3 days.
Premium: 5€ is charged per day with no ending date.

In the first example (basic), a first invoice of the subscription is charged when the Subscription Object is created (as no starting date is set). The following days (it could be also one or more weeks or months) new invoices of the same subscription is charged until the Subscription end date (configured in the SubscriptionModel, it can be an integer or unlimited invoices). After confirmation, to access the customer portal, you can click on "manage my subscription" to cancel it or use another card.

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 subscription Show JSON response from CentralPay API

cardTokenId:
customerId:
cardId:
subscription:

Offer 1

1.00€

Offer 2

3.00€

Offer 3

5.00€

I accept subscription

Select card and enter CVV

Secure payment by

Basic: 1€ per day during 3 days.
Standard: 1€ for 24 hours and then 3€ per day for 3 days.
Premium: 5€ per day indefinitely.

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

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 subscription and returns subscriptionId 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 text-center">
        <div class="col-4 px-0">
            <div class="card card-offer">
                <div class="card-header">
                    <label for="amount0"><span data-display="offer-name">offer</span></label>
                </div>
                <div class="card-body">
                    <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 />
                </div>
            </div>
        </div>
        <div class="col-4 px-0">
            <div class="card card-offer">
                <div class="card-header">
                    <label for="amount1"><span data-display="offer-name">offer</span></label>
                </div>
                <div class="card-body">
                    <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" />
                </div>
            </div>
        </div>
        <div class="col-4 px-0">
            <div class="card card-offer">
                <div class="card-header">
                    <label for="amount2"><span data-display="offer-name">offer</span></label>
                </div>
                <div class="card-body">
                    <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" />
                </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>
    <input type="hidden" name="merchantTransactionId" value="TR.629e08659f2e21.45521843" />
    <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: