MB WAY Component

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.

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 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
   • amount.value: The amount of the transaction, in minor units.
     The maximum transaction amount for MB WAY is 750 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 Ruby Java PHP Python C# NodeJS Go

   curl Ruby Java PHP Python C# NodeJS Go

   curl https://checkout-test.adyen.com/v69/payments \
   -H "x-API-key: YOUR_API_KEY" \
   -H "content-type: application/json" \
   -d '{
     "amount":{
       "currency":"EUR",
       "value":1000
     },
     "reference":"YOUR_ORDER_NUMBER",
     "paymentMethod":{hint:paymentMethod field of an object passed from the front end or client app}STATE_DATA{/hint},
     "returnUrl":"https://your-company.com/checkout?shopperOrder=12xy..",
     "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
   }'

   require 'adyen-ruby-api-library'
   
   # Set your X-API-KEY with the API key from the Customer Area.
   adyen = Adyen::Client.new
   adyen.env = :test
   adyen.api_key = "YOUR_X-API-KEY"
   
   # STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
   paymentMethod = STATE_DATA
   
   response = adyen.checkout.payments({ 
       :paymentMethod => paymentMethod,
       :amount => {
           :currency => 'EUR',
           :value => 1000
       },
       :reference => 'YOUR_ORDER_NUMBER',
       :returnUrl => 'https://your-company.com/checkout?shopperOrder=12xy..',
       :merchantAccount => 'YOUR_MERCHANT_ACCOUNT'
   })
   
   # Check if further action is needed.
   if response.body.has_key(:action)
      # Pass the action object to your front end
      # response.body[:action]
   else
      # No further action needed, pass the resultCode object to your front end
      # response.body[:resultCode]

   // Set your X-API-KEY with the API key from the Customer Area.
   String xApiKey = "YOUR_X-API-KEY";
   Client client = new Client(xApiKey,Environment.TEST);
   Checkout checkout = new Checkout(client);
   PaymentsRequest paymentsRequest = new PaymentsRequest();
   paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
   // STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
   paymentsRequest.setPaymentMethod(STATE_DATA)
   Amount amount = new Amount();
   amount.setCurrency("EUR");
   amount.setValue(1000L);
   paymentsRequest.setAmount(amount);
   paymentsRequest.setReference("YOUR_ORDER_NUMBER");
   paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");
   PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);

   // Set your X-API-KEY with the API key from the Customer Area.
   $client = new \Adyen\Client();
   $client->setEnvironment(\Adyen\Environment::TEST);
   $client->setXApiKey("YOUR_X-API-KEY");
   $service = new \Adyen\Service\Checkout($client);
   
   // STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
   $paymentMethod = STATE_DATA;;
   
   $params = array(
       "paymentMethod" => $paymentMethod,
       "amount" => array(
           "currency" => "EUR",
           "value" => 1000
       ),
       "reference" => "YOUR_ORDER_NUMBER",
       "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
       "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
   );
   $result = $service->payments($params);
   
   // Check if further action is needed
   if (array_key_exists("action", $result)){
      // Pass the action object to your front end
      // $result["action"]
   }
   else {
      // No further action needed, pass the resultCode to your front end
      // $result['resultCode']
   }

   # Set your X-API-KEY with the API key from the Customer Area.
   adyen = Adyen.Adyen()
   adyen.payment.client.platform = "test"
   adyen.client.xapikey = 'YOUR_X-API-KEY'
   
   # STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
   paymentMethod = STATE_DATA
   
   result = adyen.checkout.payments({
       'paymentMethod': paymentMethod,
       'amount': {
           'value': 1000,
           'currency': 'EUR'
       },
       'reference': 'YOUR_ORDER_NUMBER',
       'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
       'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
   })
   
   # Check if further action is needed
   if 'action' in result.message:
      # Pass the action object to your front end
      # result.message['action']
   else:
      # No further action needed, pass the resultCode to your front end
      # result.message['resultCode']

   // Set your X-API-KEY with the API key from the Customer Area.
   string apiKey = "YOUR_X-API-KEY";
   var client = new Client (apiKey, Environment.Test);
   var checkout = new Checkout(client);
   var amount = new Adyen.Model.Checkout.Amount("EUR", 1000);
   var paymentsRequest = new Adyen.Model.Checkout.PaymentRequest
   { 
   // STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
       PaymentMethod = STATE_DATA,
       Amount = amount,
       Reference = "YOUR_ORDER_NUMBER",
       ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
   };
   var paymentResponse = checkout.Payments(paymentsRequest);

   const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
   const config = new Config();
   // Set your X-API-KEY with the API key from the Customer Area.
   config.apiKey = '[YOUR_X-API-KEY]';
   config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
   const client = new Client({ config });
   client.setEnvironment("TEST");
   const checkout = new CheckoutAPI(client);
   checkout.payments({
       merchantAccount: config.merchantAccount,
   // STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
       paymentMethod: STATE_DATA,
       amount: { currency: "EUR", value: 1000, },
       reference: "YOUR_ORDER_NUMBER",
       returnUrl: "https://your-company.com/checkout?shopperOrder=12xy.."
   }).then(res => res);

   import (
       "github.com/adyen/adyen-go-api-library/v5/src/checkout"
       "github.com/adyen/adyen-go-api-library/v5/src/common"
       "github.com/adyen/adyen-go-api-library/v5/src/adyen"
   )
   // Set your X-API-KEY with the API key from the Customer Area.
   client := adyen.NewClient(&common.Config{
       Environment: common.TestEnv,
       ApiKey:      "[YOUR_X-API-KEY]",
   })
   // STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
   paymentMethod := STATE_DATA
   res, httpRes, err := client.Checkout.Payments(&checkout.PaymentRequest{
       PaymentMethod: paymentMethod,
       Amount: checkout.Amount{
           Value:    1000,
           Currency: "EUR",
       },
       Reference: "YOUR_ORDER_NUMBER",
       ReturnUrl: "https://your-company.com/checkout?shopperOrder=12xy..",
       MerchantAccount: "[YOUR_MERCHANT_ACCOUNT]",
   })

   https://docs.adyen.com/payment-methods/mb-way/web-component#payments-request-component

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

  https://docs.adyen.com/payment-methods/mb-way/web-component#-payments-response

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.

curl https://checkout-test.adyen.com/v70/payments/details \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{hint:object passed from the front end or client app}STATE_DATA{/hint}'

require 'adyen-ruby-api-library'

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.env = :test
adyen.api_key = "YOUR_X-API-KEY"

# STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
request = STATE_DATA 
response = adyen.checkout.payments.details(request)  

# Check if further action is needed.
if response.body.has_key(:action)
   # Pass the action object to your frontend
   puts response.body[:action]
else
   # No further action needed, pass the resultCode to your frontend
   puts response.body[:resultCode]
end

// Set your X-API-KEY with the API key from the Customer Area.
String xApiKey = "YOUR_X-API-KEY";
Client client = new Client(xApiKey,Environment.TEST);
Checkout checkout = new Checkout(client);
// STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
PaymentsDetailsRequest paymentsDetailsRequest = STATE_DATA;
PaymentsResponse paymentsDetailsResponse = checkout.paymentsDetails(paymentsDetailsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setEnvironment(\Adyen\Environment::TEST);
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

// STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
$params = STATE_DATA;
$result = $service->paymentsDetails($params);

// Check if further action is needed
if (array_key_exists("action", $result)){
   // Pass the action object to your frontend.
   // $result["action"]
}
else {
   // No further action needed, pass the resultCode to your front end
   // $result['resultCode']
}

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.payment.client.platform = "test"
adyen.client.xapikey = 'YOUR_X-API-KEY'

# STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
request = STATE_DATA
result = adyen.checkout.payments_details(request)

# Check if further action is needed.
if 'action' in result.message:
   # Pass the action object to your front end
   # result.message['action']
else:
   # No further action needed, pass the resultCode to your front end
   # result.message['resultCode']

// Set your X-API-KEY with the API key from the Customer Area.
string apiKey = "YOUR_X-API-KEY";
var client = new Client (apiKey, Environment.Test);
var checkout = new Checkout(client);
// STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
var paymentsDetailsRequest = STATE_DATA;
var paymentsDetailsResponse = checkout.PaymentDetails(paymentsDetailsRequest);

const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[YOUR_X-API-KEY]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
// STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
checkout.paymentsDetails(STATE_DATA).then(res => res);

import (
    "github.com/adyen/adyen-go-api-library/v5/src/checkout"
    "github.com/adyen/adyen-go-api-library/v5/src/common"
    "github.com/adyen/adyen-go-api-library/v5/src/adyen"
)
// Set your X-API-KEY with the API key from the Customer Area.
client := adyen.NewClient(&common.Config{
    Environment: common.TestEnv,
    ApiKey:      "[YOUR_X-API-KEY]",
})
// STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
req := STATE_DATA;
res, httpRes, err := client.Checkout.PaymentsDetails(&req)

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.

{
  "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.

The resultCode values you can receive for MB WAY are:

You will also receive the outcome of the payment asynchronously in a webhook:

Test and go live

To test your MB WAY integration, you can use any telephone number, for example +351234567890.

You can trigger a specific resultCode value by appending a code to the shopperStatement value in your /payments request:

For example, to receive resultCode: Refused, include the following in your /payments request:

{
  // Produce a REFUSED payment result.
  "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