Menu

The custom form

The main advantage of using a custom form relies in highly reducing risks related to card data security matters. By integrating the payment process, you keep a full control of the payment page and the checkout process.

You can also process multi-device payments and optimise your customer experience.
By embedding our payment page into your website, you offer a better experience to your customers and increase your conversion ratio.

Custom Form tutorial

This tutorial explains how to create transaction from your own payment form by using HTML and JavaScript languages (token.js) with a cardTokenID.

Token.js is the dedicated JavaScript that allows you to get the first required component called cardTokenID.

Once you get a cardTokenID, you are now able to create a transaction in order to debit your customer card.

Required steps:

1Creating an HTML payment form

Contrary to the POPIN form which is generated by the platform, the CUSTOM form is to be created.

So you need to generate the HTML code at your convenience.

2Sending the debit/ credit card information with the Token.js

At this stage, you have now to send the card data from the client browser to the PCI platform. The platform will send you back a cardTokenId. To get it done you need to add the following script tag in the <body> part at the end of your code.

<script src="https://test-js.centralpay.net/js/token.js"></script>

Then your merchantPublicKey in a separe tag.

<script type="text/javascript">
  window.Centralpay ? Centralpay.card.setMerchantPublicKey('8ce4b92abd7c3110e2033ffbfa7cca0f097a66f1f1d267ff6c94429884ed82ac') : alert('Error loading html form');
</script>

The merchantPublicKey identifies your requests to the platform. In the example below, you will have to use the one that has been send to you.

3Getting back the cardTokenID in your system

This step consists in getting back the cardTokenID contained in the JavaScript in order to submit your request to the platform.

All card data are now stored in the cardTokenId for a duration of 5 minutes. This value is sent to the API instead of the sensible credit card data.

4Submitting the form from your server

Now that you have a cardTokenID you enable to trigger a transaction.

Unlike the previous steps that take place from the browser, this operation is executed from your servers. For example:

curl -v https://test-api.centralpay.net/v2/rest/transaction \
-u 'DEMOPSC:eUZG&DVD6cCD' \
-d amount= 100
-d currency= EUR
-d cardTokenId=d5bc9bec-aec2-4b92-b45c-23d53719a058 \
-d endUserIp=92.154.127.221 \

5Saving the card information in a customer object in order to use it afterwards (1 click, subscription…)

CentralPay's cardTokenId can only be used once, but if you plan to use it afterwards, you need to create a customer object in which you can store all cards details.

Instead of charging the card immediately, you have to create a customer object. CentralPay then stores a cardtoken within this customer object during the process. This precise action allows you to charge the customer at any time in the future.