Payment-method icon

Bancontact card Component

Add Bancontact card to an existing Components integration.

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:

API reference

You don't 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:

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

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 v 4.3.0 If a shopper enters a date that is earlier than specified here, they will see the following error:
"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.
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.

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:

  1. Create a shopper token.
  2. Use the token to make future payments for the shopper.

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_CONTRACT
  • originalReference: The pspReference 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: The pspReference 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.
  • shopperInteractionContAuth.
  • recurringProcessingModel: Subscription or UnscheduledCardOnFile.

For more information about the shopperInteraction and recurringProcessingModel fields, refer to Recurring transaction types.

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 Expiry Date
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.