Migrate to Hosted Checkout Page
Important notice
Our legacy integration modes, payment methods and features will remain available until January 1st 2025.
Intro
The Hosted Checkout Page is the enhanced Direct version of the legacy Hosted Payment Page. A future-proof solution, it supports 40+ payment methods (and counting) and extensive customisation possibilities.
- Delegate handling sensitive data to us for PCI compliancy
- Flexible and easy visual adaptation
- Easy integration, instant payment!
Make the move
Thanks to the Direct REST API’s and our platform’s features, migrating from the legacy Hosted Payment Page to the Direct Hosted Checkout Page is easy.
Use this checklist to let us guide you through the whole migration proces:
- Get familiar with the Hosted Checkout Page
- Create a test account
- Choose the way you want to implement Direct
- Modify the target endpoint URL
- Configure your test account
- Adapt the Hosted Checkout Page
- Make sure to receive our platform’s transaction feedback
- Test your new integration
Get familiar with the Hosted Checkout Page
Get familiar with the Hosted Checkout Page, the payment flow and its Direct-specific features.
View Hosted Checkout Page
Create a test account
Choose the way you want to implement Direct
1Use our plugins
Our plugins link your existing webshop system with our platform, enabling your preferred shopping cart system to capitalise on the Direct API.
Modify the target endpoint URL
Modify the target endpoint URL and the data you need to send to our platform to get the redirection URL.
The legacy parameters translate to Direct properties in JSON format in your CreateHostedCheckout request. To help you re-create your legacy integration for the new platform, use this legacy parameter – Direct properties mapping.
Configure your test account
Direct reduces your efforts by outsourcing most of the Back Office technical settings to the CreateHostedCheckoutAPI. However, you need to makes some basic configurations in your account:
- Configure your API Key/API Secret to set up the Direct authentication mechanism. Read our dedicated guide to learn how to do this.
- Configure your Webhooks Key/Webhooks Secret to receive feedback for processed transactions. Read our dedicated guide to learn how to do this.
Check out our comprehensive guide to learn about how your existing account settings translate to the Direct API.
Adapt the Hosted Checkout Page
Adapt the Hosted Checkout Page to the look and feel of your webshop.
Direct allows you to greatly customise your customers’ payment experience by
- Adding specific properties to your CreateHostedCheckout request. Read our dedicated guide to learn what is possible and how to do this.
- Modifying the Hosted Checkout Page directly in your account or by uploading a fully customisable template to your account.
Make sure to receive our platform’s transaction feedback
Make sure your webshop infrastructure receives and processes our platform’s transaction feedback according to the payment id logic.
Direct offers Webhooks and endpoints GetHostedCheckout/GetPaymentDetails to get all information you need to follow-up on your orders.
To enhance transparency, Direct implements three properties to represent a transaction status:
- status
- statusCategory
- statusCode
For a quick manual check, look up the transactions status in the Merchant Portal. Read the dedicated chapter in our Merchant Portal guide to learn how to do this.
Check out our comprehensive Status guide for all possible return values, including a mapping of classic parameter STATUS to the aforementioned properties.
Test your new integration
Use our Test cases to trigger specific scenarios for any given payment method. Our API Explorer allows you to build and test countless scenarios with just a few clicks!
Mind that test data / settings in the Back Office (Configuration > Technical Information > Test Info) are irrelevant for Direct.
Next steps
Are you ready to go live?
Use your existing live account – no need to create a new one! But make sure to
- Modify the target endpoint URL (as explained in step 4)
- Configure your API Key/API Secret and your Webhooks Key/Webhooks Secret (as explained in step 5)
- Transfer your legacy Back Office settings to the Merchant Portal or outsource them to the Direct API