Payment-method icon

Bancontact card Drop-in integration

Add Bancontact card to an existing Drop-in 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.

This page explains how to add Bancontact card to your existing Web Drop-in integration.

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.

Requirements

Select which endpoint you are using:

Import resources for v6

If you are using Web Drop-in v6, import the resources 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:

Optional Drop-in 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.

This setting also shows a maximum of 4 brand logos in the list of payment methods. If you support more than 4 brands, it shows 3 brand logos and the number of additional supported brands.
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 Drop-in 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.

Include the bcmcConfiguration object when creating a configuration object for Drop-in:

Pass the Drop-in configuration object when creating your instance of AdyenCheckout:

const checkout = await AdyenCheckout(configuration);

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. To do so, when creating AdyenCheckout configuration:

  1. Include bcmc in the blockedPaymentMethods array when making a /sessions or /paymentMethods request. This removes the separate Bancontact card Component.

    const configuration = {
      environment: 'test', // Change to 'live' for the live environment.
      clientKey: 'test_870be2...',
      // ...  other configuration
      blockedPaymentMethods: ['bcmc']
    });
  2. Include bcmc in the brands array of the card payment method:

    const configuration = {
      environment: 'test', // Change to 'live' for the live environment.
      clientKey: 'test_870be2...',
      // ...  other configuration
      paymentMethodsConfiguration: {
        card: {
          hasHolderName: true,
          holderNameRequired: true,
          name: 'Credit or debit card',
          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 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.