--- title: "MB Way Web Component" description: "Add MB Way to your Components integration." url: "https://docs.adyen.com/payment-methods/mb-way/web-component" source_url: "https://docs.adyen.com/payment-methods/mb-way/web-component.md" canonical: "https://docs.adyen.com/payment-methods/mb-way/web-component" last_modified: "2026-05-24T12:54:31+02:00" language: "en" --- # MB Way Web Component Add MB Way to your Components integration. [View source](/payment-methods/mb-way/web-component.md) You can add MB Way to your existing integration. The following instructions show only what you must add to your integration specifically for MB Way. If an instruction on this page corresponds with a step in the main integration guide, it includes a link to corresponding step of the main integration guide. The additions you must make depends on the [server-side flow](/online-payments/build-your-integration) that your integration uses: ## Sessions flow Component ### Before-You-Begin ## Requirements | Requirement | Description | | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Make sure that you have an existing Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components). | | | **Checkout API** | Make sure that you use Checkout API v68 or later. | | | **Setup steps** | Before you begin, [add MB Way in your Customer Area](/payment-methods/add-payment-methods). | | ### Add-Parameters-Sessions-Request ## Add additional parameters to your /sessions request When you [create a payment session](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#create-a-payment-session), add the following parameters: | Parameter | Required | Description | | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------- | | [shopperStatement](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-shopperStatement) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The text to be shown on the shopper's bank statement. | **Example /sessions request** ```bash curl https://checkout-test.adyen.com/v71/sessions \ -H 'x-API-key: ADYEN_API_KEY' \ -H 'Idempotency-Key: YOUR_IDEMPOTENCY_KEY' \ -H 'content-type: application/json' \ -X POST -d '{ "merchantAccount": "ADYEN_MERCHANT_ACCOUNT", "amount": { "value": 1000, "currency": "EUR" }, "returnUrl": "adyencheckout://your.package.name", "reference": "YOUR_PAYMENT_REFERENCE", "countryCode": "PT", "shopperStatement": "MB WAY shopper statement" }' ``` ### Import ## Import MB Way When you [import Adyen Web](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#get-adyen-web), include `MBWay`. **Import** ```javascript import { AdyenCheckout, MBWay } from '@adyen/adyen-web'; ``` ### Add-Configuration ## Add additional configuration for MB Way You do not need to add any configuration parameters for MB Way. ### Initialize ## Initialize the Component for MB Way To [initialize](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#initialize-the-payment-session) MB Way, use the `MBWay` class. **Initialize the Component** ```javascript const mBWayComponent = new MBWay(checkout, { // The configuration object for MB Way that you created. // Mount the Component to a container. }).mount('#mBWay-container') ``` ## Test and go live To test your MB Way integration, you can use any telephone number; for example **+351234567890**. You can check the status of MB Way test payments in your **Customer Area** > **Transactions** > **Payments**. Before you can accept live MB Way payments, [add MB Way](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/). ### Trigger a `resultCode` To trigger a specific `resultCode` value, append a code to the `shopperStatement` value in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: | `resultCode` | Code to append to `shopperStatement` | | -------------------------------------- | ------------------------------------ | | **Authorised** (default test response) | `-c1` | | **Pending** | `-c3` | | **Refused** | `-c5` | For example, to receive `resultCode`: **Refused**, include the following in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:\ `"shopperStatement": "MBWay shopper statement-c5"` ## Advanced flow Component ## Requirements | Requirement | Description | | | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Make sure that you have an existing Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components). | | | **Action handling** | Make sure that your existing integration is set up to [handle the additional action](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#handle-the-redirect). `action.type`: **await**. | | | **Setup steps** | Before you begin, [add MB Way in your Customer Area](/payment-methods/add-payment-methods). | | ### Import ## Import MB Way When you [import Adyen Web](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#get-adyen-web), include `MBWay`. **Import** ```javascript import { AdyenCheckout, MBWay } from '@adyen/adyen-web'; ``` ### Initialize ## Initialize the Component for MB Way To [initialize](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#initialize-the-payment-session) MB Way, use the `MBWay` class. **Initialize the Component** ```javascript const mBWayComponent = new MBWay(checkout, { // The configuration object for MB Way that you created. // Mount the Component to a container. }).mount('#mBWay-container') ``` ### Add-Parameters-Payments-Request ## Add additional parameters to your /payments request When you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#make-a-payment), add the following parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: | Parameter | Required | Description | | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------- | | [paymentMethod.type](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-paymentMethod-MbwayDetails-type) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Set this value to **mbway**. | | [paymentMethod.telephoneNumber](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-paymentMethod-MbwayDetails-telephoneNumber) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's mobile phone number. | | [shopperStatement](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperStatement) | | The text to be shown on the shopper's bank statement. | **Example payment request for MB Way** ```bash curl https://checkout-test.adyen.com/v72/payments \ -H 'x-API-key: ADYEN_API_KEY' \ -H 'idempotency-key: YOUR_IDEMPOTENCY_KEY' \ -H 'content-type: application/json' \ -X POST -d '{ "amount":{ "currency":"EUR", "value":1000 }, "reference":"YOUR_ORDER_NUMBER", "returnUrl":"https://your-company.com/checkout?shopperOrder=12xy..", "merchantAccount":"ADYEN_MERCHANT_ACCOUNT", "paymentMethod": { "type": "mbway", "telephoneNumber": "PHONE_NUMBER" }, "shopperStatement": "MB WAY shopper statement" }' ``` The [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) response contains: * `resultCode`: **Pending** (The shopper must complete the payment in their MB Way app.) * `action`: Use this object to display the waiting screen while the shopper completes the payment in their MB Way app. **Example payment response for MB Way** ```json { "resultCode": "Pending", "action": { "paymentData": "Ab02b4c0!BQABAgCX79JLFTqePTGTb...", "paymentMethodType": "mbway", "type": "await" }, "paymentData": "Ab02b4c0!BQABAgCX79JLFTqePTGTb..." } ``` ### App2app ## Enable App2App switch To provide shoppers with a seamless experience on mobile devices, you can implement the App2App flow. This removes the need for the shopper to manually enter their phone number and links them directly to the MB WAY app. ### Step 1: Send a payment request When making a [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request, include: * `channel` - the shopper's platform, either **iOS** or **Android**. If the `channel` parameter is missing or set to **Web**, the standard flow (requiring a phone number) will apply. * `returnUrl` - the URL to where the shopper will be redirected after authorizing the payment in the MB WAY app. **/payments request** ```json { "amount": { "currency": "EUR", "value": 1000 }, "reference": "YOUR_ORDER_REFERENCE", "paymentMethod": { "type": "mbway" }, "channel": "iOS", // or "Android" "returnUrl": "your-app-scheme://payment-return", "merchantAccount": "ADYEN_MERCHANT_ACCOUNT" } ``` ### Step 2: Handle the response If the request is successful, you will receive an action object in the response. * The `action.url` will contain the MB WAY deep link (mbway://...). * The `returnUrl` you provided in the request is automatically appended to this deep link. **/payments response** ```json { "resultCode": "Pending", "action": { "type": "await", // or the specific type returned by the API "paymentMethodType": "mbway", "url": "mbway://ACTDT?c=00100000002082446812&u=your-app-scheme://payment-return" } } ``` ### Step 3: Redirect the shopper Use the URL provided in the `action` object to redirect the shopper. * When the user authorizes the transaction in the MB WAY app, they are automatically redirected back to your application via the `returnUrl`. ## Test and go live To test your MB Way integration, you can use any telephone number; for example **+351234567890**. You can check the status of MB Way test payments in your **Customer Area** > **Transactions** > **Payments**. Before you can accept live MB Way payments, [add MB Way](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/). ### Trigger a `resultCode` To trigger a specific `resultCode` value, append a code to the `shopperStatement` value in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: | `resultCode` | Code to append to `shopperStatement` | | -------------------------------------- | ------------------------------------ | | **Authorised** (default test response) | `-c1` | | **Pending** | `-c3` | | **Refused** | `-c5` | For example, to receive `resultCode`: **Refused**, include the following in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:\ `"shopperStatement": "MBWay shopper statement-c5"`