Multibanco Component

Our Multibanco Component renders Multibanco in your payment form, and presents a 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:

1. Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
2. 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:

1. Add Multibanco in your Customer Area.

2. Pass in your /paymentMethods request:

   • countryCode: PT
   • amount.currency: EUR.

   Pass the full response to the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

3. Add the Multibanco Component:

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

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

   b. Create an instance of the Multibanco Component, and mount it.

    const multibanco = checkout.create('multibanco').mount('#multibanco-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, 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.

{
    "amount": {
        "currency": "EUR",
        "value": 1000
    },
    "reference": "YOUR_ORDER_NUMBER",
    "paymentMethod": {
        "type": "multibanco"
    },
    "countryCode": "PT",
    "merchantAccount": "TestMerchant"
}

You receive a response containing:

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

{
    "resultCode": "PresentToShopper",
    "action": {
        "expiresAt": "2019-09-28T12:54:17",
        "initialAmount": {
            "currency": "EUR",
            "value": 1000
        },
        "merchantName": "YOUR_MERCHANT_NAME",
        "merchantReference": "YOUR_ORDER_NUMBER",
        "paymentMethodType": "multibanco",
        "reference": "MULTIBANCO_REFERENCE",
        "totalAmount": {
            "currency": "EUR",
            "value": 1000
        },
        "type": "voucher"
    }
}

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

Present voucher

Make sure to handle the action object in the /payments response using createFromAction to present the voucher to the shopper.

Present the payment result

Use the resultCode that you received in response to your /payments call to present the payment result to your shopper. You will also receive a webhook notification informing you of the status of the payment. The resultCode value you can receive for Multibanco is:

Present shopper email

You can change the text and customize the look of the email to suit your business needs. To do so:

1. In Customer Area, go to Account > Skins.
2. Select the relevant skin and go to Extra options > Edit language files.

In the list of key entries, you can find the following:

• pmDetailEmailReminder.multibanco.from_address: do-not-reply@adyen.com
• pmDetailEmailReminder.multibanco.subject: The subject of the email sent to the shopper.
• pmDetailEmailReminder.multibanco.title: The title of the email sent to the shopper.
• comprafacil.multibanco.result.instructions: The instructions the shopper needs to follow to carry out the payment.
• comprafacil.multibanco.result.reference: The payment reference needed to make the payment.
• comprafacil.multibanco.result.entity: The number representing the relevant acquiring bank.
• comprafacil.multibanco.result.amount: The amount that the shopper needs to pay.
• comprafacil.multibanco.result.deadline: The deadline by which the shopper needs to pay.

These fields correspond to different sentences of the email that the shopper receives. You can override the Adyen default for these sentences. To do so, enter your sentences in the blank Merchant default field. Make sure to save your changes.

Test and go live

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

See also