MB WAY Drop-in integration

Our Web Drop-in 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 Drop-in integration. The Web Drop-in integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Drop-in integration guide.

Before starting your MB WAY integration:

1. Make sure that you have set up your back end implementation, and added Drop-in to your payments form.
2. Add MB WAY in your test Customer Area.

Show MB WAY in your payment form

Drop-in uses the countryCode and the amount.currency from your /paymentMethods request to show the available payment methods to your shopper.

To show MB WAY in your payment form, make a /paymentMethods request 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.

Make a payment

When the shopper selects to pay, Drop-in calls the onSubmit event, which contains a state.data.

1. Pass the state.data to your server.

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

   • paymentMethod: The state.data.paymentMethod from the onSubmit 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-drop-in#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-drop-in#-payments-response

Show the waiting screen

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

dropin.handleAction(action)

Drop-in uses dropin.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, Drop-in 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