v2stech solutions pvt ltd logo

How to integrate

Bharat QR on custom hosted checkout page (online payment integration) ?

Pre-requisite

  1. Customer must have Bharat QR enabled mobile application / wallet.
  2. Merchant must be configured on the payment gateway end to accept Bharat QR based payments.

What is a standard user journey ?

  1. A customer visit merchant site to transact online.
  2. On check out page, Bharat QR will be displayed as one of the option to process payment.
  3. Customer scans QR code displayed using Bharat QR enabled mobile application.
  4. Customer process payment inside Bharat QR enabled mobile application by authorizing transaction.
  5. Issuer will intimate customer and merchant both about success or failure of the transaction.
customer-journey

Integrate Bharat QR inside a hosted checkout page

As part of integration of Bharat QR on checkout page, understanding of following two parts is essential

  1. How to generate a Bharat QR code in NPCI specified format ?
  2. Technical aspects to be considered.

How to generate a Bharat QR code in NPCI specified format ?

  1. Bharat QR follows fixed format specification defined by NPCI. It is in TLV (Tag, Length and Value) based format. There are about 63 tags specified with length as per NPCI QR code specification.
  2. As per implementation requirement, generate a string that contains tag-length-values format, note that all tags are not mandatory hence only mandatory tags can be specified to form a QR code string.
  3. After generation of QR code string, transform it from text to QR representation using any standard QR generation algorithms based on the technology platform used by your application.

Technical aspects

  1. After QR code is ready as per guidelines defined in above section, next part is to include it on checkout page. There are two types of QR code static and dynamic, static QR codes represents fix dataset (like amount, reference, number etc.) and will not fit all the online payment cases. Let’s take an example of e-commerce, customer details, order reference, amount will vary for each transaction hence system will have to generate QR code on the fly. These are dynamic QR codes. Hence under Tag 01 value of QR code should be specified as 12 (“12” indicates QR dynamic code)
  2. Customer scans QR code using mobile application, customer is using an external application to process the flow hence for a website or e-commerce portal typical user journey ends here. But it is not ideal as per UI/UX, how can it be made more responsive. One solution is - implement socket or asynchronous calls to check the transaction status while user is on the QR code page and refresh page to show success / failure once back end system receive confirmation from payment gateway end.
  3. Make a provision for back end push API end point so that transaction confirmation can be received in real-time.

Let’s understand QR code format in more detail

Scanned QR code looks like :

0002010102120216123456789012345604161234567890123456061661000610006100060827ABCD0000001000163232001212126310010AB000001230119something@12327510010AB000001230111A12345678900222http://www.v2stech.com52045311530335654041.005802IN5907V2STECH6006Mumbai610640060262390515V2STECHORDNO1230708123456780804ECOM63046B11

Let’s make it simple to understand :

000201 010212 02161234567890123456 041612345678901234560616 6100061000610006 0827ABCD00000010001632320012121 26310010AB000001230119something@123 27510010AB000001230111A12345678900222http://www.v2stech.com 52045311 530335 54041.00 5802IN5907V2STECH 6006Mumbai 6106400602 62390515V2STECHORDNO1230708123456780804ECOM 63046B11

Coloured section represents TLV(TAG-LENGTH-VALUE) specification format defined by NPCI, simplified view is shown below :

( In the structure shown below, some of the tag section has sub tags like Tag 26, Tag26 has total length of 31 that is inclusive of0010AB000001230113something@123 )

T L V

00 0201

01 02 12

02 16 1234567890123456

04 16 1234567890123456

0616 6100061000610006

08 27 ABCD00000010001632320012121

26 31

00 10 AB00000123

01 13 something@123

2751

00 10 AB00000123

01 11A1234567890

02 22 http://www.v2stech.com

5204 5311

53 03 356

54 04 1.00

58 02 IN

59 04 V2STECH

6006 Mumbai

61 06 400602

62 39

05 15V2STECHORDNO123

07 08 12345678

0804 ECOM

63 046B11

Important notes

    1. Please make sure that you have specified correct format during creation of QR textual representation and have specified all mandatory fields from NPCI specification otherwise scanned QR code will be invalid and will not result in successful payments.

    2. Specify correct UPI/ VPA handles of merchant under TAG 26 and TAG 27.