{"title":"Bancontact card Drop-in integration","category":"default","creationDate":1671453240,"content":"<p>A Bancontact card payment is like a regular <a href=\"\/pt\/payment-methods\/cards\">card payment<\/a>, except for the following:<\/p>\n<ul>\n<li>There is no CVC. For co-badged cards, the CVC field can still appear.<\/li>\n<li><a href=\"\/pt\/online-payments\/3d-secure\">3D Secure authentication<\/a> is mandatory.<\/li>\n<li>Separate captures are not supported.<\/li>\n<\/ul>\n<p>This page explains how to add Bancontact card to your existing Web Drop-in integration.<\/p>\n<p>Our <a href=\"\/pt\/online-payments\/drop-in-web\">Web Drop-in<\/a> renders the Bancontact card in your payment form, securely collects sensitive card information, and redirects the shopper to perform 3D Secure authentication.<\/p>\n<h2>Requirements<\/h2>\n<p>Select the <a href=\"\/pt\/online-payments\/build-your-integration\">server-side flow<\/a> that your integration uses:<\/p>\n\n<div id=\"tabeou2S\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Sessions flow&quot;,&quot;content&quot;:&quot;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Make sure that you have built a Sessions flow &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow?platform=Web&amp;amp;integration=Drop-in\\&quot;&gt;Web Drop-in integration&lt;\\\/a&gt;. &lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin, &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;add Bancontact card in your Customer Area&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&quot;,&quot;altTitle&quot;:&quot;sessions&quot;,&quot;oldTabId&quot;:&quot;sessions-requirements_1&quot;,&quot;relation&quot;:&quot;sessions&quot;},{&quot;title&quot;:&quot;Advanced flow&quot;,&quot;content&quot;:&quot;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Make sure that you have built an Advanced flow &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/advanced-flow?platform=Web&amp;amp;integration=Drop-in\\&quot;&gt;Web Drop-in integration&lt;\\\/a&gt;. &lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin, &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;add Bancontact card in your Customer Area&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&quot;,&quot;altTitle&quot;:&quot;advanced&quot;,&quot;oldTabId&quot;:&quot;advanced-requirements_2&quot;,&quot;relation&quot;:&quot;advanced&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2>Import resources for v6<\/h2>\n<p>If you are using Web Drop-in v6, import the resources you need for Bancontact card:<\/p>\n<pre><code class=\"language-js\">import { AdyenCheckout, } from '@adyen\/adyen-web'<\/code><\/pre>\n<h2>API reference<\/h2>\n<p>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:<\/p>\n<ul>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a>&#58; This is the default with <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Drop-in\">Drop-in v5.0.0<\/a> or later.<\/li>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a>&#58; If you implemented an <a href=\"\/pt\/online-payments\/build-your-integration\">additional use case<\/a>.<\/li>\n<\/ul>\n<h2>Optional Drop-in configuration<\/h2>\n<p>If you want to add optional configuration, include this in a configuration object.<\/p>\n<table>\n<thead>\n<tr>\n<th>Parameter name<\/th>\n<th>Description<\/th>\n<th>Default<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>enableStoreDetails<\/code><\/td>\n<td>Set to <strong>true<\/strong> to show the checkbox for saving the card details for recurring payments.<\/td>\n<td><strong>false<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>hasHolderName<\/code><\/td>\n<td>Set to\u00a0<strong>true<\/strong>\u00a0to show the input field for the cardholder name.<\/td>\n<td><strong>false<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>holderNameRequired<\/code><\/td>\n<td>Set to\u00a0<strong>true<\/strong>\u00a0to make the cardholder name a required field. To show the field, you also need to set <code>hasHolderName<\/code> to <strong>true<\/strong>.<\/td>\n<td><strong>false<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>holderName<\/code><\/td>\n<td>String that is used to prefill the cardholder name field.<\/td>\n<td>Empty<\/td>\n<\/tr>\n<tr>\n<td><code>positionHolderNameOnTop<\/code><br> \u00a0<strong>Added in v4.2.0<\/strong><\/td>\n<td>Renders the cardholder name field at the top of the payment form.<\/td>\n<td><strong>false<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>name<\/code><\/td>\n<td>String that is used to display the payment method name to the shopper.<\/td>\n<td>Depends on the <code>shopperLocale<\/code> specified in <code>\/paymentMethods<\/code> request.<\/td>\n<\/tr>\n<tr>\n<td><code>styles<\/code><\/td>\n<td>Set a style object to\u00a0customize the  card input fields. For a list of supported properties, refer to <a href=\"\/pt\/payment-methods\/cards\/custom-card-integration#styling\">Styling card input fields<\/a>.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><code>minimumExpiryDate<\/code><\/td>\n<td><div data-component-wrapper=\"tag\">\n    <tag :variant=&quot;success&quot;>\n        v 4.3.0\n    <\/tag>\n<\/div>\n If a shopper enters a date that is earlier than specified here, they will see the following error: <br> \"Your card expires before check out date.\"  <br> Format: <code>mm\/yy<\/code><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><code>brands<\/code><\/td>\n<td>Array of card brands that will be recognized.<\/td>\n<td><code>['bcmc','maestro','visa']<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>brandsConfiguration<\/code><br> \u00a0<strong>Added in v4.5.0<\/strong><\/td>\n<td>Object where you can customize the icons for different brands. For example, to customize the icon for Visa, include inside the <code>brandsConfiguration<\/code>:  <br>  <code>visa: { icon: 'https:\/\/...' }<\/code><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><code>showBrandIcon<\/code><\/td>\n<td>Set to\u00a0<strong>false<\/strong>\u00a0 to not show the brand logo when the card brand has been recognized.<\/td>\n<td><strong>true<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>showBrandsUnderCardNumber<\/code><br> \u00a0<strong>Added in v5.12.0<\/strong><\/td>\n<td>Shows brand logos under the card number field when the shopper selects the card payment method. <br>  <br> 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. <\/td>\n<td><strong>true<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>billingAddressRequired<\/code><br> \u00a0<strong>Added in v3.5.0<\/strong><\/td>\n<td>Set to <strong>true<\/strong> to collect the shopper's billing address.<\/td>\n<td><strong>false<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>billingAddressAllowedCountries<\/code><\/td>\n<td>Specify allowed country codes for the billing address. For example, <code>['US', 'CA', 'BR']<\/code>.<\/td>\n<td>The <strong>Country<\/strong> field dropdown menu shows a list of all countries\/regions.<\/td>\n<\/tr>\n<tr>\n<td><code>data<\/code><\/td>\n<td>Object that contains placeholder information that you can use to prefill fields. <br> For example: <br> - <code>holderName<\/code>: Placeholder for the cardholder name field. <br> -  <code>billingAddress<\/code>: Object that contains placeholder information for the billing address such as <code>street<\/code>, <code>postalCode<\/code>, <code>city<\/code>, <code>country<\/code>, and <code>stateOrProvince<\/code>.<\/td>\n<td>Empty<\/td>\n<\/tr>\n<tr>\n<td><code>autoFocus<\/code><\/td>\n<td>Automatically move the focus to the date field when the entered card number reaches the expected length. <br><br> Added in v5.8.0:<br> the focus also moves to the date field when the entered card number reaches the expected length.<\/td>\n<td><strong>true<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>SRConfig<\/code> <a id=\"screen-reader-config\"><\/a><\/td>\n<td>Object for configuring screen reader behavior. Does not affect what gets rendered in the checkout form.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><code>SRConfig.collateErrors<\/code><\/td>\n<td>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.<\/td>\n<td><strong>true<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>SRConfig.moveFocus<\/code><\/td>\n<td>Indicates if focus automatically switches to the first field with an error when the shopper selects the <strong>Pay<\/strong> button. <br> Can only be set if <code>SRConfig.collateErrors<\/code> is <strong>true<\/strong>.<\/td>\n<td><strong>false<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>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.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Bancontact card configuration'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;const bcmcConfiguration = {\\n    hasHolderName: true,\\n    holderNameRequired: true,\\n    enableStoreDetails: true,\\n    name: 'Bancontact card'\\n};&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>You can also customize your shopper's experience when specific events occur. For more information, refer to <a href=\"\/pt\/payment-methods\/cards\/web-drop-in#events\">Events<\/a>.<\/p>\n<p>Include the <code>bcmcConfiguration<\/code> object when <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Drop-in#create-instance\">creating a configuration object for Drop-in<\/a>:<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'AdyenCheckout configuration'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"const dropinConfiguration = {\\n  \\\/\\\/ ...  other required configuration\\n  paymentMethodsConfiguration: {\\n    bcmc: bcmcConfiguration\\n  }\\n};\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>Pass the Drop-in configuration object when you mount the instance of Drop-in:<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Pass the Drop-in configuration object'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"\\\/\\\/ Create an instance of AdyenCheckout.\\nconst checkout = await AdyenCheckout(checkoutConfiguration);\\n\\n\\\/\\\/ Pass the Drop-in configuration object that you created.\\nconst dropin = new Dropin(checkout, dropinConfiguration).mount(#bcmc-container)\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2>Include Bancontact card in the list of other cards<\/h2>\n<p>By default, Drop-in renders Bancontact card separately from other <a href=\"\/pt\/payment-methods\/cards\/\">cards<\/a>. Alternatively, you can include Bancontact card in the list of other cards. To do so, when <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow\/?platform=Web&amp;integration=Components#adyencheckout-configuration\">creating AdyenCheckout configuration<\/a>:<\/p>\n<ol>\n<li>\n<p>Include <strong>bcmc<\/strong> in the <code>blockedPaymentMethods<\/code> array when making a <a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/post\/sessions\" class=\"codeLabel external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a> or  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/paymentMethods<\/a> request. This removes the separate Bancontact card Component.<\/p>\n<pre><code class=\"language-js\">const configuration = {\n  environment: 'test', \/\/ Change to 'live' for the live environment.\n  clientKey: 'test_870be2...',\n  \/\/ ...  other configuration\n  blockedPaymentMethods: ['bcmc']\n});<\/code><\/pre>\n<\/li>\n<li>\n<p>Include <strong>bcmc<\/strong> in the <code>brands<\/code> array of the <code>card<\/code> payment method:<\/p>\n<pre><code class=\"language-js\">const configuration = {\n  environment: 'test', \/\/ Change to 'live' for the live environment.\n  clientKey: 'test_870be2...',\n  \/\/ ...  other configuration\n  paymentMethodsConfiguration: {\n    card: {\n      hasHolderName: true,\n      holderNameRequired: true,\n      name: 'Credit or debit card',\n      brands: ['mc','visa','amex', 'bcmc']\n    }\n  }\n});<\/code><\/pre>\n<\/li>\n<\/ol>\n<h2>Recurring<\/h2>\n<p>Bancontact supports <a href=\"\/pt\/online-payments\/tokenization\/\">tokenization<\/a> for recurring payments.<\/p>\n<div class=\"notices yellow\">\n<p>We strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments.<\/p>\n<\/div>\n<p>You can use recurring transactions through the Bancontact Wallet Initiated Program (WIP).<\/p>\n<h3 id=\"recurring-wip\">Bancontact Wallet Initiated Program<\/h3>\n<p>The Bancontact Wallet Initiated Program (WIP) is a service that streamlines checkout and supports subscription-based billing. It offers the following:<\/p>\n<ul>\n<li><strong>Bancontact One-Click Pay<\/strong> to speed up checkout and boost conversion rates<\/li>\n<li><strong>Bancontact Recurring<\/strong> to support merchant-initiated recurring or subscription payments<\/li>\n<\/ul>\n<p>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 <a href=\"https:\/\/ca-test.adyen.com\/ca\/ca\/contactUs\/support.shtml?form=other\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Support Team<\/a>.<\/p>\n<p>When you enable Bancontact WIP, transaction amount limits apply to ensure controlled and secure payments.<\/p>\n<p>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.<\/p>\n<h3 id=\"recurring-wip\">Make a recurring payment<\/h3>\n<p>To make recurring payments, you need to:<\/p>\n<ol>\n<li><a href=\"#create-a-token\">Create a shopper token<\/a>.<\/li>\n<li><a href=\"#make-payment-with-token\">Use the token to make future payments for the shopper<\/a>.<\/li>\n<\/ol>\n<p>To test recurring payments, contact our <a href=\"https:\/\/ca-test.adyen.com\/ca\/ca\/contactUs\/support.shtml?form=other\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Support Team<\/a> to configure your test environment.<\/p>\n<h3 id=\"create-a-token\">Create a token<\/h3>\n<p>To create a token, include in your <a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/post\/sessions\" class=\"codeLabel external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a> or  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a> request:<\/p>\n<ul>\n<li><code>storePaymentMethod<\/code>: <strong>true<\/strong><\/li>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments#request-shopperReference\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">shopperReference<\/a>&#58; Your unique identifier for the shopper (minimum length three characters).<\/li>\n<\/ul>\n<p>When the payment has been settled, you receive a  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Tokenization-webhooks\/latest\/post\/recurring.token.created\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">recurring.token.created<\/a> <a href=\"\/pt\/development-resources\/webhooks\">webhook<\/a> containing:<\/p>\n<ul>\n<li><code>type<\/code>: <strong>recurring.token.created<\/strong><\/li>\n<li><code>shopperReference<\/code>: your unique identifier for the shopper.<\/li>\n<li><code>eventId<\/code>: The <code>pspReference<\/code> of the initial payment.<\/li>\n<li><code>storedPaymentMethodId<\/code>:  This is the token that you need to make recurring payments for this shopper.<\/li>\n<\/ul>\n<div class=\"notices green\">\n<p>Make sure that your server is able to receive the <a href=\"\/pt\/development-resources\/webhooks\/webhook-types\/#other-webhooks\">Recurring tokens life cycle events<\/a> webhook. You can <a href=\"\/pt\/development-resources\/webhooks\/#set-up-webhooks-in-your-customer-area\">set up this webhook in your Customer Area<\/a>.<\/p>\n<\/div>\n<h3 id=\"make-payment-with-token\">Make a payment with a token<\/h3>\n<p>To make a payment with the token, include in your  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a> request:<\/p>\n<ul>\n<li><code>paymentMethod.storedPaymentMethodId<\/code>: The <code>storedPaymentMethodId<\/code> from the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Tokenization-webhooks\/latest\/post\/recurring.token.created\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">recurring.token.created<\/a> webhook. You can also get this value by using the <a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/Recurring\/latest\/listRecurringDetails\" class=\"codeLabel external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/listRecurringDetails<\/a> endpoint.<\/li>\n<li><code>shopperReference<\/code>: The unique shopper identifier that you specified when creating the token.<\/li>\n<li><code>shopperInteraction<\/code>:\u00a0<strong>ContAuth<\/strong>.<\/li>\n<li><code>recurringProcessingModel<\/code>: <strong>Subscription<\/strong> or <strong>UnscheduledCardOnFile<\/strong>.<\/li>\n<\/ul>\n<p>For more information about the <code>shopperInteraction<\/code> and <code>recurringProcessingModel<\/code> fields, refer to <a href=\"\/pt\/online-payments\/tokenization\/\">Tokenization<\/a>.<\/p>\n<p>The following example shows a recurring <strong>Subscription<\/strong> payment using WIP.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"''\" :id=\"'recurring-wip'\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;curl&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v68\\\/payments \\\\\\n-H 'x-api-key: ADYEN_API_KEY' \\\\\\n-H 'content-type: application\\\/json' \\\\\\n-d '{\\n       \\&quot;amount\\&quot;:{\\n          \\&quot;value\\&quot;:1000,\\n          \\&quot;currency\\&quot;:\\&quot;EUR\\&quot;\\n       },\\n       \\&quot;paymentMethod\\&quot;:{\\n          \\&quot;type\\&quot;:\\&quot;bcmc\\&quot;,\\n          \\&quot;storedPaymentMethodId\\&quot;:\\&quot;7219687191761347\\&quot;\\n       },\\n       \\&quot;reference\\&quot;:\\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n       \\&quot;merchantAccount\\&quot;:\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n       \\&quot;shopperReference\\&quot;:\\&quot;YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j\\&quot;,\\n       \\&quot;shopperInteraction\\&quot;:\\&quot;ContAuth\\&quot;,\\n       \\&quot;recurringProcessingModel\\&quot;: \\&quot;Subscription\\&quot;\\n}'&quot;},{&quot;language&quot;:&quot;java&quot;,&quot;tabTitle&quot;:&quot;Java&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Java API Library v39.3.0\\nimport com.adyen.Client;\\nimport com.adyen.enums.Environment;\\nimport com.adyen.model.checkout.*;\\nimport java.time.OffsetDateTime;\\nimport java.util.*;\\nimport com.adyen.model.RequestOptions;\\nimport com.adyen.service.checkout.*;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nClient client = new Client(\\&quot;ADYEN_API_KEY\\&quot;, Environment.TEST);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount()\\n  .currency(\\&quot;EUR\\&quot;)\\n  .value(1000L);\\n\\nCardDetails cardDetails = new CardDetails()\\n  .storedPaymentMethodId(\\&quot;7219687191761347\\&quot;)\\n  .type(CardDetails.TypeEnum.BCMC);\\n\\nPaymentRequest paymentRequest = new PaymentRequest()\\n  .reference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  .amount(amount)\\n  .merchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  .recurringProcessingModel(PaymentRequest.RecurringProcessingModelEnum.SUBSCRIPTION)\\n  .paymentMethod(new CheckoutPaymentMethod(cardDetails))\\n  .shopperInteraction(PaymentRequest.ShopperInteractionEnum.CONTAUTH)\\n  .shopperReference(\\&quot;YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j\\&quot;);\\n\\n\\\/\\\/ Send the request\\nPaymentsApi service = new PaymentsApi(client);\\nPaymentResponse response = service.payments(paymentRequest, new RequestOptions().idempotencyKey(\\&quot;UUID\\&quot;));&quot;},{&quot;language&quot;:&quot;php&quot;,&quot;tabTitle&quot;:&quot;PHP&quot;,&quot;content&quot;:&quot;&lt;?php\\n\\\/\\\/ Adyen PHP API Library v28.2.0\\nuse Adyen\\\\Client;\\nuse Adyen\\\\Environment;\\nuse Adyen\\\\Model\\\\Checkout\\\\Amount;\\nuse Adyen\\\\Model\\\\Checkout\\\\CheckoutPaymentMethod;\\nuse Adyen\\\\Model\\\\Checkout\\\\PaymentRequest;\\nuse Adyen\\\\Service\\\\Checkout\\\\PaymentsApi;\\n\\n$client = new Client();\\n$client-&gt;setXApiKey(\\&quot;ADYEN_API_KEY\\&quot;);\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\n$client-&gt;setEnvironment(Environment::TEST);\\n\\n\\n\\\/\\\/ Create the request object(s)\\n$amount = new Amount();\\n$amount\\n  -&gt;setCurrency(\\&quot;EUR\\&quot;)\\n  -&gt;setValue(1000);\\n\\n$checkoutPaymentMethod = new CheckoutPaymentMethod();\\n$checkoutPaymentMethod\\n  -&gt;setStoredPaymentMethodId(\\&quot;7219687191761347\\&quot;)\\n  -&gt;setType(\\&quot;bcmc\\&quot;);\\n\\n$paymentRequest = new PaymentRequest();\\n$paymentRequest\\n  -&gt;setReference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  -&gt;setAmount($amount)\\n  -&gt;setMerchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  -&gt;setRecurringProcessingModel(\\&quot;Subscription\\&quot;)\\n  -&gt;setPaymentMethod($checkoutPaymentMethod)\\n  -&gt;setShopperInteraction(\\&quot;ContAuth\\&quot;)\\n  -&gt;setShopperReference(\\&quot;YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j\\&quot;);\\n\\n$requestOptions['idempotencyKey'] = 'UUID';\\n\\n\\\/\\\/ Send the request\\n$service = new PaymentsApi($client);\\n$response = $service-&gt;payments($paymentRequest, $requestOptions);&quot;},{&quot;language&quot;:&quot;cs&quot;,&quot;tabTitle&quot;:&quot;C#&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen .net API Library v32.1.1\\nusing Adyen;\\nusing Environment = Adyen.Model.Environment;\\nusing Adyen.Model;\\nusing Adyen.Model.Checkout;\\nusing Adyen.Service.Checkout;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nvar config = new Config()\\n{\\n    XApiKey = \\&quot;ADYEN_API_KEY\\&quot;,\\n    Environment = Environment.Test\\n};\\nvar client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount\\n{\\n  Currency = \\&quot;EUR\\&quot;,\\n  Value = 1000\\n};\\n\\nCardDetails cardDetails = new CardDetails\\n{\\n  StoredPaymentMethodId = \\&quot;7219687191761347\\&quot;,\\n  Type = CardDetails.TypeEnum.Bcmc\\n};\\n\\nPaymentRequest paymentRequest = new PaymentRequest\\n{\\n  Reference = \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount = amount,\\n  MerchantAccount = \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel = PaymentRequest.RecurringProcessingModelEnum.Subscription,\\n  PaymentMethod = new CheckoutPaymentMethod(cardDetails),\\n  ShopperInteraction = PaymentRequest.ShopperInteractionEnum.ContAuth,\\n  ShopperReference = \\&quot;YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nvar service = new PaymentsService(client);\\nvar response = service.Payments(paymentRequest, requestOptions: new RequestOptions { IdempotencyKey = \\&quot;UUID\\&quot;});&quot;},{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;NodeJS (JavaScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.0.0\\nconst { Client, CheckoutAPI } = require('@adyen\\\/api-library');\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst paymentRequest = {\\n  amount: {\\n    value: 1000,\\n    currency: \\&quot;EUR\\&quot;\\n  },\\n  paymentMethod: {\\n    type: \\&quot;bcmc\\&quot;,\\n    storedPaymentMethodId: \\&quot;7219687191761347\\&quot;\\n  },\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  shopperReference: \\&quot;YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j\\&quot;,\\n  shopperInteraction: \\&quot;ContAuth\\&quot;,\\n  recurringProcessingModel: \\&quot;Subscription\\&quot;\\n}\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;},{&quot;language&quot;:&quot;go&quot;,&quot;tabTitle&quot;:&quot;Go&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Go API Library v21.0.0\\nimport (\\n  \\&quot;context\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/common\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/adyen\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/checkout\\&quot;\\n)\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nclient := adyen.NewClient(&amp;common.Config{\\n  ApiKey:      \\&quot;ADYEN_API_KEY\\&quot;,\\n  Environment: common.TestEnv,\\n})\\n\\n\\\/\\\/ Create the request object(s)\\namount := checkout.Amount{\\n  Currency: \\&quot;EUR\\&quot;,\\n  Value: 1000,\\n}\\n\\ncardDetails := checkout.CardDetails{\\n  StoredPaymentMethodId: common.PtrString(\\&quot;7219687191761347\\&quot;),\\n  Type: common.PtrString(\\&quot;bcmc\\&quot;),\\n}\\n\\npaymentRequest := checkout.PaymentRequest{\\n  Reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount: amount,\\n  MerchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel: common.PtrString(\\&quot;Subscription\\&quot;),\\n  PaymentMethod: checkout.CardDetailsAsCheckoutPaymentMethod(&amp;cardDetails),\\n  ShopperInteraction: common.PtrString(\\&quot;ContAuth\\&quot;),\\n  ShopperReference: common.PtrString(\\&quot;YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j\\&quot;),\\n}\\n\\n\\\/\\\/ Send the request\\nservice := client.Checkout()\\nreq := service.PaymentsApi.PaymentsInput().IdempotencyKey(\\&quot;UUID\\&quot;).PaymentRequest(paymentRequest)\\nres, httpRes, err := service.PaymentsApi.Payments(context.Background(), req)&quot;},{&quot;language&quot;:&quot;py&quot;,&quot;tabTitle&quot;:&quot;Python&quot;,&quot;content&quot;:&quot;# Adyen Python API Library v13.6.0\\nimport Adyen\\n\\nadyen = Adyen.Adyen()\\nadyen.client.xapikey = \\&quot;ADYEN_API_KEY\\&quot;\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.client.platform = \\&quot;test\\&quot; # The environment to use library in.\\n\\n# Create the request object(s)\\njson_request = {\\n  \\&quot;amount\\&quot;: {\\n    \\&quot;value\\&quot;: 1000,\\n    \\&quot;currency\\&quot;: \\&quot;EUR\\&quot;\\n  },\\n  \\&quot;paymentMethod\\&quot;: {\\n    \\&quot;type\\&quot;: \\&quot;bcmc\\&quot;,\\n    \\&quot;storedPaymentMethodId\\&quot;: \\&quot;7219687191761347\\&quot;\\n  },\\n  \\&quot;reference\\&quot;: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  \\&quot;merchantAccount\\&quot;: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;shopperReference\\&quot;: \\&quot;YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j\\&quot;,\\n  \\&quot;shopperInteraction\\&quot;: \\&quot;ContAuth\\&quot;,\\n  \\&quot;recurringProcessingModel\\&quot;: \\&quot;Subscription\\&quot;\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request=json_request, idempotency_key=\\&quot;UUID\\&quot;)&quot;},{&quot;language&quot;:&quot;rb&quot;,&quot;tabTitle&quot;:&quot;Ruby&quot;,&quot;content&quot;:&quot;# Adyen Ruby API Library v10.4.0\\nrequire \\&quot;adyen-ruby-api-library\\&quot;\\n\\nadyen = Adyen::Client.new\\nadyen.api_key = 'ADYEN_API_KEY'\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.env = :test # Set to \\&quot;live\\&quot; for live environment\\n\\n# Create the request object(s)\\nrequest_body = {\\n  :amount =&gt; {\\n    :value =&gt; 1000,\\n    :currency =&gt; 'EUR'\\n  },\\n  :paymentMethod =&gt; {\\n    :type =&gt; 'bcmc',\\n    :storedPaymentMethodId =&gt; '7219687191761347'\\n  },\\n  :reference =&gt; 'YOUR_ORDER_NUMBER',\\n  :merchantAccount =&gt; 'YOUR_MERCHANT_ACCOUNT',\\n  :shopperReference =&gt; 'YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j',\\n  :shopperInteraction =&gt; 'ContAuth',\\n  :recurringProcessingModel =&gt; 'Subscription'\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' =&gt; 'UUID' })&quot;},{&quot;language&quot;:&quot;ts&quot;,&quot;tabTitle&quot;:&quot;NodeJS (TypeScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.0.0\\nimport { Client, CheckoutAPI, Types } from \\&quot;@adyen\\\/api-library\\&quot;;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst amount: Types.checkout.Amount = {\\n  currency: \\&quot;EUR\\&quot;,\\n  value: 1000\\n};\\n\\nconst cardDetails: Types.checkout.CardDetails = {\\n  storedPaymentMethodId: \\&quot;7219687191761347\\&quot;,\\n  type: Types.checkout.CardDetails.TypeEnum.Bcmc\\n};\\n\\nconst paymentRequest: Types.checkout.PaymentRequest = {\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  amount: amount,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  recurringProcessingModel: Types.checkout.PaymentRequest.RecurringProcessingModelEnum.Subscription,\\n  paymentMethod: cardDetails,\\n  shopperInteraction: Types.checkout.PaymentRequest.ShopperInteractionEnum.ContAuth,\\n  shopperReference: \\&quot;YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2>Test and go live<\/h2>\n<p>Before making live payments, use the following credentials to test your integration:<\/p>\n<table>\n<thead>\n<tr>\n<th>Card number<\/th>\n<th>Card type<\/th>\n<th>CVV2\/CVC2<\/th>\n<th>Username<\/th>\n<th>Password<\/th>\n<th>Issuing country\/region<\/th>\n<th>Expiry date<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>5127 8809 9999 9990<\/td>\n<td>BCMC \/ Mastercard Debit<\/td>\n<td>BCMC: None <br> Mastercard: 737<\/td>\n<td>user<\/td>\n<td>password<\/td>\n<td>BE<\/td>\n<td>03\/2030<\/td>\n<\/tr>\n<tr>\n<td>6703 4444 4444 4449<\/td>\n<td>BCMC \/ Maestro<\/td>\n<td>None<\/td>\n<td>user<\/td>\n<td>password<\/td>\n<td>BE<\/td>\n<td>03\/2030<\/td>\n<\/tr>\n<tr>\n<td>4871 0499 9999 9910 <a href=\"#routing\"><sup>1<\/sup><\/td>\n<td>BCMC \/ Visa Debit<\/td>\n<td>BCMC: None <br> Visa: 737<\/td>\n<td>user<\/td>\n<td>password<\/td>\n<td>BE<\/td>\n<td>03\/2030<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a id=\"routing\"><\/a> <sup>1<\/sup> Depending on your payment method setup, transactions with this test card are routed to Bancontact or Visa.<\/p>\n<p>You can force a decline using these credentials with <code>\"holderName\": \"DECLINED\"<\/code>.<\/p>\n<pre><code class=\"language-js\">    \"paymentMethod\": {\n      \"type\": \"bcmc\",\n      \"number\": \"4871049999999910\",\n      \"holderName\": \"DECLINED\",\n      \"expiryMonth\": \"03\",\n      \"expiryYear\": \"2030\"\n    }<\/code><\/pre>\n<p>This gets the following response:<\/p>\n<pre><code class=\"language-js\">    \"refusalReason\": \"Refused\",\n    \"resultCode\": \"Refused\",<\/code><\/pre>\n<p>You can check the status of test payments in your\u00a0<a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>\u00a0&gt;\u00a0<strong>Transactions<\/strong>\u00a0&gt;\u00a0<strong>Payments<\/strong>.<\/p>\n<p><a href=\"\/pt\/payment-methods\/add-payment-methods\">Add Bancontact card<\/a> in your <a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">live Customer Area<\/a>.<\/p>","url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/bancontact\/bancontact-card\/web-drop-in","articleFields":{"description":"Add Bancontact card to an existing Drop-in integration.","parameters":{"integration":"Drop-in","platform":"Web","integration_guide_url":"build-your-integration\/sessions-flow?platform=Web&integration=Drop-in","component_name":"Drop-in","component_name_capitalized":"Drop-in","payment_method":"Bancontact card","payment_method_type":"bcmc","component_js_const":"bcmc","currency_code":"EUR","return_url":"https:\/\/your-company.example.com\/checkout?shopperOrder=12xy.."},"feedback_component":true,"last_edit_on":"19-12-2022 13:34"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/bancontact\/bancontact-card\/web-drop-in","title":"Bancontact card Drop-in integration","content":"A Bancontact card payment is like a regular card payment, except for the following:\n\nThere is no CVC. For co-badged cards, the CVC field can still appear.\n3D Secure authentication is mandatory.\nSeparate captures are not supported.\n\nThis page explains how to add Bancontact card to your existing Web Drop-in integration.\nOur 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.\nRequirements\nSelect the server-side flow that your integration uses:\n\n\n    \n        \n        \n    \n\n\nImport resources for v6\nIf you are using Web Drop-in v6, import the resources you need for Bancontact card:\nimport { AdyenCheckout, } from '@adyen\/adyen-web'\nAPI reference\nYou 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:\n\n \/sessions&#58; This is the default with Drop-in v5.0.0 or later.\n \/payments&#58; If you implemented an additional use case.\n\nOptional Drop-in configuration\nIf you want to add optional configuration, include this in a configuration object.\n\n\n\nParameter name\nDescription\nDefault\n\n\n\n\nenableStoreDetails\nSet to true to show the checkbox for saving the card details for recurring payments.\nfalse\n\n\nhasHolderName\nSet to\u00a0true\u00a0to show the input field for the cardholder name.\nfalse\n\n\nholderNameRequired\nSet to\u00a0true\u00a0to make the cardholder name a required field. To show the field, you also need to set hasHolderName to true.\nfalse\n\n\nholderName\nString that is used to prefill the cardholder name field.\nEmpty\n\n\npositionHolderNameOnTop \u00a0Added in v4.2.0\nRenders the cardholder name field at the top of the payment form.\nfalse\n\n\nname\nString that is used to display the payment method name to the shopper.\nDepends on the shopperLocale specified in \/paymentMethods request.\n\n\nstyles\nSet a style object to\u00a0customize the  card input fields. For a list of supported properties, refer to Styling card input fields.\n\n\n\nminimumExpiryDate\n\n    \n        v 4.3.0\n    \n\n 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\n\n\n\nbrands\nArray of card brands that will be recognized.\n['bcmc','maestro','visa']\n\n\nbrandsConfiguration \u00a0Added in v4.5.0\nObject where you can customize the icons for different brands. For example, to customize the icon for Visa, include inside the brandsConfiguration:    visa: { icon: 'https:\/\/...' }\n\n\n\nshowBrandIcon\nSet to\u00a0false\u00a0 to not show the brand logo when the card brand has been recognized.\ntrue\n\n\nshowBrandsUnderCardNumber \u00a0Added in v5.12.0\nShows 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. \ntrue\n\n\nbillingAddressRequired \u00a0Added in v3.5.0\nSet to true to collect the shopper's billing address.\nfalse\n\n\nbillingAddressAllowedCountries\nSpecify allowed country codes for the billing address. For example, ['US', 'CA', 'BR'].\nThe Country field dropdown menu shows a list of all countries\/regions.\n\n\ndata\nObject 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.\nEmpty\n\n\nautoFocus\nAutomatically 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.\ntrue\n\n\nSRConfig \nObject for configuring screen reader behavior. Does not affect what gets rendered in the checkout form.\n\n\n\nSRConfig.collateErrors\nIndicates 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.\ntrue\n\n\nSRConfig.moveFocus\nIndicates 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.\nfalse\n\n\n\nThe 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.\n\n    \n\nYou can also customize your shopper's experience when specific events occur. For more information, refer to Events.\nInclude the bcmcConfiguration object when creating a configuration object for Drop-in:\n\n    \n\nPass the Drop-in configuration object when you mount the instance of Drop-in:\n\n    \n\nInclude Bancontact card in the list of other cards\nBy 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:\n\n\nInclude bcmc in the blockedPaymentMethods array when making a \/sessions or  \/paymentMethods request. This removes the separate Bancontact card Component.\nconst configuration = {\n  environment: 'test', \/\/ Change to 'live' for the live environment.\n  clientKey: 'test_870be2...',\n  \/\/ ...  other configuration\n  blockedPaymentMethods: ['bcmc']\n});\n\n\nInclude bcmc in the brands array of the card payment method:\nconst configuration = {\n  environment: 'test', \/\/ Change to 'live' for the live environment.\n  clientKey: 'test_870be2...',\n  \/\/ ...  other configuration\n  paymentMethodsConfiguration: {\n    card: {\n      hasHolderName: true,\n      holderNameRequired: true,\n      name: 'Credit or debit card',\n      brands: ['mc','visa','amex', 'bcmc']\n    }\n  }\n});\n\n\nRecurring\nBancontact supports tokenization for recurring payments.\n\nWe strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments.\n\nYou can use recurring transactions through the Bancontact Wallet Initiated Program (WIP).\nBancontact Wallet Initiated Program\nThe Bancontact Wallet Initiated Program (WIP) is a service that streamlines checkout and supports subscription-based billing. It offers the following:\n\nBancontact One-Click Pay to speed up checkout and boost conversion rates\nBancontact Recurring to support merchant-initiated recurring or subscription payments\n\nYou 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.\nWhen you enable Bancontact WIP, transaction amount limits apply to ensure controlled and secure payments.\nShoppers 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.\nMake a recurring payment\nTo make recurring payments, you need to:\n\nCreate a shopper token.\nUse the token to make future payments for the shopper.\n\nTo test recurring payments, contact our Support Team to configure your test environment.\nCreate a token\nTo create a token, include in your \/sessions or  \/payments request:\n\nstorePaymentMethod: true\n shopperReference&#58; Your unique identifier for the shopper (minimum length three characters).\n\nWhen the payment has been settled, you receive a  recurring.token.created webhook containing:\n\ntype: recurring.token.created\nshopperReference: your unique identifier for the shopper.\neventId: The pspReference of the initial payment.\nstoredPaymentMethodId:  This is the token that you need to make recurring payments for this shopper.\n\n\nMake sure that your server is able to receive the Recurring tokens life cycle events webhook. You can set up this webhook in your Customer Area.\n\nMake a payment with a token\nTo make a payment with the token, include in your  \/payments request:\n\npaymentMethod.storedPaymentMethodId: The storedPaymentMethodId from the  recurring.token.created webhook. You can also get this value by using the \/listRecurringDetails endpoint.\nshopperReference: The unique shopper identifier that you specified when creating the token.\nshopperInteraction:\u00a0ContAuth.\nrecurringProcessingModel: Subscription or UnscheduledCardOnFile.\n\nFor more information about the shopperInteraction and recurringProcessingModel fields, refer to Tokenization.\nThe following example shows a recurring Subscription payment using WIP.\n\n    \n\nTest and go live\nBefore making live payments, use the following credentials to test your integration:\n\n\n\nCard number\nCard type\nCVV2\/CVC2\nUsername\nPassword\nIssuing country\/region\nExpiry date\n\n\n\n\n5127 8809 9999 9990\nBCMC \/ Mastercard Debit\nBCMC: None  Mastercard: 737\nuser\npassword\nBE\n03\/2030\n\n\n6703 4444 4444 4449\nBCMC \/ Maestro\nNone\nuser\npassword\nBE\n03\/2030\n\n\n4871 0499 9999 9910 1\nBCMC \/ Visa Debit\nBCMC: None  Visa: 737\nuser\npassword\nBE\n03\/2030\n\n\n\n 1 Depending on your payment method setup, transactions with this test card are routed to Bancontact or Visa.\nYou can force a decline using these credentials with \"holderName\": \"DECLINED\".\n    \"paymentMethod\": {\n      \"type\": \"bcmc\",\n      \"number\": \"4871049999999910\",\n      \"holderName\": \"DECLINED\",\n      \"expiryMonth\": \"03\",\n      \"expiryYear\": \"2030\"\n    }\nThis gets the following response:\n    \"refusalReason\": \"Refused\",\n    \"resultCode\": \"Refused\",\nYou can check the status of test payments in your\u00a0Customer Area\u00a0&gt;\u00a0Transactions\u00a0&gt;\u00a0Payments.\nAdd Bancontact card in your live Customer Area.","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Bancontact","lvl3":"Bancontact card","lvl4":"Bancontact card Drop-in integration"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/bancontact","lvl3":"https:\/\/docs.adyen.com\/pt\/payment-methods\/bancontact\/bancontact-card","lvl4":"\/pt\/payment-methods\/bancontact\/bancontact-card\/web-drop-in"},"levels":5,"category":"Payment method","category_color":"green","tags":["Bancontact","Drop-in","integration"]}}