Direct Support Site

Results for

icon-search-large No search results yet
Enter your search query above

1. Introduction

Our Magento PWA plug-in comes with regular updates and full integration support, guaranteeing a versatile out-of-the-box solution to accept online payments easily:

  • Offers the following payment methods on our platform:
    Alipay
    American Express
    Apple Pay
    Bancontact
    Bizum
    Carte Bancaire
    Cpay
    Diners Club
    Google Pay
    iDEAL
    Illicado
    Intersolve
    JCB
    Klarna
    Maestro
    MasterCard
    Multibanco
    Oney 3x-4x
    Oney Financement Long
    OneyBrandedGiftCard
    PayPal
    Visa
    WeChatPay

Progressive Web Applications (PWA) and globally headless storefronts are the future of eCommerce. Decoupling your front end and back end offers you these features:

  • Dynamic input linking: Our API links with your back end dynamically depending on your customers’ front end input. This will ease increasing your leads and converting prospects into sales
  • Efficient store management: Make independent changes in your front/back end without interfering with your everyday business operations
  • Manage external services: Use dedicated tools for SEO, CIAM, CMS or any background service to optimise your business
  • Fasten process: PWA processes all services simultaneously and independently, allowing your system to use them with optimal resource allocation. PWA hence supports endless horizontal scaling
  • Stick to familiar technology: PWA utilises the same API as Adobe Commerce for the back end
  • Front end customisation: Design your front end appearance independently from the set up of the back end

On top of that, the PWA plugin offers you more advantages:

  • Mobile first experience: Focus mainly (but not only!) on mobile experience
  • Reconcile storefront/services: Easily integrate an independent storefront connected to all the services you need
A headless storefront distinguishes a website front end from its back end
  • Front end: The interface for your customers for browsing through your catalogue, add items to their basket or perform any actions your shop allows
  • Back end: All the systems, processes and tools to manage your customers’ requests and to make your business runs smoothly. Concealed for your customers, you use it to manage your catalogue, initiate marketing campaigns, orders, store data etc.

Keep an eye on our Release Notes to stay informed about updates and new features (i.e. payment methods, services, integration modes) we have added to this plugin!

Check out our documentation to learn how to link your store with our platform to profit from all these features!

Download pluginGitHub repository

2. Create account

To process transactions with this plugin, you need an account on our platform.

This plugin works with both our test and live environment. A test account is a great way to get familiar with both the plugin and our platform. Once you want to go live, create a production account or contact us!

3. Install plugin

The first step to use the plugin is the installation process. Before you proceed, make sure your infrastructure meets these system requirements:

Item Description
Plugin package 

Download the plugin

Direct credentials
Magento

Compatible with Magento 2.4.5

Find an extensive overview about the compatibilities on the Magento support site

PHP

PHP version 8.1

PCI compliancy

SAQ A (14) 

The plugin’s in-built features ensure this security level, but you still need to get the certificate from your acquirer

Once done, choose one of these installation modes and follow the respective steps:

Before you start the actual installation, make sure to install Magento PWA Studio in your environment. For detailed information, read the dedicated developer guide

Installation from Archive

  1. Go to your project source directory
    $ cd your_project/src
  2. Create new namespace folder for the module:
    $ mkdir @worldline
  3. Copy module folder into the new namespace folder ("@worldline")

  4. Run following commands to register the module (development environment):
    $ yarn add link:src/@worldline/worldline-payment

    Or following command for production environment:
    $ yarn add file:src/@worldline/worldline-payment
  5. Register the extension as a trusted vendor in your project configuration by adding following code into "your_project/package.json" file:
    {
    	"pwa-studio": {
    		"targets": {
    			"intercept": "./local-intercept.js"
    		},
    		"trusted-vendors": [
    			"@worldline"
    		]
    	}
    }
    
    Extension uses some project-level API which require specific access on the code level, so it is
    mandatory to add extension as a trusted vendor. Some functionality may be broken without adding trusted vendor record
  6. Run the Watch command:
    $ yarn watch

Install from GitHub

Installation from GitHub is almost the same as from the archive, but skips a few steps:

  1. Go to your project source directory
    $ cd your_project/src
  2. Execute the following command:
    $ yarn add
    git+https://USERNAME:TOKEN@github.com/Ingenico/direct-magento-pwa.git#master
    

    Replace USERNAME with your GitHub username and token with your GitHub personal access token. For information about creating your GitHub access token, read the dedicated Github guide

  3. Register the extension as a trusted vendor in your project configuration by adding following code into "your_project/package.json" file:
    {
    	"pwa-studio": {
    		"targets": {
    			"intercept": "./local-intercept.js"
    		},
    		"trusted-vendors": [
    			"@worldline"
    		]
    	}
    }
    

    Extension uses some project-level API which require specific access on the code level, so it is
    mandatory to add extension as a trusted vendor. Some functionality may be broken without adding trusted vendor record
  4. Run the Watch command:
    $ yarn watch


4. Configure Plugin

After the installation, you need to configure the plugin to link your store to our platform.

Configure connection

  1. Login to the Adobe commerce/Magento Back Office. Go to Stores > WORLDLINE ONLINE PAYMENTS > Connection
  2. In Connection, configure the following settings:
    Property Description/Actions
    Environment mode

    Select between "Test" or "Production" to link your shop to the respective environment. Depending on your selection, the shop module will send the transaction requests to the test or production environment

    Make sure to
    • Not to mix up credential from "Test" with Production" and vice versa when configuring fields Merchant ID (PSPID)/API Key/API Secret and webhooks credentials
    • To switch to "Production" as soon as you have finalised your tests
    API Key

    Enter the API Key of your test or live PSPID. Read our dedicated guide to learn how to generate one

    API Secret

    Enter the API Secret of your test or live PSPID. Read our dedicated guide to learn how to generate one

    Merchant ID (PSPID)

    Enter your PSPID from our platform that you want to use for transaction processing

    For some properties, Magento allows you to use the default value defined on the system level. If you want to do this, flag “Use system value” accordingly
  3. Click on "Save Config" to confirm your configuration

MagentoAdobeV1.png
The image shows where to find the "Connection" module in the Magento Back Office

Once you have filled in the table, verify the configuration by establishing a test connection between the plugin and our platform. Click on the "Test Connection" button. Check that the button text changes to "Successful! Test again". If the button text changes to "Connection failed! Test again?", contact your system administrator for troubleshooting to check

  • You are using the correct credentials
  • Whether your PSPID is active
  • You send the request to the correct PSPID/environment (Test vs Production)

Configure webhooks

  1. Login to the Adobe commerce/Magento Back Office. Go to Stores > WORLDLINE ONLINE PAYMENTS > Connection
  2. In Webhooks, configure the following settings:

    Property Description/Actions
    Allow Receiving Webhooks Select "Yes" to receive webhooks in the Magento server
    Webhook URL Copy this URL into the Endpoint URLs fields in the Direct Merchant Portal as described in our dedicated guide
    Key Enter the API key of your test or live PSPID. Read our dedicated guide to learn how to generate one
    Secret Key Enter the API secret of your test or live PSPID. Read our dedicated guide to learn how to generate one
    For some properties, Magento allows you to use the default value defined on the system level. If you want to do this, flag "Use system value" accordingly
  3. Click on "Save Config" to confirm and clean your cache

MagentoAdobeV2.png
The image shows where to find the “Webhooks” module in the Magento Back Office

Configure payment methods

  1. Login to the Adobe commerce/Magento Back Office. Go to Stores > WORLDLINE ONLINE PAYMENTS > Payment methods

    • As the plugin supports Hosted Checkout Page (Hosted Checkout), Hosted Tokenization Page (Credit Card) and Single payment buttons (Redirect Payments), you can customise your customers’ payment experience by selecting payment methods for either mode and even use both flows together
    • Mind that card payments are available for both modes, whereas alternative payment methods are available only for Hosted Checkout Page and Single payment buttons


    MagentoAdobeV3.png
    The image shows where to find the “Payment methods” module in the Magento Back Office

  2. In "Credit Card", configure the following settings for transactions processed via our Hosted Tokenization Page
    Property Description/Actions
    Enable Module

    Select one of the options to for processing credit card payments

    • "Yes": The module processes card payments via Hosted Tokenization Page integration mode. Any non-card payments go via Hosted Checkout Page as configured in "Hosted Checkout"

    • "No": Instead of using Hosted Tokenization Page for card payments, all payment methods are offered via Hosted Checkout Page as configured in "Hosted Checkout"
    Title Customise the payment button text in the iframe on the Magento checkout page
    HTML Template ID Enter the file name of your template to adapt our payment page to the look and feel of your shop. Learn here how to create templates
    You can use this sample as your default template
    Payment Action

    Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options:

    If transaction type is set to "Authorized (Authorization Only)", beware of the following:
    Skip 3DSecure Authentication

    Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments

    We strongly recommend selecting "Yes" if your customers are based in Europe, as 3-D Secure is mandatory in this market. Deactivate this option only if your customers are located elsewhere
    Trigger an authentication for every payment

    Select "Yes" if you want the issuer to request a SCA (strong customer authentication) for payments

    Request 3DS exemption

    Select "Yes" if you would like your customers to be potentially exempted from a 3-D Secure check. This applies only to transactions with a basket less than 30 EUR

    Sort

    Define the sort order of the iFrame. This allows you to decide in which order the different payment means are displayed on your checkout page

    Filtering

    You can also implement various filters to define when to propose this way of processing payments to your customers: countries, currencies, amounts

  3. In "Hosted Checkout", configure the following settings for transactions processed via our Hosted Checkout Page

    Property Description/Actions
    Enable Module

    Select one of the options to for processing all payments

    If you select "No", make sure "Enable Module" in the "Credit Card" module is set to "Yes" to ensure at least card payment methods are possible
    Title Customise the heading on the Hosted Checkout Page
    HTML Template ID Enter the file name of your template to adapt our payment page to the look and feel of your shop. Learn here how to create templates
    Payment Action

    Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options:

    If transaction type is set to "Authorized (Authorization Only)", beware of the following:
    Skip 3DSecure Authentication

    Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments

    We strongly recommend selecting "Yes" if your customers are based in Europe, as 3-D Secure is mandatory in this market. Deactivate this option only if your customers are located elsewhere

    Trigger an authentication for every payment

    Select "Yes" if you want the issuer to request a SCA (strong customer authentication) for payments

    Request 3DS exemption

    Select "Yes" if you would like your customers to be potentially exempted from a 3-D Secure check. This applies only to transactions with a basket less than 30 EUR

    Sort

    Define the sort order of the iFrame. This allows you to decide in which order the different payment means are displayed on your checkout page

    Group Cards

    Group all cards payment methods under one single button on the Hosted Checkout Page

    Submit Customer Cart Items Data to Worldline

    Defines whether you wish to submit your customer cart details to Direct. Doing so will improve customer experience, but might generate errors in case you use custom tax rules

    Filtering

    You can also implement various filters to define when to propose this way of processing payments to your customers: countries, currencies, amounts

    Process Mealvouchers

    Select "Yes" to be able to process Mealvouchers payment method and configure the different product types you need:

    • Food and Drink
    • Gift and Flowers
    • Home and Garden

    For some properties, Magento allows you to use the default value defined on the system level. If you want to do this, flag “Use system value” accordingly
  4. In "Redirect Payment", configure the following settings for transactions for which your customers preselect their preferred payment method before the redirection to our Hosted Checkout Page

    Property Description/Actions
    Enable Module

    Select one of the options to for processing all payments

    • "Yes": The module processes both card and non-card payment methods via Hosted Checkout Page mode

    • "No": The module processes only card payments via Hosted Tokenization Page integration mode

    If you select "No", make sure "Enable Module" in the "Credit Card" module is set to "Yes" to ensure at least card payment methods are possible

    Title

    Customise the heading on the Hosted Checkout Page

    HTML Template ID

    Enter the file name of your template to adapt our payment page to the look and feel of your shop. Learn here how to create templates

    Payment Action

    Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options:

    If transaction type is set to "Authorized (Authorization Only)", beware of the following:
    Skip 3DSecure Authentication

    Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments

    We strongly recommend selecting "Yes" if your customers are based in Europe, as 3-D Secure is mandatory in this market. Deactivate this option only if your customers are located elsewhere

    Trigger an authentication for every payment

    Select "Yes" if you want the issuer to request a SCA (strong customer authentication) for payments

    Request 3DS exemption

    Select "Yes" if you would like your customers to be potentially exempted from a 3-D Secure check. This applies only to transactions with a basket less than 30 EUR

    Submit Customer Cart Items Data to Worldline

    Defines whether you wish to submit your customer cart details to Direct. Doing so will improve customer experience, but might generate errors in case you use custom tax rules

    Sort

    Define the sort order of the iFrame. This allows you to decide in which order the different payment means are displayed on your checkout page

    You can enable each payment method separately by configuring for each of them the following:
    Property Description/Actions
    Enable Module

    Select one of the options to for processing all payments

    • "Yes": The module processes both card and non-card payment methods via Hosted Tokenization Page mode

    • "No": The module processes only card payments via Hosted Checkout Page integration mode

    If you select "No", make sure "Enable Module" in the "Credit Card" module is set to "Yes" to ensure at least card payment methods are possible

    Sort

    Define the sort order of the iFrame. This allows you to decide in which order the different payment means are displayed on your checkout page

    Title

    Customise the heading on the Hosted Checkout Page

  5. Click on "Save Config" to confirm