A Bancontact card payment is like a regular card payment, except for the following:
- There is no CVC. For co-badged cards, the CVC field can still appear.
- 3D Secure authentication is mandatory.
- Separate captures are not supported.
On this page, you can find additional configuration for adding Bancontact card to your Components integration.
Our Component renders the Bancontact card in your payment form, securely collects sensitive card information, and redirects the shopper to perform 3D Secure authentication.
Before you begin
This page assumes you have already:
- For Web Components v6, import the Component that you need for Bancontact card:
import { AdyenCheckout, } from '@adyen/adyen-web'
API reference
You do not need to send additional fields for Bancontact card. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:
- /sessions: This is the default with Components v5.0.0 or later.
- /payments: If you implemented an additional use case.
Component configuration
Step 1: Create a DOM element
Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:
<div id="bcmc-container"></div>
Step 2: Create an instance of the Component
v6.0.0 or later
Create an instance of the Component, passing:
- Your instance of
AdyenCheckout
.
const bcmc = new (checkout).mount('#bcmc-container');
v5.x.x or earlier
Use the create
method of your AdyenCheckout
instance, in this case checkout
, to create the Component:
const bcmcComponent = checkout.create('bcmc').mount('#bcmc-container');
Optional configuration
If you want to add optional configuration, include this in a configuration object.
Parameter name | Description | Default |
---|---|---|
enableStoreDetails |
Set to true to show the checkbox for saving the card details for recurring payments. | false |
hasHolderName |
Set to true to show the input field for the cardholder name. | false |
holderNameRequired |
Set to true to make the cardholder name a required field. To show the field, you also need to set hasHolderName to true. |
false |
holderName |
String that is used to prefill the cardholder name field. | Empty |
positionHolderNameOnTop Added in v4.2.0 |
Renders the cardholder name field at the top of the payment form. | false |
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. | |
minimumExpiryDate |
"Your card expires before check out date." Format: mm/yy |
|
brands |
Array of card brands that will be recognized. | ['bcmc','maestro','visa'] |
brandsConfiguration Added in v4.5.0 |
Object where you can customize the icons for different brands. For example, to customize the icon for Visa, include inside the brandsConfiguration : visa: { icon: 'https://...' } |
|
showBrandIcon |
Set to false to not show the brand logo when the card brand has been recognized. | true |
showBrandsUnderCardNumber Added in v5.12.0 |
Shows brand logos under the card number field when the shopper selects the card payment method. |
true |
billingAddressRequired Added in v3.5.0 |
Set to true to collect the shopper's billing address. | false |
billingAddressAllowedCountries |
Specify allowed country codes for the billing address. For example, ['US', 'CA', 'BR'] . |
The Country field dropdown menu shows a list of all countries/regions. |
data |
Object that contains placeholder information that you can use to prefill fields. For example: - holderName : Placeholder for the cardholder name field. - billingAddress : Object that contains placeholder information for the billing address such as street , postalCode , city , country , and stateOrProvince . |
Empty |
autoFocus |
Automatically move the focus to the date field when the entered card number reaches the expected length. Added in v5.8.0: the focus also moves to the date field when the entered card number reaches the expected length. |
true |
SRConfig |
Object for configuring screen reader behavior. Does not affect what gets rendered in the checkout form. | |
SRConfig.collateErrors |
Indicates if all errors in the form are read out after each validation. For example, if there is an error in the card number field, the error is read out after validating each of the other fields, until the error is fixed. | true |
SRConfig.moveFocus |
Indicates if focus automatically switches to the first field with an error when the shopper selects the Pay button. Can only be set if SRConfig.collateErrors is true. |
false |
The following example shows how to configure the Component to show an input field for the required cardholder name and a checkbox to store card details for recurring payments.
You can also customize your shopper's experience when specific events occur. For more information, refer to Events.
v6.0.0 or later
Create an instance of the Component, passing:
- Your instance of
AdyenCheckout
. - The payment method-specific configuration.
const bcmc = new (checkout, bcmcConfiguration).mount('#bcmc-container');
v5.x.x or earlier
Use the create
method of your AdyenCheckout
instance, in this case checkout
, to create an instance of the Component. Add the configuration object if you created one.
const bcmcComponent = checkout.create('bcmc', bcmcConfiguration).mount('#bcmc-container');
Include Bancontact card in the list of other cards
You can add Bancontact card to the list of other cards when creating a configuration object for the Cards Web Component. To do so, include bcmc in the brands
array:
const cardConfiguration = {
hasHolderName: true,
holderNameRequired: true,
billingAddressRequired: true, // Set to true to show the billing address input fields.
enableStoreDetails: true,
brands: ['mc','visa','amex', 'bcmc']
};
Recurring
Bancontact recurring payments are not available in the test environment. To test your integration, do a penny test in the live environment instead.
We support recurring transactions for Bancontact through SEPA Direct Debit. To make recurring payments, you need to:
Create a token
We strongly recommend that you request explicit permission from the shopper if you intend to make recurring SEPA payments. Being transparent about the payment schedule and the charged amount reduces the risk of chargebacks.
To create a token, include in your /sessions or /payments request:
storePaymentMethod
: true- shopperReference: Your unique identifier for the shopper (minimum length three characters).
When the payment has been settled, you receive a webhook containing:
eventCode
: RECURRING_CONTRACToriginalReference
: ThepspReference
of the initial payment.pspReference
: This is the token that you need to make recurring payments for this shopper.
Make sure that your server is able to receive RECURRING_CONTRACT as part of your standard webhooks. You can enable the RECURRING_CONTRACT event code in the webhook settings page.
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 Tokenization.
Test and go live
Before making live payments, use the following credentials to test your integration:
Card number | Card type | CVV2/CVC2 | Username | Password | Issuing country/region | Expiry date |
---|---|---|---|---|---|---|
5127 8809 9999 9990 | BCMC / Mastercard Debit | BCMC: None Mastercard: 737 |
user | password | BE | 03/2030 |
6703 4444 4444 4449 | BCMC / Maestro | None | user | password | BE | 03/2030 |
4871 0499 9999 9910 1 | BCMC / Visa Debit | BCMC: None Visa: 737 |
user | password | BE | 03/2030 |
1 Depending on your payment method setup, transactions with this test card are routed to Bancontact or Visa.
You can force a decline using these credentials with "holderName": "DECLINED"
.
"paymentMethod": {
"type": "bcmc",
"number": "4871049999999910",
"holderName": "DECLINED",
"expiryMonth": "03",
"expiryYear": "2030"
}
This gets the following response:
"refusalReason": "Refused",
"resultCode": "Refused",
You can check the status of test payments in your Customer Area > Transactions > Payments.
Add Bancontact card in your live Customer Area.