Bancontact card Component

A Bancontact card payment is like a regular card payment, except that there is no security code, and 3D Secure 1 is mandatory.

Our Component renders the Bancontact card in your payment form, and securely collects sensitive card information, so it doesn't touch your server.

When making a Bancontact payment, you need to:

1. Provide browserInfo when making a payment request.
2. Use createFromAction to redirect the shopper to perform 3D Secure authentication.

Before you begin

This page explains how to add Bancontact card to your existing Web Components integration. The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

Before starting your Bancontact card integration:

1. Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
2. Add Bancontact card in your Customer Area.
   

Show Bancontact card in your payment form

To present the Bancontact card Component in your payment form:

1. From your server, make a POST /paymentMethods request specifying:
   • countryCode: BE
   • amount.currency: EUR

2. Pass the full response from the /paymentMethods call as the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

3. Add the Component:

   a. Create a DOM element for Bancontact card, placing it where you want the form to be rendered:

   <div id="bancontact-card-container"></div>

   b. Create an instance of the Component, and mount it. You can also include the following additional configuration:

   Field	Description	Default
   enableStoreDetails	Set to true to show the check box for saving the card details for recurring payments.	false
   hasHolderName	Set to true to show the input field for the card holder name.	false
   holderNameRequired	Set to true to make the card holder name a required field. To show the field, you additionally need to set hasHolderName to true.	false
   holderName	String that is used to prefill the card holder name field.	Empty
   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.

   const bancontact = checkout.create('bcmc', {
    // Optional configuration
     hasHolderName: true,
     holderNameRequired: true
   }).mount('#bancontact-card-container');

   You can also customize your shopper's experience when specific events occur. For more information, refer to Events.

Include Bancontact card in the list of other cards

Instead of creating a separate Component for the Bancontact card, you can include it in the list of cards rendered by the Card Component.

To render Bancontact card through the Card Component, add 'bcmc' to the brands array when creating an instance of the Card Component.

Make a payment

When the shopper selects to pay, the Component calls the onChange event, which contains a state.data.

1. Pass the state.data to your server.
2. From your server, make a /payments request, specifying:

• paymentMethod: The state.data.paymentMethod contained in the onChange event from your front end.
• browserInfo: The state.data.browserInfo contained in the onChange event from your front end.
• returnURL: The URL where the shopper will be redirected back to after completing 3D Secure authentication. The URL should include the protocol: http:// or https://. You can also include your own additional query parameters, for example, shopper ID or order reference number.

curl https://checkout-test.adyen.com/v65/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
      "amount":{
        "currency":"EUR",
        "value":1000
      },
      "reference":"YOUR_ORDER_NUMBER",
      "{hint:state.data.paymentMethod from onChange or onSubmit}paymentMethod{/hint}": {
        "type": "bcmc",
        "encryptedCardNumber": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        "encryptedExpiryMonth": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        "encryptedExpiryYear": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
      },
      "{hint:state.data.browserInfo from onChange or onSubmit}browserInfo{/hint}":{
        "userAgent":"Mozilla\/5.0 (Windows NT 10.0; Win64; x64) appleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
        "acceptHeader":"text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8"
      },
      "returnUrl":"https://your-company.com/checkout?shopperOrder=12xy..",
      "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
    }'

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"

response = adyen.checkout.payments({
  :amount => {
    :currency => "EUR",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "bcmc",
    :encryptedCardNumber => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    :encryptedExpiryMonth => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    :encryptedExpiryYear => "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
  },
  :returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
})

// Set YOUR_X-API-KEY with the API key from the Customer Area.
// Change to Environment.LIVE and add the Live URL prefix when you're ready to accept live payments.
    Client client = new Client("YOUR_X-API-KEY", Environment.TEST);
    Checkout checkout = new Checkout(client);

    PaymentsRequest paymentsRequest = new PaymentsRequest();
    paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
    Amount amount = new Amount();
    amount.setCurrency("EUR");
    amount.setValue(1000L);
    paymentsRequest.setAmount(amount);
    String encryptedCardNumber = "adyenjs_0_1_18$...encryptedCardNumber";
    String encryptedExpiryMonth = "adyenjs_0_1_18$...encryptedExpiryMonth";
    String encryptedExpiryYear = "adyenjs_0_1_18$...encryptedExpiryYear";
    paymentsRequest.setReference("YOUR_ORDER_NUMBER");
    paymentsRequest.addEncryptedCardData(encryptedCardNumber,encryptedExpiryMonth, encryptedExpiryYear);
    paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");
    PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "EUR",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "bcmc",
    "encryptedCardNumber" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedExpiryMonth" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedExpiryYear" => "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
  ),
  "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);

#Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'EUR'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'paymentMethod': {
      'type': 'bcmc',
      'encryptedCardNumber': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
      'encryptedExpiryMonth': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
      'encryptedExpiryYear': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...'
   },
   'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
})

// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("YOUR_X-API-KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Model.Checkout.Amount("EUR", 1000);
var details = new Model.Checkout.DefaultPaymentMethodDetails{
  Type = "bcmc,
  EncryptedCardNumber = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
  EncryptedExpiryMonth = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
  EncryptedExpiryYear = "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
};
var paymentRequest = new Adyen.Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "EUR", value: 1000 },
    paymentMethod: {
        type: 'bcmc',
        encryptedExpiryMonth: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        encryptedExpiryYear: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        encryptedCardNumber: "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount,
    returnUrl: "https://your-company.com/checkout?shopperOrder=12xy.."
}).then(res => res);

The /payments response contains:

• resultCode: RedirectShopper
• action: Object containing information about the redirect. Pass this to your front end or client app.
• action.paymentData: Store this value on your server — you need to submit this in your /payments/details request when handling the redirect.
• details: Array that contains the key parameter names and the corresponding data type that you should expect when the shopper is redirected back to your returnURL. These are also the parameters that you need to submit in your /payments/details when handling the redirect.

  {
     "resultCode": "RedirectShopper",
     "action": {
         "data": {
             "MD": "OEVudmZVMUlkWjd0MDNwUWs2bmhSdz09...",
             "PaReq": "eNpVUttygjAQ/RXbDyAXBYRZ00HpTH3wUosPfe...",
             "TermUrl": "https://your-company.com/checkout?shopperOrder=12xy.."
         },
         "method": "POST",
         "paymentData": "Ab02b4c0!BQABAgA4e3wGkhVah4CJL19qdegdmm9E...",
         "paymentMethodType": "bcmc",
         "type": "redirect",
         "url": "https://test.adyen.com/hpp/3d/validate.shtml"
     },
     "details": [
         {
             "key": "MD",
             "type": "text"
         },
         {
             "key": "PaRes",
             "type": "text"
         }
     ],
     ...
  }

3. Pass the action object to your front end.

Handle the redirect

1. Call createFromAction and pass the action object from the previous step. This will return a new Component that you need to mount:

      checkout.createFromAction(action).mount('#my-container');

   The Component redirects the shopper to perform 3D Secure authentication, and then back to your website with an HTTP POST.

2. After the shopper is redirected back to your website, submit the authentication results by making a /payments/details request. For more information and detailed instructions, refer to HTTP POST redirects.

Present the payment result

Use the resultCode from the /payments/details response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a notification webhook.

For Bancontact card payments, you can receive the following resultCode values:

Recurring payments

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 /payments request:

• storePaymentMethod: true
• shopperReference: Your unique identifier for the shopper (minimum length three characters).

When the payment has been settled, you receive a notification 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 Recurring transaction types.

curl https://checkout-test.adyen.com/v65/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
       "amount":{
          "value":1000,
          "currency":"EUR"
       },
       "paymentMethod":{
          "type":"sepadirectdebit",
          "recurringDetailReference":"7219687191761347"
       },
       "reference":"YOUR_ORDER_NUMBER",
       "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
       "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
       "shopperInteraction":"ContAuth",
       "recurringProcessingModel": "Subscription"
}'

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"
 
response = adyen.checkout.payments({
  :amount => {
    :currency => "EUR",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "sepadirectdebit",
    :recurringDetailReference => "7219687191761347"
  },
  :returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
  :shopperReference => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT",
  :shopperInteraction => "ContAuth",
  :recurringProcessingModel => "Subscription"
})

// Set YOUR_X-API-KEY with the API key from the Customer Area.
// Change to Environment.LIVE and add the Live URL prefix when you're ready to accept live payments.
Client client = new Client("YOUR_X-API-KEY", Environment.TEST);
Checkout checkout = new Checkout(client);

PaymentsRequest paymentsRequest = new PaymentsRequest();

String merchantAccount = "YOUR_MERCHANT_ACCOUNT";
paymentsRequest.setMerchantAccount(merchantAccount);

Amount amount = new Amount();
amount.setCurrency("EUR");
amount.setValue(15000L);
paymentsRequest.setAmount(amount);

DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
paymentMethodDetails.setRecurringDetailReference("7219687191761347");
paymentMethodDetails.setType("sepadirectdebit");
paymentsRequest.setPaymentMethod(paymentMethodDetails);

paymentsRequest.setReference("YOUR_ORDER_NUMBER");
paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");
paymentsRequest.setShopperInteraction("ContAuth");
paymentsRequest.setRecurringProcessingModel("Subscription");

PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "EUR",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "sepadirectdebit",
    "recurringDetailReference" => "7219687191761347"
  ),
  "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
  "shopperReference" => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  "recurringProcessingModel" => "Subscription",
  "shopperInteraction" => "ContAuth",
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);

#Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'EUR'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'paymentMethod': {
      'type': 'sepadirectdebit',
      'recurringDetailReference': '7219687191761347'
   },
   'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
   'shopperReference': 'YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j'
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT',
   'shopperInteraction':'ContAuth',
   'recurringProcessingModel': 'Subscription'
})

// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("YOUR_X-API-KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Model.Checkout.Amount("EUR", 1000);
var details = new Model.Checkout.DefaultPaymentMethodDetails{
  Type = "sepadirectdebit",
  RecurringDetailReference = "7219687191761347"
};
var paymentsRequest = new Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  ShopperReference = "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  RecurringProcessingModel = "Subscription",
  ShopperInteraction = "ContAuth",
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "EUR", value: 1000 },
    paymentMethod: {
        type: 'sepadirectdebit',
        recurringDetailReference: "7219687191761347"
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount,
    shopperReference: "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
    returnUrl: "https://your-company.com/checkout?shopperOrder=12xy..",
    shopperInteraction: "ContAuth",
    recurringProcessingModel: "Subscription"
}).then(res => res);

Test and go live

Before making live payments:

1. Use the following credentials to test your integration:

   Test card number	Expiry date
   6703 4444 4444 4449	10/2020, or 03/2030
   6703 0000 0000 0000 003	10/2020, or 03/2030

   You can check the status of test payments in your Customer Area > Transactions > Payments.
2. Add Bancontact card in your live Customer Area.

See also