Multibanco Component

Add Multibanco to an existing Components integration.

Our Multibanco Component renders Multibanco in your payment form. When making a Multibanco payment, you additionally need to use createFromAction to present the voucher.

Before you begin

This page explains how to add Multibanco 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 Multibanco integration:

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

Show Multibanco in your payment form

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.

To use the Multibanco Component, you also need to:

Add Multibanco in your Customer Area.
From your server, make a POST /paymentMethods request specifying:
- countryCode: PT
- amount.currency: EUR.
Pass the full response to the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

Make a payment

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

If state.isValid is true, collect the state.data and pass this to your server.
From your server, make a /payments, specifying:
- paymentMethod: The state.data.paymentMethod from the onChange event from your front end.

The following code sample is a /payments request for a Multibanco payment.

https://docs.adyen.com/payment-methods/multibanco/web-component#1194239097

curl https://checkout-test.adyen.com/v52/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
    "shopperLocale": "pt-PT",
    "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
    "reference": "YOUR_ORDER_NUMBER",
    "amount": {
        "currency": "EUR",
        "value": 1000
    },
    "countryCode": "PT",
    "paymentMethod": {
        "type": "multibanco"
    }
}'

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"
 
response = adyen.checkout.payments({
  :amount => {
    :currency => "EUR",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :shopperLocale => "pt-PT",
  :paymentMethod => {
    :type => "multibanco"
  },
  :countryCode => "PT",
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
})

// Set YOUR_X-API-KEY with the API key from the Customer Area.
// Change to Environment.LIVE and add the Live URL prefix when you're ready to accept live payments.
    Client client = new Client("YOUR_X-API-KEY", Environment.TEST);
    Checkout checkout = new Checkout(client);

    PaymentsRequest paymentsRequest = new PaymentsRequest();

    String merchantAccount = "YOUR_MERCHANT_ACCOUNT";
    paymentsRequest.setMerchantAccount(merchantAccount);

    Amount amount = new Amount();
    amount.setCurrency("EUR");
    amount.setValue(15000L);
    paymentsRequest.setAmount(amount);

    DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
    paymentMethodDetails.setType("multibanco");
    paymentsRequest.setPaymentMethod(paymentMethodDetails);

    paymentsRequest.setReference("YOUR_ORDER_NUMBER");
    paymentsRequest.setShopperLocale("pt-PT");
    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->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "EUR",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "shopperLocale" => "pt-PT",
  "paymentMethod" => array(
    "type" => "multibanco"
  ),
  "countryCode" => "PT",
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);

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

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'EUR'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'shopperLocale': 'pt-PT',
   'paymentMethod': {
      'type': 'multibanco'
   },
   'countryCode': 'PT',
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
})

// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("YOUR_X-API-KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Model.Checkout.Amount("EUR", 1000);
var details = new Model.Checkout.DefaultPaymentMethodDetails{
  Type = "multibanco"
};
var paymentRequest = new Adyen.Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  CountryCode = "PT",
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  ShopperLocale = "pt-PT",
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
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 = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "EUR", value: 1000 },
    paymentMethod: {
        type: 'multibanco'
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount,
    countryCode: "PT",
    shopperLocale: "pt-PT"
}).then(res => res);

You receive a response containing:

expiresAt: The expiry date of the voucher. The shopper needs to make their payment before this date and time.
entity: The corresponding entity number.
reference: The Multibanco reference that the shopper needs to make the payment.

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

/payments response

{
    "resultCode": "PresentToShopper",
    "action": {
        "paymentMethodType": "multibanco",
        "type": "voucher",
        "entity": "12101",
        "expiresAt": "2020-01-10T09:56:48",
        "initialAmount": {
            "currency": "EUR",
            "value": 1000
        },
        "merchantName": "YOUR_MERCHANT_NAME",
        "merchantReference": "YOUR_ORDER_NUMBER",
        "reference": "501 417 571",
        "totalAmount": {
            "currency": "EUR",
            "value": 1000
        },
        "action": "voucher"
    }
}

Pass the action object to your front end. The Component needs the action object to present the voucher.

Present voucher

Multibanco references are valid until the end of the expiry day. For example, if a reference is generated at 13:30 and the expiry date is D+1 (next day), the reference is payable until 23:59 on the next day.

Create a DOM element for Multibanco, placing it where you want the voucher to be rendered:
```
<div id="multibanco-container"></div>
```
Call createFromAction and pass the action object from the /payments response.
```
checkout.createFromAction(action).mount('#multibanco-container');
```

The Component presents the voucher and calls the onAdditionalDetails event after the shopper completes the payment or if the shopper fails to complete the payment within the voucher validity period.

Present the payment result

Use the resultCode that you received in response to your /payments call to present the payment voucher to your shopper.
The resultCode value you can receive for Multibanco is:

resultCode	Description	Action to take
PresentToShopper	Present the voucher to the shopper.	Inform the shopper that you've received their order, and are waiting for the payment to be completed. When the shopper has completed the payment you will receive a successful AUTHORISATION notification.

We don't know when the shopper will make the payment. Thus, we will only send the AUTHORISATION notification once the payment has been received. Once the shopper transfers the funds, we receive the result from the bank, and the transaction status changes to Authorised. If the shopper fails to make the payment before the payment voucher expires, you will receive an OFFER_CLOSED notification.

Test and go live

To test Multibanco payments before going live, contact the Support Team.

Before you can accept live Multibanco payments, you need to submit a request for Multibanco in your live Customer Area.