The most useful way to add UPI payments to your app or website.

Are you looking to add the UPI payment option for your customers/users, in your mobile app or website?

8 min readOct 26, 2018

What People Know About the UPI

I hope most of us know about UPI & it’s benefits already. For those, who don’t know, UPI(Unified Payment Interface) is a new digital payment option in India. It’s one of the payments option to pay anyone (Online stores, your friends & families, shopkeepers, restaurants and more) in an easier & faster way.

The most used UPI apps available today are BHIM, Google Pay (Tez), PhonePe, Paytm, WhatsApp Payments with some other bank UPI apps.

See here all UPI enabled banks and apps: Open List

Know more about UPI: Everything about UPI

What People Don’t Know or Hardly Know About the UPI

Most of the users don’t know, UPI app should be installed on their mobile when paying by UPI on an online store.

Performing a UPI Transaction on an online store. (eg. a user is trying to pay for a pair of shoes on myntra.com using UPI payment method but he doesn’t know the process.)
Users can instantly transfer money through mobile device round the clock 24*7 and 365 days.
Barcode (Scan and Pay) based payments, Utility Bill Payments, Over the Counter Payments.
Difference between UPI ID & VPA(Virtual Payment Address).
You can create your VPA according to your choice in some UPI apps, it’s not by default. (only a few apps like Google Pay (Tez) doesn’t give this option.)
You can create and use more than 1 VPA in every UPI app.
NCPI has launched the new UPI 2.0 with great new features.

Note: All the above points are not related to everyone but still there are a lot of users who don’t know or rarely know about these.

How UPI payment works for online stores

Here is an example showing that how UPI payment works exactly.

My experience for paying via UPI app while ordering food online in August 2018. (These screens are from Freshmenu & Tez(Now Google Pay) iOS app)

You can follow steps below for paying by UPI

Choose the UPI as a payment option.
You will get a notification from the app eg. “Freshmenu is requesting xx amount”
Tap on that notification.
It will open your chosen UPI app.(eg. If you choose Tez app(now Google Pay) to pay, it will open Tez, and same with others.)
Tap on “Pay” in your UPI app for completing the transaction.
UPI app will ask for your MPIN to approve.
That’s it. Your payment is done!

UPI ID or VPA? what is it exactly?

UPI is a method or service which is used to make or receive payments, and a VPA(Virtual Payment Address) is an identifier that can be uniquely mapped to an individual account. UPI ID & VPA are the same things.

So the apps like — Google Pay(Tez), BHIM, PhonePe and Paytm are the UPI apps which use a VPA(Virtual Payment Address)/UPI ID to make & receive payments.

UPI Apps and their UPI IDs/VPAs examples

How can we help our company to add UPI payment option to their app/website in a way so that users also can understand the UPI payment.

A few days back while adding the UPI payment option to Instamojo web/app, I dug deeper into these questions “What People Don’t Know or Hardly Know About the UPI” and I found some great ways to add UPI option, and fixed some major problems.

Things to keep in mind:

Here are some tips and things to keep in mind while adding UPI:

1. Try avoiding input fields with a placeholder like in below example

India has a big user base, and they all are not the same. They all are from different backgrounds and cities. Few of them are from Tier 1 cities, few from Tier 2 and Tier 3, so it’ll take more time for a person from village to understand the new service or technology than a person from the big city.

In the example above, it is difficult to understand whether they have to write “aakash@icici” or something else? (We found a lot of users entering the same VPA in input field while paying through Instamojo)

Why are the users typing the same VPA as in input?
Because they still don’t know what’s their own VPA/UPI ID and we should tell them about this clearly.

2. Help users to know their VPA

Presenting adaptive help to users can make it faster to find answers relevant to the user and drives them to exactly what they are looking for.

We can show to the users how to find their VPA on the payment screen near to UPI input field itself so that they can check it quickly and make the payment. Not just how to find UPI ID, we can also help users with how to pay using UPI(see below image).

How to find UPI ID? & How to pay using UPI will help users to understand the steps for paying and their VPA/UPI ID.

This will solve the following:
a.) Helping users to find their VPA and
b.) Increasing the chance of the payment done by users.

3. Give them options to choose

Don’t just provide an input field to users for entering their UPI/VPA, give them options to choose quickly which UPI app they are using. See the example below:

Now, why give them options?
It will help users to recognize what UPI apps are, & which of them they have already installed in their mobile, also there are some other great benefits for doing this, which are explained in the latter points. (refer point 4 below.)

Why are we showing only these 4 options in front?
According to our data, users were using these top 4 UPI apps most of the time for paying through Instamojo. It’s totally up to you which options users are using on your platform and you can show them in front.

Data leads to insights; business owners, managers or designers can turn those insights into decisions and actions that improve the experience and business. This is the power of data.

Also, we are giving an option to choose other UPI apps as well.

4. Ask for less

For this step, first, let me explain the UPI field in detail:

In the above image, the UPI ID is “murarijha@okhdfcbank”
let’s separate this into two section :

“murarijha” is user’s unique id and “@okhdfcbank” this the PSP(payment service provider). By combining these two things(Unique ID & PSP), it makes a complete UPI ID/VPA.

So, it can help us to ask for less information from the user because we can show the PSP(payment service provider) by default according to chosen UPI app by user. Example below:

When a user choose BHIM as their UPI app. PSP(@upi) is already there.

The PSP(Payment service provider) is different for each bank, same as the UPI apps. Every UPI has tie-ups with different banks.

So if you are using a bank’s UPI app eg. SBI Pay from SBI bank then the PSP would be “@sbi”. In another case, if you choose a UPI app eg. PhonePe then the PSP would be “@ybl”, ybl stands for Yes Bank Limited and PhonePe has a tie-up with yes bank. see the below image again for how UPI apps are using different PSP in their apps:

Only Google Pay (Tez) has multiple PSP(Payment Service Provider). If a user is choosing Google Tez as their UPI app then we can show a drop-down near the PSP handle. Besides Tez, every UPI app has only one PSP for now.

This is how we can ask for as less info as we can from our users. They just need to enter their unique id only because PSP is already there according to their chosen UPI app.

Important

Please don’t forget to provide these options “How to Find UPI ID” & “How to Pay by UPI” near the input field “Enter your UPI ID”. These options are really helpful to convert your user into a payer. At Instamojo we did it like this:

How to find UPI (Screen from Instamojo platform)

How to pay by UPI (Screen from Instamojo platform)

Conclusion

With the help of the above steps or suggestions, it’ll make our users experience a lot easier for paying by UPI and also we can make this payment mode work for them without any hassle.

What can you do with Instamojo UPI?

You can receive payments easily on your UPI handle with Instamojo.
It is enabled automatically on your payment form
You don’t need a VPA to collect money with UPI from your customers.

Paying on Instamojo with UPI is super easy. If you already have a Virtual Payment Address(VPA) you can use it to pay on Instamojo. The UPI option is available in the payment form along with all the other modes like Debit Card, Credit Cards, Netbanking, Wallets and even NEFT.

Questions?

Please ask questions if you have any about UPI, this way we can help each other to learn and grow. I have researched a lot about UPI & I’ll try to answer your questions in the best way as I can. If you have any suggestions, you are most welcome :).

I am really thankful to @kingsidharth for helping me at every step of doing this article on UPI payments.

I have some other interesting articles for you here. For more works & chat, follow and connect with me on these channels: Twitter, Dribbble, LinkedIn, Instagram

Thanks again for your precious time. Cheers!