Bancontact integration with Chargebee.js

Bancontact 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, 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:

Set up Chargebee.js

Include the Chargebee.js script on your page and initialize a Chargebee instance before you start. For the script tag, the Chargebee.init options, and the tearDown() caveat, see Set up Chargebee.js.

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

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"

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

Frontend code:

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

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.

The fields to pass in paymentInfo depend on the gateway. For Adyen, pass either the Adyen card component in element or raw card details in card. For Checkout.com, Mollie, and Stripe, pass the payer's details in userName and userEmail; Checkout.com also requires country.

Because Smart routing can select any of your configured gateways, pass the fields required by every gateway you have enabled for Bancontact. For the complete paymentInfo reference, see Bancontact handlePayment().

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.

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

Using raw card details

Include the following code if you are passing raw card details directly to Chargebee. This snippet reuses the checkout instance created with AdyenCheckout in the Adyen card components example above.

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

Integration via other gateways

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