{"id":16353,"date":"2024-03-20T09:15:31","date_gmt":"2024-03-20T08:15:31","guid":{"rendered":"https:\/\/docs.centralpay.com\/documentation\/card-transaction\/custom-payment-form\/"},"modified":"2026-08-18T12:39:15","modified_gmt":"2026-08-18T10:39:15","slug":"custom-payment-form","status":"publish","type":"docs","link":"https:\/\/docs.centralpay.com\/en\/documentation\/card-transaction\/custom-payment-form\/","title":{"rendered":"CUSTOM payment form"},"content":{"rendered":"\n

The Transaction API service<\/a> lets you perform an authorisation<\/strong> followed by a capture of funds on your customer\u2019s bank card. All card payment methods (one-off payments, recurring payments, MoTo, etc.) are managed via this service. <\/p>\n\n

When a customer wants to make a first payment, their card data must be collected to generate a cardTokenId<\/code>, using CentralPay\u2019s tokenisation service “token.js”. This temporary token can then be used to create a Card resource, identified by a cardId<\/code>, which can be stored in a Customer object. This linking is required to enable subsequent payments without asking for the card again (1-click payments, recurring payments, etc.). <\/p>\n\n

<\/div>\n\n
\u2139\ufe0f With a custom payment form (CUSTOM FORM), integrating 3DS 2.2 authentication<\/a> is mandatory before executing a transaction.<\/pre>\n\n
<\/div>\n\n
Payment flow diagram with cardTokenId:<\/strong><\/p>\n\n
\"\"<\/figure>\n\n
<\/div>\n\n
\u2139\ufe0f If you have PCI-DSS Level 1 certification and you handle card data, you can create a \/card<\/code> object directly by sending the data (PAN, expiry date, CVC) to the API, without using token.js.<\/pre>\n\n
1. Prerequisites<\/h2>\n\n
1.1. Declare your domains<\/h3>\n\n
Before using token.js, you must declare the domains hosting your Custom forms in your Merchant Portal. Go to         \r\n            Administration <\/span> My merchant profile <\/span> Technical <\/span> Edit<\/span>        <\/span>\r\n        , then complete the Allowed Custom Forms Hosts field. <\/p>\n\n
<\/div>\n\n
Access:<\/p>\n\n
\n
Recette<\/code> Merchant Portal – Administration<\/a><\/div>\n<\/div>\n\n
<\/div>\n\n
\n
Production<\/code> Merchant Portal – Administration<\/a><\/div>\n<\/div>\n\n
1.2. Secure your form<\/h3>\n\n
Ensure that your payment pages use the HTTPS protocol with TLS 1.2 or higher.<\/p>\n\n
1.3. PCI-DSS compliance<\/h3>\n\n
Using token.js means you manage the form display and the token trigger yourself. This method requires compliance with PCI DSS SAQ A-EP requirements. <\/p>\n\n
Download the A-EP form \u279d<\/a><\/p>\n\n
2. Payment form integration<\/h2>\n\n
2.1. Create an HTML payment form<\/h3>\n\n
Unlike the Smart Form hosted by CentralPay, the Custom Form is created by you, using your own HTML code. You must implement the following fields: <\/p>\n\n