A Bancontact card payment is like a regular card payment, except that there is no security code, and 3D Secure 1 is mandatory.
Our Web Drop-in renders the Bancontact card in your payment form, securely collects sensitive card information, and redirects the shopper to perform 3D Secure authentication.
When making a Bancontact payment, you need to:
- Provide
browserInfo
when making a payment request. - Handle the redirect result when the shopper returns back to your website.
Before you begin
This page explains how to add Bancontact card payments 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 integration:
- Make sure that you have set up your back end implementation, and added Drop-in to your payment form.
- Add Bancontact card in your test Customer Area.
Show Bancontact card in your payment form
To have Drop-in render Bancontact card in your payment form, specify in your /paymentMethods request:
- countryCode: BE
-
amount.currency: EUR.
Optional Drop-in configuration
When creating an instance of Drop-in, you can optionally specify:
Field | Description | Default |
---|---|---|
enableStoreDetails |
Set to true to show the check box for saving the card details for recurring payments. | false |
hasHolderName |
Set to true to show the input field for the card holder name. | false |
holderNameRequired |
Set to true to make the card holder name a required field. To show the field, you additionally need to set hasHolderName to true. |
false |
holderName |
String that is used to prefill the card holder name field. | Empty |
name |
String that is used to display the payment method name to the shopper. | Depends on the shopperLocale specified in /paymentMethods request. |
styles |
Set a style object to customize the card input fields. For a list of supported properties, refer to Styling card input fields. |
const dropin = checkout
.create('dropin', {
paymentMethodsConfiguration: {
bcmc: { // Example optional configuration for Bancontact
hasHolderName: true,
holderNameRequired: true,
enableStoreDetails: true,
name: 'Bancontact card'
}
}
})
.mount('#dropin');
You can also customize your shopper's experience when specific events occur. For more information, refer to Events.
Include Bancontact card in the list of other cards
By default, Drop-in renders Bancontact card separately from other cards. Alternatively, you can include Bancontact card in the list of other cards:
- When creating an instance of AdyenCheckout, include 'bcmc' in the
removePaymentMethods
array. This removes the separate Bancontact Component.
const checkout = new AdyenCheckout({
environment: 'test',
clientKey: YOUR_CLIENT_KEY, // The client key from your Customer Area
paymentMethodsResponse: paymentMethodReponse,
removePaymentMethods: ['bcmc']
});
- When creating an instance of Drop-in, include 'bcmc' in the
brands
array of thecard
payment method:
const dropin = checkout
.create('dropin', {
paymentMethodsConfiguration: {
card: {
hasHolderName: true,
holderNameRequired: true,
name: 'Credit or debit card',
brands: ['mc','visa','amex', `bcmc`]
}
},
...
})
.mount('#dropin');
Make a payment
When the shopper selects the Pay button, Drop-in calls the onSubmit
event, which contains a state.data
.
- Pass the
state.data
to your server. - From your server, make a /payments request, specifying:
paymentMethod
: Thestate.data.paymentMethod
contained in theonSubmit
event from your front end.browserInfo
: Thestate.data.browserInfo
contained in theonSubmit
event from your front end.returnURL
: The URL where the shopper will be redirected back to after completing 3D Secure authentication. The URL should include the protocol:http://
orhttps://
. You can also include your own additional query parameters, for example, shopper ID or order reference number.
curl https://checkout-test.adyen.com/v66/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
"merchantAccount":"YOUR_MERCHANT_ACCOUNT",
"reference":"YOUR_ORDER_NUMBER",
"amount":{
"currency":"EUR",
"value":1000
},
"{hint:state.data.paymentMethod from onSubmit}paymentMethod{/hint}":{
"type":"bcmc",
"encryptedCardNumber": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
"encryptedExpiryMonth": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
"encryptedExpiryYear": "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
},
"{hint:state.data.browserInfo from onSubmit}browserInfo{/hint}":{
"userAgent":"Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
"acceptHeader":"text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8"
},
"returnUrl":"https://your-company.com/checkout?shopperOrder=12xy.."
}'
# 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",
:paymentMethod => {
:type => "bcmc",
:encryptedCardNumber => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
:encryptedExpiryMonth => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
:encryptedExpiryYear => "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
},
:returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
: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();
paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
Amount amount = new Amount();
amount.setCurrency("EUR");
amount.setValue(1000L);
paymentsRequest.setAmount(amount);
String encryptedCardNumber = "adyenjs_0_1_18$...encryptedCardNumber";
String encryptedExpiryMonth = "adyenjs_0_1_18$...encryptedExpiryMonth";
String encryptedExpiryYear = "adyenjs_0_1_18$...encryptedExpiryYear";
paymentsRequest.setReference("YOUR_ORDER_NUMBER");
paymentsRequest.addEncryptedCardData(encryptedCardNumber,encryptedExpiryMonth, encryptedExpiryYear);
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",
"paymentMethod" => array(
"type" => "bcmc",
"encryptedCardNumber" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
"encryptedExpiryMonth" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
"encryptedExpiryYear" => "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
),
"returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
"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',
'paymentMethod': {
'type': 'bcmc',
'encryptedCardNumber': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
'encryptedExpiryMonth': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
'encryptedExpiryYear': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...'
},
'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
'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 = "bcmc,
EncryptedCardNumber = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
EncryptedExpiryMonth = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
EncryptedExpiryYear = "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
};
var paymentRequest = new Adyen.Model.Checkout.PaymentRequest
{
Reference = "YOUR_ORDER_NUMBER",
Amount = amount,
ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
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: 'bcmc',
encryptedExpiryMonth: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
encryptedExpiryYear: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
encryptedCardNumber: "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
},
reference: "YOUR_ORDER_NUMBER",
merchantAccount: config.merchantAccount,
returnUrl: "https://your-company.com/checkout?shopperOrder=12xy.."
}).then(res => res);
The /payments response contains:
-
resultCode
: RedirectShopper -
action
: Object containing information about the redirect. Pass this to your front end or client app. -
action.paymentData
: Store this value on your server — you need to submit this in your /payments/details request when handling the redirect result. -
details
: Array that contains thekey
parameter names and the corresponding datatype
that you should expect when the shopper is redirected back to yourreturnURL
. These are also the parameters that you need to submit in your /payments/details when handling the redirect result.
{
"resultCode": "RedirectShopper",
"action": {
"data": {
"MD": "OEVudmZVMUlkWjd0MDNwUWs2bmhSdz09...",
"PaReq": "eNpVUttygjAQ/RXbDyAXBYRZ00HpTH3wUosPfe...",
"TermUrl": "https://your-company.com/checkout?shopperOrder=12xy.."
},
"method": "POST",
"paymentData": "Ab02b4c0!BQABAgA4e3wGkhVah4CJL19qdegdmm9E...",
"paymentMethodType": "bcmc",
"type": "redirect",
"url": "https://test.adyen.com/hpp/3d/validate.shtml"
},
"details": [
{
"key": "MD",
"type": "text"
},
{
"key": "PaRes",
"type": "text"
}
],
...
}
- Pass the
action
object to your front end.
Handle the redirect result
Drop-in uses dropin.handleAction(action)
to redirect the shopper to perform the 3D Secure authentication, and then back to your website with an HTTP POST. After the shopper is redirected back to your website, submit the authentication results by making a /payments/details request.
For more information and detailed instructions, refer to HTTP POST redirect.
Present the payment result
Use the resultCode from the /payments/details response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a notification webhook.
For Bancontact card payments, you can receive the following resultCode
values:
resultCode | Description | Action to take |
---|---|---|
Authorised | The payment was successful. | Inform the shopper that the payment was successful. |
Cancelled | The shopper cancelled the payment. | Ask the shopper whether they want to continue with the order, or ask them to select a different payment method. |
Error | There was an error when the payment was being processed. For more information, check the
refusalReason
field. |
Inform the shopper that there was an error processing their payment. |
Refused | The payment was refused. For more information, check the
refusalReason
field. |
Ask the shopper to try the payment again using a different payment method. |
Recurring payments
We support recurring transactions for Bancontact through SEPA Direct Debit. To make recurring payments, you need to:
Create a token
To create a token, include in your /payments request:
-
storePaymentMethod
: true - shopperReference: Your unique identifier for the shopper (minimum length three characters).
When the payment has been settled, you receive a notification webhook containing:
-
eventCode
: RECURRING_CONTRACT -
originalReference
: ThepspReference
of the initial payment. -
pspReference
: This is the token that you need to make recurring payments for this shopper.
Make a payment with a token
To make a payment with the token, include in your /payments request:
-
paymentMethod.storedPaymentMethodId
: ThepspReference
from the RECURRING_CONTRACT. You can also get this value by using the /listRecurringDetails endpoint. -
shopperReference
: The unique shopper identifier that you specified when creating the token. -
shopperInteraction
: ContAuth. -
recurringProcessingModel
: Subscription or UnscheduledCardOnFile.
For more information about the shopperInteraction
and recurringProcessingModel
fields, refer to Recurring transaction types.
curl https://checkout-test.adyen.com/v66/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
"amount":{
"value":1000,
"currency":"EUR"
},
"paymentMethod":{
"type":"sepadirectdebit",
"recurringDetailReference":"7219687191761347"
},
"reference":"YOUR_ORDER_NUMBER",
"merchantAccount":"YOUR_MERCHANT_ACCOUNT",
"shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
"shopperInteraction":"ContAuth",
"recurringProcessingModel": "Subscription"
}'
# 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",
:paymentMethod => {
:type => "sepadirectdebit",
:recurringDetailReference => "7219687191761347"
},
:returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
:shopperReference => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
:merchantAccount => "YOUR_MERCHANT_ACCOUNT",
:shopperInteraction => "ContAuth",
:recurringProcessingModel => "Subscription"
})
// 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.setRecurringDetailReference("7219687191761347");
paymentMethodDetails.setType("sepadirectdebit");
paymentsRequest.setPaymentMethod(paymentMethodDetails);
paymentsRequest.setReference("YOUR_ORDER_NUMBER");
paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");
paymentsRequest.setShopperInteraction("ContAuth");
paymentsRequest.setRecurringProcessingModel("Subscription");
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",
"paymentMethod" => array(
"type" => "sepadirectdebit",
"recurringDetailReference" => "7219687191761347"
),
"returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
"shopperReference" => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
"recurringProcessingModel" => "Subscription",
"shopperInteraction" => "ContAuth",
"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',
'paymentMethod': {
'type': 'sepadirectdebit',
'recurringDetailReference': '7219687191761347'
},
'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
'shopperReference': 'YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j'
'merchantAccount': 'YOUR_MERCHANT_ACCOUNT',
'shopperInteraction':'ContAuth',
'recurringProcessingModel': 'Subscription'
})
// 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 = "sepadirectdebit",
RecurringDetailReference = "7219687191761347"
};
var paymentsRequest = new Model.Checkout.PaymentRequest
{
Reference = "YOUR_ORDER_NUMBER",
Amount = amount,
ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
ShopperReference = "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
RecurringProcessingModel = "Subscription",
ShopperInteraction = "ContAuth",
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: 'sepadirectdebit',
recurringDetailReference: "7219687191761347"
},
reference: "YOUR_ORDER_NUMBER",
merchantAccount: config.merchantAccount,
shopperReference: "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
returnUrl: "https://your-company.com/checkout?shopperOrder=12xy..",
shopperInteraction: "ContAuth",
recurringProcessingModel: "Subscription"
}).then(res => res);
Test and go live
Before making live payments:
-
Use the following credentials to test your integration:
You can check the status of test payments in your Customer Area > Transactions > Payments.Test card number Expiry date 6703 4444 4444 4449 10/2020, or 03/2030 6703 0000 0000 0000 003 10/2020, or 03/2030 - Add Bancontact card in your live Customer Area.