The API can be used for providing intent support on app, mobile web or web (Dynamic QR ) . When the Customer chooses the UPI app on the payment page and clicks the Pay button, Merchant calls Juspay’s transaction API with parameters depending on different payment methods chosen by the Customer. The API response will have the parameters required for constructing the intent URI. Merchant can then construct the URI and invoke the APP using chrome intent feature.
Construction of UPI Pay String code through the string mentioned
The sdk_params obtained in the response of the UPI transaction call should be used for constructing the Intent URI.
Sample URI:
upi://pay?tr=202101345671229366&tid=121313202101345671229366&[email protected]&mc=1234&pn= Merchant%20Inc&am=1.00&cu=INR&tn=Pay%20for%20merchant
Format:
upi://pay?tr=...(enter the tr).......&tid=...(enter the tid).......&pa=.....(enter merchant_vpa)...&mc=....(enter the mcc)...&pn=....(enter
the Merchant name)...&am=.....(enter the amount).....&cu=INR&tn=....(description for the transaction)..
Note:
In the URI spaces are replaced by "%20". The URI is encoded. Kindly generate the intent URI dynamically ie, based on the params received in the sdk_params response. Do not hardcode any keys or values as it can differ with different PG’s.
How to create an intent from mWeb browser?
Once the URI is constructed, it should be embedded into the page. The mobile browser
then checks for the UPI apps on the phone and displays them. Customer clicks on the app
and completes the payment.
Sample Reference for chrome Intent is given below:
https://developer.chrome.com/multidevice/android/intents
How to create a dynamic QR on Web?
From the response parameters of the transaction API call for QR Code payment method, the SDK parameters are can be used to construct a URI and bind that URI to QR code.
- Generating UPI Pay String and binding it with QR code :
There are several Js libraries that help in generating QR code and binding string with the QR code. Sample library : https://www.npmjs.com/package/qrcode - Merchant needs to bind the Pay String using the following steps:
1)Create QR code object
2)Encode the UPI Pay String to bytes
3)Make QR code
## How to handle payment status once the payment is completed? ##
Unlike in Web collect, where the success response is redirected to the merchant's return url
as well as through server callback, in intent, only a callback response is posted on
Merchant’s server. This is because UPI intent is an App to app switch push payment.
While payment is being done via the UPI app, Merchant has to show a waiting/loader page on the background. Merchants should continuously poll their own server to check for Juspay
callback of payment status and give the response in the frontend to the client side.
Merchant can also call the order status API of Juspay to check the Order Status of the
transaction.
Merchants can follow the similar steps for generating the QR codes for web.