How to invoke UPI payment Apps from URL

Question

I am a newbie in programming. I want to create an HTML page which have some buttons to invoke popular UPI payments apps like Google Pay, Paytm, PhonePe, etc. but I don't know how to invoke those application and passing them a url

upi://pay?pa=xyz@paytm&pn=Paytm%20Merchant&mc=abc&mode=02&orgid=000000&paytmqr=abcdefg&sign=abc+xyz/pqr/+stu

Like this:

<a href="<protocol to invoke app with the upi url parameter>">
  Donate/Pay via this Payment App
</a>

I can tell you the reference like What app https://api.whatsapp.com/send?phone=<country-code-digit><10-digitmobile-number> start the chat with given phone number in the url after verifying if that number with country code exist in whatsapp user list.

Answer 1

We can use anchor tags to invoke UPI apps (GPay, PhonePay, PayTm, BHIMPay, AmazonPay or any UPI Apps).

For example -

<a href="upi://pay?pa=upiaddress@okhdfcbank&pn=JohnDoe&cu=INR">Buy Now</a>

To make UPI transactions, we can use the following fields:

Fields	Description
pa	Payee address or business virtual payment address (VPA).
pn	Payee name or business name.
mc	Business retailer category code.
tr	Transaction reference ID. (Business specific ID. Must be unique for each request.)
url	Transaction reference URL.
am	Transaction amount. (Up to two decimal digits are allowed. This should be set in the details object instead of the supportedInstruments object.)
cu	Currency code. (This should be set in the details object instead of supportedInstruments object. Only the Indian rupee (INR) is currently supported.)
tid	Transaction ID generated by the payment service provider (PSP) of the business.
tn	Transaction note. It is the description appearing in the Google Pay payflow. (Maximum length is 80 characters)
gstBrkUp	Break-up of Goods and Services Tax. This should follow the format: `GST:amount
invoiceNo	Invoice Number. Identifier of a bill/invoice.
invoiceDate	The time of invoice in RFC 3339 format. Eg, 2017-02-15T16:20:30+05:30 for IST timezone).
gstIn	Business GSTIN. Goods and Services Tax Identification Number.

For a complete list of supported fields, refer to the NPCI UPI Linking Specs.

Answer 2

This Code will open all UPI apps in mobile.

<a href="upi://pay?pa=UPIID@oksbi&amp;pn=FNAME SNAME K&amp;cu=INR" class="upi-pay1">Pay Now !</a>

Also adding spaces in the link won't break the URL

<a href="upi://pay?pa=UPIID@oksbi&amp;pn=JOHN BRITAS AK &amp;cu=INR" class="upi-pay1">Pay Now !</a>