This post is going to be more specific for Indian clients or Indian Developers as it targets UPI payment (Unified Payments Interface) which is used in India Only.

• In India majority of people use UPI for transactions as it is much easier to use.

• But what if we want to integrate it to our app ? To be honest it is quite simple but tricky solution.

First, let's see How UPI generally works using QR Code

• As we all know QR codes are the main method of making transactions in UPI. But how does it work ?

• Well it works on UPI id and a link which is encoded inside the Qrcode for that user.

• When we scan the Qrcode our scanner takes the link and process it with desired UPI App with the help of Deep Links.

• And boom it opens our Phone pay or Google pay app with transaction confirmation screen.

Deep Links - Not going all in depth for this blog, but deep links are simply some local urls which points to a specific app with given parameters

Taking a QR Code example

Let's take my UPI QrCode for example

Now scan it with a local scanner or decode it using online scanners and extract the UPI Link

It will look something like this.

upi://pay?pa=suyashvashishtha@axl&pn=Suyash%20Vashishtha&mc=0000&mode=02&purpose=00

Now all we have to do is , open this link with React Native Linking APi.

Opening UPI with React Native

As of now we have a UPI link and a React Native App ( Expo or Cli, doesnt really matter )

Now in order to open our UPI Apps all we have to do is, call Linking api from react-native and pass the url to it using OpenURl() method.

*Code Snippet - *

You can copy the code from here.

.
That's it , It will open a sheet showing all the UPI apps available in the mobile and which ever you will choose will redirect you to their payment screen for confirmation

.

Thanks for reading this blog, I will keep uploading more blogs to help our dev community ❤️.

Comment | Share | Like