How To Add UPI Payments to Your App/Website

Add-UPI-Payments-to-App-Website
(Last Updated On: March 10, 2021)

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

UPI(Unified Payment Interface) is a new digital payment option in India. It’s one of the payment options that allow you 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.

What People Don’t Know or Hardly Know About UPI

Let me take you through some lesser-known facts about UPI.

  • UPI app should be installed on their mobile when paying by UPI on an online store.
  • Users can instantly transfer money through mobile device round the clock 24*7 and 365 days.
  • UPI can be found in any form – QR+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.

Did you know the National Payments Corporation of India (NCPI) just launched a new version of UPI 2.0 with great new features? Check out this awesome infographic.

How UPI payment works for online stores

Here is an example showing how UPI payments work on Google Pay, earlier known as Tez.

UPI
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)

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

Adding UPI options to your Website or App

You can allow your customers to pay you with UPI too. But how do you enable UPI payment option for your website or app in a way that your users understand UPI too?

A few months ago, 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 options.

Below are screenshots from our UPI payment options to explain my findings better.

Things to keep in mind:

1. Try avoiding input fields with a placeholder like this example shown below:

UPI
India has a big user base, and they all are not the same. They all are from different backgrounds and cities. Some users may take more to understand a new service or technology than a person from a big city.

In the example above, it is difficult to understand what the user must do.  We found a lot of users entering the same VPA in the 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 the UPI input field so 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).

UPI

This solves two problems: How to find a UPI ID and how to pay using UPI. This will:
a.) Help users find, create or recall a VPA.
b.) Increase the chances of a customer paying with UPI.

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:

Instamojo online payments
Why give them options?

It will help users recognize UPI apps and which of them they already have installed on their phones.

Why is Instamojo showing these 4 options only?

While Instamojo also allows a customer to choose other UPI apps as well, we feature 4 main options.

According to our data, customers were using these top 4 UPI apps most of the time to pay with UPI on Instamojo. It’s totally up to you to decide which options you want to show.

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.

4. Ask for less

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

Instamojo setup of payments

UPI ID/VPA Break Down
In the above image, the UPI ID is “murarijha@okhdfcbank”
let’s separate this into two sections:

“murarijha” is user’s unique id and “@okhdfcbank” this the PSP(payment service provider). A VPA is a combination of the Unique ID & PSP. You can just show the PSP (payment service provider) by default according to chosen the UPI app.

UPI Payments Instamojo

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

Understanding PSPs and UPI Payments

So if you are using a bank’s UPI app (ex. 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 how UPI apps are using different PSP in their apps in the image below:

UPI Payments

UPI Apps and their UPI IDs/VPAs examples

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.

UPI Payments

This is a great way to ask for as less information and yet provide them options to choose from. They just need to enter their unique id because the PSP is already visible 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”. 

To reiterate, educate and allow your customers to choose. The above steps and suggestions made our user experience a lot easier. We were also able to get more customers to pay with UPI and make this work for them!

Here are some screens from the Instamojo UPI experience:

UPI Payments

UPI Payments

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.
  • You can offer your customers a BRAND new auto-suggest feature for UPI Ids. Your customers will be offered various suggestions of banks to save time, while they enter their UPI ID for payment!

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 feel free to ask any questions about UPI; this way we can help each other learn and grow. I have researched a lot about UPI & I’ll try to answer your questions in the best way I can. If you have any suggestions, please leave your comments below.

Murari Jha is a product designer at Instamojo. He loves making things that are easy to understand and enjoys failures (at least for a moment). This blog first appeared on Medium.com.

UPDATE: This blog has been updated with new features and content on March 9th, 2021. 

SIGN UP ON INSTAMOJO

1 comment
Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.