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
To present the Multibanco Component in your payment form:
-
From your server, make a POST /paymentMethods request specifying:
countryCode: PTamount.currency: EUR.
- Pass the full response from the /paymentMethods call as the
paymentMethodsResponseobject when creating an instance of theAdyenCheckout.
Make a payment
When the shopper selects to pay, the Component calls the onChange event, which contains a state.data.
-
If
state.isValidis true, collect thestate.dataand pass this to your server. - From your server, make a /payments, specifying:
paymentMethod: Thestate.data.paymentMethodfrom theonChangeevent from your front end.
The following code sample is a /payments request for a Multibanco payment for 10 EUR.
curl https://checkout-test.adyen.com/v64/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");
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.
{
"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
actionobject to your front end. The Component needs theactionobject to present the voucher.
Present voucher
-
Create a DOM element for Multibanco, placing it where you want the voucher to be rendered:
<div id="multibanco-container"></div> -
Call
createFromActionand 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.