--- title: "MOLPay Component" description: "Add MOLPay to an existing Components integration." url: "https://docs.adyen.com/payment-methods/molpay/web-component" source_url: "https://docs.adyen.com/payment-methods/molpay/web-component.md" canonical: "https://docs.adyen.com/payment-methods/molpay/web-component" last_modified: "2019-09-06T17:19:00+02:00" language: "en" --- # MOLPay Component Add MOLPay to an existing Components integration. This page explains how to add MOLPay to your existing Web Components integration. ## Requirements Select the [server-side flow](/online-payments/build-your-integration) that your integration uses: ### Tab: Sessions flow | Requirement | Description | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | Make sure that you have built a Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components). | | **Setup steps** | Before you begin, [add MOLPay in your Customer Area](/payment-methods/add-payment-methods). | ### Tab: Advanced flow | Requirement | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Integration type** | Make sure that you have built an Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components). | | **Setup steps** | Before you begin, [add MOLPay in your Customer Area](/payment-methods/add-payment-methods). | ## 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](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions): This is the default with [Components v5.0.0](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) or later. * [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments): If you implemented an [additional use case](/online-payments/build-your-integration). ## 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: ```html
``` ### Step 2: Create an instance of the Component #### v6.0.0 or later Create an instance of the Component, passing: * Your instance of `AdyenCheckout`. ```js 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: ```js 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](#issuer-ids) to preselect a specific bank. | No bank is preselected. | | `highlightedIssuers` | Set to the [MOLPay issuer IDs](#issuer-ids) for banks you want to show on top of the dropdown menu. Added in [v5.1.0](/online-payments/release-notes?integration_type=web\&version=5.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: ```js 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. ```js molPayConfiguration.type = 'mol_pay'; const molPayComponent = 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. ```js const molPayComponent = checkout.create('mol_pay', molPayConfiguration).mount('#mol_pay-container'); ``` ### List of issuer IDs ### Tab: Malaysia | Bank name | Issuer ID | | ----------------------- | --------------- | | Affin Bank | fpx\_abb | | Agro Bank | fpx\_agrobank | | Alliance Bank | fpx\_abmb | | Am Bank | fpx\_amb | | Bank Islam | fpx\_bimb | | Bank Muamalat | fpx\_bmmb | | Bank Rakyat | fpx\_bkrm | | Bank Simpanan Nasional | fpx\_bsn | | CIMB Bank | fpx\_cimbclicks | | Hong Leong Bank | fpx\_hlb | | HSBC Bank | fpx\_hsbc | | Kuwait Finance House | fpx\_kfh | | Maybank | fpx\_mb2u | | OCBC Bank | fpx\_ocbc | | Public Bank | fpx\_pbb | | RHB Bank | fpx\_rhb | | Standard Chartered Bank | fpx\_scb | | UOB Bank | fpx\_uob | ### Tab: Thailand | Bank name | Issuer ID | | ------------------------ | -------------------------- | | Bangkok Bank | molpay\_bangkokbank | | Krungsri Bank | molpay\_krungsribank | | Krung Thai Bank | molpay\_krungthaibank | | The Siam Commercial Bank | molpay\_siamcommercialbank | | Kasikorn Bank | molpay\_kbank | ## 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](https://ca-test.adyen.com/) > **Transactions** > **Payments**. Before you can accept live MOLPay payments, you need to [submit a request for MOLPay](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).