Bancontact card Component

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

Requirements

Select the server-side flow that your integration uses:

Import resources for v6

If you are using 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');

const bcmcComponent = checkout.create('bcmc').mount('#bcmc-container');

Optional configuration

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

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');

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

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.