Magento PWA

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

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

• Installation from Archive
• Installation from GitHub

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. Extract and copy archive contents into the new namespace folder ("@worldline")
   
   
4. Run following command 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"
   		]
   	}
   }
   

1. 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"
   		]
   	}
   }
   

1. Run the Watch command:
   

   $ yarn watch

   
   
   

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.

1. Click on "Save Config" to confirm your configuration.

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 PAYONE E-Payment 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.

1. Click on "Save Config" to confirm and clean your cache.

Configure payment methods

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

1. 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 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. To learn how to create templates, see our dedicated chapters in the Hosted Tokenization Page guide
   Payment Action	Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options: "Authorize & Capture": The amount has been ordered to be paid out in one go. Use this mode to receive the money before shipping the order There are no further actions required to capture the transaction. Successful transactions will have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9 "Authorized (Authorization Only)": The amount is only blocked on your customer's card. Successful transactions will have status="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" / statusOutput.statusCode=5 (Use this mode when you wish to capture a transaction only after shipping the order) If "Payment Action" is set to "Authorized (Authorization Only)", beware of the following: Make sure that you capture authorised transaction later. Only then will the transaction have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9, for which you receive the actual payment for the transaction Capture transaction in the Magento Back Office via the "Order" module
   Skip 3DSecure Authentication	Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments We strongly recommend selecting "No" as 3-D Secure is mandatory in some markets. This will also ensure liability shift for transactions with successful 3-D Secure authentication. If you select "Yes" and choose to process non 3-D Secure transactions you may not benefit from liability shift and may be held liable.
   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	Some markets allow you to potentially exempt your customers from a 3-D Secure check. Select "Yes" if you would like your customers to be potentially exempted. 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

2. 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 "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 payments 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. To learn how to create templates, see our dedicated chapters in the Hosted Checkout Page guide
   Payment Action	Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options: "Authorize & Capture": The amount has been ordered to be paid out in one go. Use this mode to receive the money before shipping the order There are no further actions required to capture the transaction. Successful transactions will have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9 "Authorized (Authorization Only)": The amount is only blocked on your customer's card. Successful transactions will have status="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" / statusOutput.statusCode=5 (Use this mode when you wish to capture a transaction only after shipping the order) If "Payment Action" is set to "Authorized (Authorization Only)", beware of the following Make sure that you capture authorised transaction later. Only then will the transaction have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9, for which you receive the actual payment for the transaction Capture transaction in the Magento Back Office via the "Order" module
   Skip 3DSecure Authentication	Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments We strongly recommend selecting "No" as 3-D Secure is mandatory in some markets. This will also ensure liability shift for transactions with successful 3-D Secure authentication. If you select "Yes" and choose to process non 3-D Secure transactions you may not benefit from liability shift and may be held liable.
   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	Some markets allow you to potentially exempt your customers from a 3-D Secure check. Select "Yes" if you would like your customers to be potentially exempted. 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 PAYONE E-Payment. 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

1. 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 method. 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. To learn how to create templates, see our dedicated chapters in the Hosted Checkout Page guide.
   Payment Action	Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options: "Authorize & Capture": The amount has been ordered to be paid out in one go. Use this mode to receive the money before shipping the order There are no further actions required to capture the transaction. Successful transactions will have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" /statusOutput.statusCode=9 "Authorized (Authorization Only)": The amount is only blocked on your customer's card. Successful transactions will have status="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" /statusOutput.statusCode=5 (Use this mode when you wish to capture a transaction only after shipping the order). If "Payment Action" is set to "Authorized (Authorization Only)", beware of the following: Make sure that you capture authorised transaction later. Only then will the transaction have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" /statusOutput.statusCode=9, for which you receive the actual payment for the transaction. Capture transaction in the Magento Back Office via the "Order" module.
   Skip 3DSecure Authentication	Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments. We strongly recommend selecting "No" as 3-D Secure is mandatory in some markets. This will also ensure liability shift for transactions with successful 3-D Secure authentication. If you select "Yes" and choose to process non 3-D Secure transactions you may not benefit from liability shift and may be held liable.
   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	Some markets allow you to potentially exempt your customers from a 3-D Secure check. Select "Yes" if you would like your customers to be potentially exempted. 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 PAYONE E-Payment. 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 method. 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.

2. Click on "Save Config" to confirm.