Netbanking integration with Chargebee.js

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.

Gateway prerequisites

Complete these steps before you start the integration:

• Configure Razorpay as a gateway and enable netbanking mandates on it — see Razorpay UPI and netbanking.
• Configure Smart routing to select netbanking (mandates) for INR currency.

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.

Example:

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

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

Frontend code:

function createPaymentIntent() {
  return fetch('/payment-intents', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    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;
  });
}

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:

cbInstance.load('netbanking_emandates').then(netBankingHandler => {
  return createPaymentIntent().then(intent => {
    netBankingHandler.setPaymentIntent(intent);
    return netBankingHandler.fetchBankList({
      currency: 'INR'
    });
  })
.then((res) => {
          this.bankList = res.map((bank) => {
            return {
              display_name: bank.name,
              value:  bank.id
            };
          })
        })
});

d. Collect bank details

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

Example:

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.

Example for promises and callbacks

const paymentInfo = {
  "customer" : {
    "firstName" : "Gaurav",
    "lastName" : "Kumar",
    "email": "gaurav@acme.com",
    "phone" : "9999999999"
  },
  "bankAccount" : {
    "bank" : "HDFC",
      "beneficiaryName": "Gaurav Kumar",
      "accountNumber": "1121431121541121",
      "accountType": "savings",
      "ifscCode": "HDFC0000001"
  }
}
cbInstance.handlePayment( "netbanking_emandates",
{
paymentInfo: paymentInfo
})
.then(intent => {
  // SUCCESS!!! payment_intent is authorised.
  var response = fetch('/subscriptions', {
    method: 'POST',
    body: JSON.stringify({
      paymentIntentId: intent.id,
      plan_id: 'pro_plan',
      plan_quantity: 1,
      billingAddress: {...}, // provide billing address
      customer: {...} // provide customer details if the subscription is to be created for an existing <code>customer</code> in Chargebee.
    })
  }).then(function(response) {
    return response.json();
  });
}).catch(err => {
  // OOPS!!! payment_intent is not authorised.
})

const paymentInfo = {
  "customer" : {
    "firstName" : "Gaurav",
    "lastName" : "Kumar",
    "email": "gaurav@acme.com",
    "phone" : "9999999999"
  },
  "bankAccount" : {
    "bank" : "HDFC",
      "beneficiaryName": "Gaurav Kumar",
      "accountNumber": "1121431121541121",
      "accountType": "savings",
      "ifscCode": "HDFC0000001"
  }
}
const callbacks = {
  success: (intent) => {
  // SUCCESS!!! payment_intent is authorised.
  var response = fetch('/subscriptions', {
    method: 'POST',
    body: JSON.stringify({
      paymentIntentId: intent.id,
      plan_id: 'pro_plan',
      plan_quantity: 1,
      billingAddress: {...}, // provide billing address
      customer: {...} // provide customer details if the subscription is to be created for an existing <code>customer</code> in Chargebee.
    })
  }).then(function(response) {
    return response.json();
  });
  },
  error : (err) => {
  // OOPS!!! payment_intent is not authorised.
  }
}
cbInstance.handlePayment( "netbanking_emandates",
{
paymentInfo: paymentInfo, callbacks: 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 (server)

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API.

curl  https://{site}.chargebee.com/api/v2/customers/__test__8asz8Ru9WhHOJO/subscription_for_items \
     -X POST \
     -u {site_api_key}: \
     -d payment_intent[id]="<Id of authorized payment_intent recieved in last step.>" \
     -d subscription_items[item_price_id][0]="basic-INR" \
     -d subscription_items[billing_cycles][0]=2 \
     -d subscription_items[quantity][0]=1 \
     -d subscription_items[item_price_id][1]="day-pass-INR" \
     -d subscription_items[unit_price][1]=100