This page explains how to add MOLPay to your existing Web Components integration.
Requirements
Select the server-side flow that your integration uses:
API reference
You do not need to send additional fields for MOLPay. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:
- /sessions: This is the default with Components v5.0.0 or later.
- /payments: If you implemented an additional use case.
Component configuration
Step 1: Create a DOM element
Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:
<div id="mol_pay-container"></div>
Step 2: Create an instance of the Component
v6.0.0 or later
Create an instance of the Component, passing:
- Your instance of
AdyenCheckout
.
const molPay = new Redirect(checkout, { type: 'mol_pay' }).mount('#mol_pay-container');
v5.x.x or earlier
Use the create
method of your AdyenCheckout
instance, in this case checkout
, to create the Component:
const molPayComponent = checkout.create('mol_pay').mount('#mol_pay-container');
Optional configuration
You can add the following optional configuration:
Parameter name | Description | Default |
---|---|---|
showImage |
Set to false to remove the bank logos from the MOLPay form. | true |
issuer |
Set to a MOLPay issuer ID to preselect a specific bank. | No bank is preselected. |
highlightedIssuers |
Set to the MOLPay issuer IDs for banks you want to show on top of the dropdown menu. Added in v5.1.0 | All issuers are shown in the dropdown. |
placeholder |
The string you want to show as the dropdown menu text. Custom translation configuration overrides this value. | Select your bank |
If you want to add an optional configuration, include this in a configuration object. The following example shows how to configure the Component to remove the bank logos, and preselect a MOLPay issuer. In this example, HSBC Bank is selected:
const molPayConfiguration = {
showImage: false, // Optional. Set to **false** to remove the bank logos from the MOLPay form.
issuer: "fpx_hsbc" // Optional. Set this to an **id** of an MOLPay issuer to preselect it. It is set to HSBC Bank.
};
v6.0.0 or later
Create an instance of the Component, passing:
- Your instance of
AdyenCheckout
. - The payment method-specific configuration.
molPayConfiguration.type = 'mol_pay';
const molPay = new Redirect(checkout, molPayConfiguration).mount('#mol_pay-container');
v5.x.x or earlier
Use the create
method of your AdyenCheckout
instance, in this case checkout
, to create an instance of the Component. Add the configuration object if you created one.
const molPayComponent = checkout.create('mol_pay', molPayConfiguration).mount('#mol_pay-container');
List of issuer IDs
Test and go live
Using any issuer ID that is available for the MOLPay eBanking Component for the respective country/region, make MOLPay online banking test payments to test the different payment results.
Check the status of the MOLPay test payments in your Customer Area > Transactions > Payments.
Before you can accept live MOLPay payments, you need to submit a request for MOLPay in your live Customer Area.