Frontend Capabilities

# Integrate Netbanking

Netbanking is a payment method that enables customers to complete online payments using their bank credentials. It is one of the preferred online payment methods in India.

This tutorial guides you on using Chargebee.js to integrate Netbanking (mandates) on your website and creating a subscription after the user checks out.

Note: Currently, Netbanking mandates are supported only through Razorpay.

# Gateway prerequisites

The following is the list of requirements to fulfil before starting the integration steps.

# 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>
1

# 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

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

Front end code:

function createPaymentIntent() {
  return fetch('/payment-intents', {
    method: 'POST',
    body: JSON.stringify({
      amount: 500,
      currency_code: 'INR',
      payment_method_type: 'netbanking_emandates'
    })
  }).then(function(response) {
    return response.json();
  }).then(function(responseJson) {
    return responseJson.payment_intent;
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Authorize payment intent

Follow these steps to integrate Netbanking (mandates) on your website.

# 1. Set up Netbanking mandates

Set up Netbanking mandates using the steps below:

# a. Load Netbanking mandates integration.

load Netbanking mandates integration using cbInstance.load('netbanking_emandates').

# b. Set payment intent.

Pass the payment_intent object to netBankingHandler.setPaymentIntent(payment_intent).

# c. Fetch the list of banks

Retrieve the list of banks that are eligible for Netbanking (mandates) payment using netBankingHandler.fetchBankList. This list will be used to show bank options in the UI.

Sample code:

# d. Collect bank details

Create an HTML form to collect the bank account details of the beneficiary.

Example:

Netbanking (mandates)

# 2. Handle Payment

Use netbanking_emandates and paymentInfo as the input parameter to handlePayment function, as this enables the function to handle Netbanking (mandates) payments.

Note:

Currently, Chargebee JS does not support payments via in-app browsers of Instagram, Facebook and Snapchat.

Example for promises and callbacks

  • Promises
  • Callbacks

On successful authorization, the payment_intent turns authorized, and Chargebee redirects the user back to your website (payment authorization page).

Learn more about the additional functions for netbanking.

# Create a subscription

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API (opens new window).

  • Curl

← Integrate UPI →