Search

Are you looking for test card numbers?

Would you like to contact support?

Payment-method icon

MB WAY Component

Add MB WAY to an existing Components integration

Our Web Component renders MB WAY in your payment form, and presents the waiting screen while the shopper completes the payment in the MB WAY app.

MB WAY is supported as a mature feature as of Component version 3.9.1. For more information, refer to Release notes.

Before you begin

This page explains how to add MB WAY to your existing Web Components integration. The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

Before starting your MB WAY integration:

  1. Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
  2. Add MB WAY in your test Customer Area.

Show MB WAY in your payment form

To present the MB WAY Component in your payment form:

  1. Make a POST /paymentMethods request from your server, specifying:

    • countryCode: PT
    • amount.currency: EUR
  2. Pass the full response from the /paymentMethods call as the paymentMethodsResponse object when creating an instance of the AdyenCheckout.
    Make sure your AdyenCheckout configuration has the onAdditionalDetails event handler, which is required for MB WAY.

  3. Add the MB WAY Component:

    a. Create a DOM element for MB WAY, placing it where you want the form to be rendered:

    <div id="mbway-container"></div>

    b. Create an instance of the MB WAY Component, and mount it:

    const mbwayComp = checkout.create('mbway').mount('#mbway-container');

Make a payment

When the shopper selects to pay, the Component calls the onChange event, which contains a state.data.

  1. If state.isValid is true, collect the state.data and pass this to your server.

  2. From your server, make a /payments request, including:

    • paymentMethod: The state.data.paymentMethod from the onChange event from your front end.
    curl https://checkout-test.adyen.com/v53/payments \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d '{
      "amount": {
        "currency": "EUR",
        "value": 1000
      },
      "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
      "paymentMethod": {
        "type": "mbway",
        "shopperEmail": "SHOPPER_EMAIL@example.com",
        "telephoneNumber": "+351213822199"
      },
      "reference": "YOUR_ORDER_NUMBER",
      "shopperStatement": "MBWay shopper statement"
    }'

    The /payments response contains:

    • resultCode: Pending, means the shopper needs to complete the payment in their MB WAY app.
    • action: use this object in the next step to display the waiting screen while the shopper completes the payment in their MB WAY app.
    /payments response
    {
    "resultCode": "Pending",
    "action": {
      "paymentData": "Ab02b4c0!BQABAgCX79JLFTqePTGTb...",
      "paymentMethodType": "mbway",
      "type": "await"
    },
    "paymentData": "Ab02b4c0!BQABAgCX79JLFTqePTGTb..."
    }

Show the waiting screen

Pass the action from your /payments response to your front end:

mbwayComp.handleAction(action)

The Component uses handleAction(action)to show the waiting screen on your frontend for 15 minutes. During this time, the shopper uses their MB WAY app to complete the payment.

In the background, the Component checks the status of the payment and calls:

  • onAdditionalDetails if the shopper successfully completes the payment.
  • onError if the payment not successful or the shopper does not complete the payment in 15 minutes.

Check the payment result

To check the payment result, use the state.data object from the corresponding event handler:

  • onAdditionalDetailsfor successful payments.
  • onError for unsuccessful or timed out payments.

From your server, make a POST /payments/details request with:

  • details: the state.data.details from the onAdditionalDetails or onError event.
  • paymentData: the state.data.paymentData from the onAdditionalDetails or onError event.
/payments/details request
{
  "{hint:state.data.details from onAdditionalDetails or onError}details{/hint}": {
    "payload": "Ab02b4c0!BQABAgDniIvNLMYAVGjHw..."
  },
  "{hint:state.data.paymentData from onAdditionalDetails or on Error}paymentData{/hint}": "Ab02b4c0!BQABAgCX79JLFTqePTGTb..."
}

You receive a response containing:

  • additionalData: Object containing the value and currency for the payment.
  • pspReference: Our unique identifier for the transaction.
  • resultCode: Authorised for successful payments or Refused for unsuccessful or timed out payments. Use this to present the payment result to your shopper.
/payments/details response
{
  "additionalData":
  {
    "authorisedAmountCurrency": "EUR",
    "authorisedAmountValue": "1000"
  },
  "pspReference": "88154795347618C",
  "resultCode": "Authorised"
}

Present the payment result

Use the resultCode from the /payments/details response to show the payment outcome on your frontend.
You will also receive the outcome of the payment asynchronously in a notification webhook.
The resultCode values you can receive for MB WAY are:

resultCode Description Action to take
Authorised The payment was successful. Inform the shopper that the payment has been successful.
You will receive the funds in 2-3 days.
Error There was an error when the payment was being processed. Inform the shopper that there was an error processing their payment. The response contains a refusalReason, indicating the cause of the error.
Pending or
Received
The shopper has completed the payment but the final result is not yet known. It may take minutes or hours for the payments network to confirm this. Inform the shopper that you've received their order, and are waiting for the payment to be completed.
You will receive the final result of the payment in an AUTHORISATION notification.
Refused The payment was refused by the shopper's bank. Ask the shopper to try the payment again using a different payment method.

Test and go live

Use the following MB WAY account details to test your integration:

Shopper e-mail Shopper phone number
Any correctly formatted e-mail Any Portuguese telephone number, for example +351234567890

You can test each payment result scenario by appending a code to the shopperStatement value in your /payments request:

resultCode Code to append
AUTHORISED
default test response
-c1
PENDING -c3 and wait 15 minutes
after making the /payments request
REFUSED -c5

For example, to produce a REFUSED payment result, include the following in your /payments request:

{
  // ...
  "shopperStatement": "MBWay shopper statement-c5"
}

You can check the status of MB WAY test payments in your Customer Area > Transactions > Payments.

Before you can accept live MB WAY payments, you need to add MB WAY in your live Customer Area.

See also