--- title: "Bancontact card Component" description: "Add Bancontact card to an existing Components integration." url: "https://docs.adyen.com/payment-methods/bancontact/bancontact-card/web-component" source_url: "https://docs.adyen.com/payment-methods/bancontact/bancontact-card/web-component.md" canonical: "https://docs.adyen.com/payment-methods/bancontact/bancontact-card/web-component" last_modified: "2021-10-27T20:40:00+02:00" language: "en" --- # Bancontact card Component Add Bancontact card to an existing Components integration. [View source](/payment-methods/bancontact/bancontact-card/web-component.md) A Bancontact card payment is like a regular [card payment](/payment-methods/cards), except for the following: * There is no CVC. For co-badged cards, the CVC field can still appear. * [3D Secure authentication](/online-payments/3d-secure) is mandatory. * Separate captures are not supported. This page explains how to add Bancontact card to your existing Web Components integration. Our [Component](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) 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](/online-payments/build-your-integration) that your integration uses: ### Tab: Sessions flow | Requirement | Description | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | Make sure that you have built a Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components). | | **Setup steps** | Before you begin, [add Bancontact card in your Customer Area](/payment-methods/add-payment-methods). | ### Tab: Advanced flow | Requirement | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Integration type** | Make sure that you have built an Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components). | | **Setup steps** | Before you begin, [add Bancontact card in your Customer Area](/payment-methods/add-payment-methods). | ## Import resources for v6 If you are using Web Components v6, [import the Component](/online-payments/build-your-integration/?platform=Web\&integration=Drop-in\&version=6.0.0) that you need for Bancontact card: ```js import { AdyenCheckout, Bancontact } 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](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions): This is the default with [Components v5.0.0](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) or later. * [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments): If you implemented an [additional use case](/online-payments/build-your-integration). ## 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: ```html
``` ### Step 2: Create an instance of the Component #### v6.0.0 or later Create an instance of the Component, passing: * Your instance of `AdyenCheckout`. ```js const bcmc = new Bancontact(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: ```js 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](/payment-methods/cards/custom-card-integration#styling). | | | `minimumExpiryDate` | v 4.3.0If 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/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. **Bancontact card configuration** ```js const bcmcConfiguration = { hasHolderName: true, holderNameRequired: true, enableStoreDetails: true, name: 'Bancontact card' }; ``` You can also customize your shopper's experience when specific events occur. For more information, refer to [Events](/payment-methods/cards/web-drop-in#events). #### v6.0.0 or later Create an instance of the Component, passing: * Your instance of `AdyenCheckout`. * The payment method-specific configuration. ```js const bcmcComponent = new Bancontact(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. ```js 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](/online-payments/build-your-integration/sessions-flow/?platform=Web\&integration=Components#adyencheckout-configuration) for the [Cards Web Component](/payment-methods/cards/web-component). To do so, include **bcmc** in the `brands` array: ```js 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 supports [tokenization](/online-payments/tokenization/) for recurring payments. We strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments. You can use recurring transactions through the Bancontact Wallet Initiated Program (WIP). ### Bancontact Wallet Initiated Program The Bancontact Wallet Initiated Program (WIP) is a service that streamlines checkout and supports subscription-based billing. It offers the following: * **Bancontact One-Click Pay** to speed up checkout and boost conversion rates * **Bancontact Recurring** to support merchant-initiated recurring or subscription payments You have to sign up to be able to use this service and not all companies are eligible to use Bancontact WIP. To enable Bancontact WIP, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other). When you enable Bancontact WIP, transaction amount limits apply to ensure controlled and secure payments. Shoppers go through Strong Customer Authentication (SCA) one time when they complete their first transaction and give their consent. Subsequent transactions do not require SCA, which reduces friction and improves the checkout flow. Because the first transaction goes through SCA, there is no liability shift. The issuer remains liable. ### Make a recurring payment To make recurring payments, you need to: 1. [Create a shopper token](#create-a-token). 2. [Use the token to make future payments for the shopper](#make-payment-with-token). To test recurring payments, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to configure your test environment. ### Create a token To create a token, include in your [/sessions](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/post/sessions) or [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `storePaymentMethod`: **true** * [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperReference): Your unique identifier for the shopper (minimum length three characters). When the payment has been settled, you receive a [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) [webhook](/development-resources/webhooks) containing: * `type`: **recurring.token.created** * `shopperReference`: your unique identifier for the shopper. * `eventId`: The `pspReference` of the initial payment. * `storedPaymentMethodId`: This is the token that you need to make recurring payments for this shopper. Make sure that your server is able to receive the [Recurring tokens life cycle events](/development-resources/webhooks/webhook-types/#other-webhooks) webhook. You can [set up this webhook in your Customer Area](/development-resources/webhooks/#set-up-webhooks-in-your-customer-area). ### Make a payment with a token To make a payment with the token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `paymentMethod.storedPaymentMethodId`: The `storedPaymentMethodId` from the [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) webhook. You can also get this value by using the [/listRecurringDetails](https://docs.adyen.com/api-explorer/#/Recurring/latest/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](/online-payments/tokenization/). The following example shows a recurring **Subscription** payment using WIP. #### curl ```bash curl https://checkout-test.adyen.com/v72/payments \ -H 'x-api-key: ADYEN_API_KEY' \ -H 'content-type: application/json' \ -d '{ "amount":{ "value":1000, "currency":"EUR" }, "paymentMethod":{ "type":"bcmc", "storedPaymentMethodId":"7219687191761347" }, "reference":"YOUR_ORDER_NUMBER", "merchantAccount":"YOUR_MERCHANT_ACCOUNT", "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", "shopperInteraction":"ContAuth", "recurringProcessingModel": "Subscription" }' ``` #### Java ```java // Adyen Java API Library v39.3.0 import com.adyen.Client; import com.adyen.enums.Environment; import com.adyen.model.checkout.*; import java.time.OffsetDateTime; import java.util.*; import com.adyen.model.RequestOptions; import com.adyen.service.checkout.*; // For the LIVE environment, also include your liveEndpointUrlPrefix. Client client = new Client("ADYEN_API_KEY", Environment.TEST); // Create the request object(s) Amount amount = new Amount() .currency("EUR") .value(1000L); CardDetails cardDetails = new CardDetails() .storedPaymentMethodId("7219687191761347") .type(CardDetails.TypeEnum.BCMC); PaymentRequest paymentRequest = new PaymentRequest() .reference("YOUR_ORDER_NUMBER") .amount(amount) .merchantAccount("YOUR_MERCHANT_ACCOUNT") .recurringProcessingModel(PaymentRequest.RecurringProcessingModelEnum.SUBSCRIPTION) .paymentMethod(new CheckoutPaymentMethod(cardDetails)) .shopperInteraction(PaymentRequest.ShopperInteractionEnum.CONTAUTH) .shopperReference("YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j"); // Send the request PaymentsApi service = new PaymentsApi(client); PaymentResponse response = service.payments(paymentRequest, new RequestOptions().idempotencyKey("UUID")); ``` #### PHP ```php setXApiKey("ADYEN_API_KEY"); // For the LIVE environment, also include your liveEndpointUrlPrefix. $client->setEnvironment(Environment::TEST); // Create the request object(s) $amount = new Amount(); $amount ->setCurrency("EUR") ->setValue(1000); $checkoutPaymentMethod = new CheckoutPaymentMethod(); $checkoutPaymentMethod ->setStoredPaymentMethodId("7219687191761347") ->setType("bcmc"); $paymentRequest = new PaymentRequest(); $paymentRequest ->setReference("YOUR_ORDER_NUMBER") ->setAmount($amount) ->setMerchantAccount("YOUR_MERCHANT_ACCOUNT") ->setRecurringProcessingModel("Subscription") ->setPaymentMethod($checkoutPaymentMethod) ->setShopperInteraction("ContAuth") ->setShopperReference("YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j"); $requestOptions['idempotencyKey'] = 'UUID'; // Send the request $service = new PaymentsApi($client); $response = $service->payments($paymentRequest, $requestOptions); ``` #### C\# ```cs // Adyen .net API Library v32.1.1 using Adyen; using Environment = Adyen.Model.Environment; using Adyen.Model; using Adyen.Model.Checkout; using Adyen.Service.Checkout; // For the LIVE environment, also include your liveEndpointUrlPrefix. var config = new Config() { XApiKey = "ADYEN_API_KEY", Environment = Environment.Test }; var client = new Client(config); // Create the request object(s) Amount amount = new Amount { Currency = "EUR", Value = 1000 }; CardDetails cardDetails = new CardDetails { StoredPaymentMethodId = "7219687191761347", Type = CardDetails.TypeEnum.Bcmc }; PaymentRequest paymentRequest = new PaymentRequest { Reference = "YOUR_ORDER_NUMBER", Amount = amount, MerchantAccount = "YOUR_MERCHANT_ACCOUNT", RecurringProcessingModel = PaymentRequest.RecurringProcessingModelEnum.Subscription, PaymentMethod = new CheckoutPaymentMethod(cardDetails), ShopperInteraction = PaymentRequest.ShopperInteractionEnum.ContAuth, ShopperReference = "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j" }; // Send the request var service = new PaymentsService(client); var response = service.Payments(paymentRequest, requestOptions: new RequestOptions { IdempotencyKey = "UUID"}); ``` #### NodeJS (JavaScript) ```js // Adyen Node API Library v29.0.0 const { Client, CheckoutAPI } = require('@adyen/api-library'); // For the LIVE environment, also include your liveEndpointUrlPrefix. const config = new Config({ apiKey: "ADYEN_API_KEY", environment: EnvironmentEnum.TEST }); const client = new Client(config); // Create the request object(s) const paymentRequest = { amount: { value: 1000, currency: "EUR" }, paymentMethod: { type: "bcmc", storedPaymentMethodId: "7219687191761347" }, reference: "YOUR_ORDER_NUMBER", merchantAccount: "YOUR_MERCHANT_ACCOUNT", shopperReference: "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", shopperInteraction: "ContAuth", recurringProcessingModel: "Subscription" } // Send the request const checkoutAPI = new CheckoutAPI(client); const response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: "UUID" }); ``` #### Go ```go // Adyen Go API Library v21.0.0 import ( "context" "github.com/adyen/adyen-go-api-library/v21/src/common" "github.com/adyen/adyen-go-api-library/v21/src/adyen" "github.com/adyen/adyen-go-api-library/v21/src/checkout" ) // For the LIVE environment, also include your liveEndpointUrlPrefix. client := adyen.NewClient(&common.Config{ ApiKey: "ADYEN_API_KEY", Environment: common.TestEnv, }) // Create the request object(s) amount := checkout.Amount{ Currency: "EUR", Value: 1000, } cardDetails := checkout.CardDetails{ StoredPaymentMethodId: common.PtrString("7219687191761347"), Type: common.PtrString("bcmc"), } paymentRequest := checkout.PaymentRequest{ Reference: "YOUR_ORDER_NUMBER", Amount: amount, MerchantAccount: "YOUR_MERCHANT_ACCOUNT", RecurringProcessingModel: common.PtrString("Subscription"), PaymentMethod: checkout.CardDetailsAsCheckoutPaymentMethod(&cardDetails), ShopperInteraction: common.PtrString("ContAuth"), ShopperReference: common.PtrString("YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j"), } // Send the request service := client.Checkout() req := service.PaymentsApi.PaymentsInput().IdempotencyKey("UUID").PaymentRequest(paymentRequest) res, httpRes, err := service.PaymentsApi.Payments(context.Background(), req) ``` #### Python ```py # Adyen Python API Library v13.6.0 import Adyen adyen = Adyen.Adyen() adyen.client.xapikey = "ADYEN_API_KEY" # For the LIVE environment, also include your liveEndpointUrlPrefix. adyen.client.platform = "test" # The environment to use library in. # Create the request object(s) json_request = { "amount": { "value": 1000, "currency": "EUR" }, "paymentMethod": { "type": "bcmc", "storedPaymentMethodId": "7219687191761347" }, "reference": "YOUR_ORDER_NUMBER", "merchantAccount": "YOUR_MERCHANT_ACCOUNT", "shopperReference": "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", "shopperInteraction": "ContAuth", "recurringProcessingModel": "Subscription" } # Send the request result = adyen.checkout.payments_api.payments(request=json_request, idempotency_key="UUID") ``` #### Ruby ```rb # Adyen Ruby API Library v10.4.0 require "adyen-ruby-api-library" adyen = Adyen::Client.new adyen.api_key = 'ADYEN_API_KEY' # For the LIVE environment, also include your liveEndpointUrlPrefix. adyen.env = :test # Set to "live" for live environment # Create the request object(s) request_body = { :amount => { :value => 1000, :currency => 'EUR' }, :paymentMethod => { :type => 'bcmc', :storedPaymentMethodId => '7219687191761347' }, :reference => 'YOUR_ORDER_NUMBER', :merchantAccount => 'YOUR_MERCHANT_ACCOUNT', :shopperReference => 'YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j', :shopperInteraction => 'ContAuth', :recurringProcessingModel => 'Subscription' } # Send the request result = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' => 'UUID' }) ``` #### NodeJS (TypeScript) ```ts // Adyen Node API Library v29.0.0 import { Client, CheckoutAPI, Types } from "@adyen/api-library"; // For the LIVE environment, also include your liveEndpointUrlPrefix. const config = new Config({ apiKey: "ADYEN_API_KEY", environment: EnvironmentEnum.TEST }); const client = new Client(config); // Create the request object(s) const amount: Types.checkout.Amount = { currency: "EUR", value: 1000 }; const cardDetails: Types.checkout.CardDetails = { storedPaymentMethodId: "7219687191761347", type: Types.checkout.CardDetails.TypeEnum.Bcmc }; const paymentRequest: Types.checkout.PaymentRequest = { reference: "YOUR_ORDER_NUMBER", amount: amount, merchantAccount: "YOUR_MERCHANT_ACCOUNT", recurringProcessingModel: Types.checkout.PaymentRequest.RecurringProcessingModelEnum.Subscription, paymentMethod: cardDetails, shopperInteraction: Types.checkout.PaymentRequest.ShopperInteractionEnum.ContAuth, shopperReference: "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j" }; // Send the request const checkoutAPI = new CheckoutAPI(client); const response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: "UUID" }); ``` ## 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](#routing) | 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"`. ```js "paymentMethod": { "type": "bcmc", "number": "4871049999999910", "holderName": "DECLINED", "expiryMonth": "03", "expiryYear": "2030" } ``` This gets the following response: ```js "refusalReason": "Refused", "resultCode": "Refused", ``` You can check the status of test payments in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**. [Add Bancontact card](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).