Menu

Custom Form

Custom Form allows you to create your own payment forms and consume API objects in a unitary way in order to create a unique payment experience fully integrated into your services.

Therefore, a Custom Form is created and hosted by you while allowing you to strongly reduce the security risks when handling banking data. By integrating the payment process on your side, you keep control of the payment page and user experience.

Custom Form allows consumption of certain services not supported by Smart Form like subscription payments (subscription) or one-click upsell payment.

Example of Custom Form

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 SMART 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 above, you will have to use the one that has been sent 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 sensitive credit card data.

4Submitting the form from your server

Now that you have a cardTokenID you can use it 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 will allow you to charge the customer at any time in the future.