Pre-requisite

  • Customer must have Bharat QR enabled mobile application / wallet.
  • 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.

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 ?

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

  • 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)
  • 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.
  • 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 :

00020101021202161234567890123456041612345678901234560616610006100

06100060827ABCD0000001000163232001212126310010AB000001230119some

thing@12327510010AB000001230111A12345678900222http://www.v2stech.co

m52045311530335654041.005802IN5907V2STECH6006Mumbai6106400602

62390515V2STECHORDNO1230708123456780804ECOM63046B11

Let’s make it simple to understand :

00020101021202161234567890123456041612345678901234560616610006100

06100060827ABCD0000001000163232001212126310010AB000001230119some

thing@12327510010AB000001230111A12345678900222http://www.v2stech.co

m5204531153033554041.005802IN5907V2STECH6006Mumbai6106400602

62390515V2STECHORDNO1230708123456780804ECOM63046B11

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.

Leave a Reply