# Integrate Bancontact

Bancontact (opens new window) is a popular payment system in Belgium that allows customers to make secure payments using their debit cards. It lets customers make real-time card transactions to buy products and services.

With Chargebee JS, integrating Bancontact into your payment process is easy. If you opt for integration via Adyen, you will need to collect the card details at your end via the Adyen card component or raw card. However, If you choose to integrate via Mollie, Stripe, or Checkout.com (opens new window), Chargebee JS will redirect the customers to an authorized external page to proceed further. Regardless of your payment gateway, Chargebee JS makes it easy and secure to incorporate Bancontact into your payment process.

This tutorial guides you to integrate Bancontact payments on your website using Chargebee.js and creating a subscription after the user checks out.

The below gateways are supported:

# Gateway Prerequisite

Connect a gateway that accepts Bancontact payments to your Chargebee instance. Chargebee supports Bancontact payments through the below gateways:

# Setting up Chargebee JS

# Inserting chargebee.js script in your application**

Include the following script in your HTML page. You need to do this only once per page.

<script src="https://js.chargebee.com/v2/chargebee.js"></script>

# Initializing a Chargebee instance

Inside your JavaScript code, initialize chargebee with the publishable key (opens new window) once the page is loaded and get 'chargebee instance' object. This object is used further to create components.

Example:

var cbInstance = Chargebee.init({
	site: "site-name", // your test site
	domain: "https://mybilling.acme.com" // this is an optional parameter.
    publishableKey: "test__"
})

1
2
3
4
5

Learn more about initializing a Chargebee instance.

# Create a Payment Intent

You should create a payment intent before submitting the form to authorize the payments.

payment_intent performs the essential function of tracking different events involved in a transaction. This includes:

Automatically changing its status based on the outcome of authorization and capture events.
Automatically refunding in case of an error post-payment.

A payment_intent can be created at your server-side using create a payment intent API (opens new window) and returned to the client side. The payment method handler uses the created payment_intent internally to perform authorization.

Here's the sample code to create a payment_intent.

TIP

This must be done from your backend to avoid exposing sensitive data.

Example:

curl https://{site-name}.chargebee.com/api/v2/payment_intents  \
-u {fullaccess_api_key}:\
-d  amount=500  \
-d  currency_code="EUR"
-d  payment_method_type="bancontact"

1
2
3
4
5

The above step should be initiated as a request from your front end.

Front-end code:

function createPaymentIntent() {
  return fetch("/create-payment-intent", {
    body: JSON.stringify({
      amount: 500,
      currency_code: "EUR",
      payment_method_type: "bancontact",
    }),
  }).then(response => response.json())
    .then(resp => resp.payment_intent);
}

1
2
3
4
5
6
7
8
9
10

# Authorize payment intent

Follow these steps to integrate Bancontact on your website.

# 1. Set up Bancontact

Set up Bancontact using the below steps:

a. Load Bancontact integration load Bancontact integration using cbInstance.load("bancontact").

b. Set payment intent. Pass the payment_intent to bancontactHandler.setPaymentIntent(payment_intent).

# 2. Handle payment

Pass payment method name (bancontact), payment intent, and other applicable payment info mandated by the gateway as input parameters to the cbInstance.handlePayment() function, as this enables the function to handle Bancontact payments.

# Supported `paymentInfo` Parameters

TIP

Parameters marked with * are mandatory inputs.

Bancontact via Adyen

Input type	Supported parameters in paymentInfo
Raw card	card ↳firstName*
	card ↳lastName*
	card ↳number*
	card ↳expiryMonth*
Adyen Card component	card ↳element*

Bancontact via Checkout.com

Supported parameters in `paymentInfo`
paymentInfo ↳userName*
paymentInfo ↳country*

Bancontact via Mollie

Supported parameters in `paymentInfo`
paymentInfo ↳userName*

Bancontact via Stripe

Supported parameters in `paymentInfo`
paymentInfo ↳userName*
paymentInfo ↳userEmail*

Learn more about the entire parameters supported in handlePayment() function.

# Adyen Integration

Chargebee JS supports Adyen card components and Raw Card to handle the payments via Bancontact Adyen.

# Using Adyen Card Components

Include the following code if you are using Adyen's card components (opens new window).

TIP

Note that this approach does not require you to be PCI level 1 compliant.

Sample code:

const checkout = await AdyenCheckout({
	environment: 'test',
	clientKey: "<configured-client-key>",
});
/* https://docs.adyen.com/payment-methods/bancontact/bancontact-card/web-component#include-bancontact-card-in-the-list-of-other-cards */
const cardConfiguration = {
	hasHolderName: true,
	holderNameRequired: true,
	brands: ['bcmc'] // support only bcmc
};
const cardComponent = checkout.create('card', cardConfiguration);
cardComponent.mount('#card-container');
cbInstance.load('bancontact').then((bancontactHandler) => {
	createPaymentIntent().then((intent) => {
		bancontactHandler.setPaymentIntent(intent, {
			adyen: checkout
		});
	})
});

function onSubmit() {
	cbInstance.handlePayment('bancontact', {
		paymentInfo: {
			element: cardComponent,
		}
	}).then((intent) => {
		// you can create subscription by using payment_intent
	}).catch((err) => {
		// handle error
	});
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Using raw card details

Include the following code if you are passing raw card details directly to Chargebee.


cbInstance.load('bancontact').then((bancontactHandler) => {
  createPaymentIntent().then((intent) => {
    bancontactHandler.setPaymentIntent(intent, { adyen: checkout }); 
  })
});

function onSubmit() {
  cbInstance.handlePayment('bancontact', {
      paymentInfo: {
          card: {
            firstName: 'John',
            lastName: 'Doe',
            number: '6703444444444449',
            expiryMonth: '03',
            expiryYear: '2030'
          }
      }
  }).then((intent) => {
    // you can create subscription by using payment_intent
  }).catch((err) => {
    // handle error
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Integration via other gateways

If you have integrated via Checkout.com (opens new window), Mollie, and Stripe on successful authorization when the payment_intent turns authorized, Chargebee redirects the user back to your website (payment authorization page).