Bancontact card 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 the server-side flow that your integration uses:

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:

• /sessions: This is the default with Drop-in v5.0.0 or later.
• /payments: If you implemented an additional use case.

Optional Drop-in configuration

If you want to add optional configuration, include this in a configuration object.

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

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

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 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.
• 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:

¹ 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.