worldline Direct
Sign up
Worldline Direct Hosted Tokenization Page screen

Intro

The Hosted Tokenization Page is the enhanced Direct version of the legacy FlexCheckout. It provides you the highest level of customisation possible and is compliant with the choice of brand in co-badging .

  • Delegate handling sensitive data to us for PCI compliancy
  • Flexible and easy visual adaptation & customization
  • Ease future purchases and recurring payments

Make the move

Thanks to the Direct REST API's and our platform's features, migrating from the legacy Flexcheckout to the Direct Hosted Tokenization Page is easy.

Use this checklist to let us guide you through the whole migration proces:

  1. Get familiar with the Hosted Tokenization Page
  2. Understand similarities and differences Hosted Tokenization Page - FlexCheckout
  3. Create a test account
  4. Choose the way you want to implement Direct
  5. Modify the target endpoint URL and your checkout page
  6. Configure your test account
  7. Adapt the Hosted Tokenization Page
  8. Make sure to receive our platform’s transaction feedback
  9. Test your new integration

Get familiar with the Hosted Tokenization Page

Get familiar with the Hosted Tokenization Page, the payment flow and its Direct-specific features.

View Hosted Tokenization Page


Understand similarities and differences Hosted Tokenization Page - FlexCheckout

The Hosted Tokenization Page implements the same features like FlexCheckout:

  • Your customers stay on your checkout page to enter PCI-relevant card details.
  • They enter the card data in an <iframe>-embedded form hosted by our server.
  • Our platform tokenises the card data. We return a (temporary) token you can use for initialising the actual payment.
  • Using this token, you request the actual payment via a second dedicated integration method. Server-to-server replaces DirectLink for this step.

However, there are some differences to consider when migrating:

Item Hosted Tokenization Page FlexCheckout

<iframe>
initialisation

Invoking the initialize() function from this Javascript code adds the <iframe> to your checkout page.

You add the <iframe> to your checkout page using your own code.

<iframe>
target URL for tokenising card data

Invoking the initialize() function from this Javascript code opens the target URL automatically when adding the <iframe>.

You open the target URL when adding the <iframe> on your checkout page.

Card data submission button

Located on your checkout page.

Part of the <iframe> itself.

Getting the token

When invoking the submitForm() function from this Javascript code, we return the token as a return value.

Via a GET parameter to a URL you have defined when initialising the <iframe>.

Getting the transaction result

Via a GetPaymentDetails request or webhooks. Learn more in the dedicated chapter.

Via DirectQuery request or Hosted Payment Page feedback channels.


Create a test account


Choose the way you want to implement Direct

1Use our plugins

The ideal short cut: Install one of our plugins you can use in parallel with your existing version. Jump right to the respective guide to get it up and running!

Prestashop WooCommerce SAP Magento Shopify Salesforce Shopware Chargebee BigCommerce Aero Commerce OpenCart Proximis

2Use our SDKs

You want to build an application from scratch? Our Server/Client SDKs wrap the Direct API in a highly efficient and accessible way, allowing you to create your own webshop/mobile application.

Swift JavaScript Android iOS Flutter
Ruby PHP Python 2 Node.js Java Python 3 .NET


Modify the target endpoint URL and your checkout page

Modify the target endpoint URL and the data you need to send to our platform to get the tokenization URL. Make also sure to add this HTML elements/Javascript code to your checkout page.

The legacy parameters translate to Direct properties in JSON format in your CreateHostedTokenization/CreatePayment 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 CreatePaymentAPI. However, you need to make 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 Tokenization Page

Adapt the Hosted Tokenization Page to the look and feel of your webshop and smooth out the payment flow even further by


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 endpoint 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

You're all set, now what? Start enjoying all the advantages of Direct!

Was this page helpful?

Do you have any comments?

Thank you for your response.