DEV Community

Cover image for How to open UPI Apps in React Native | UPI Integration with React Native
Suyash Vashishtha
Suyash Vashishtha

Posted on

How to open UPI Apps in React Native | UPI Integration with React Native

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

My UPI Qrcode.. you can donate to it if you want ;)

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 - *

Code snippet for UPI Integration in React Native

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

Top comments (5)

Collapse
 
mohamme63575548 profile image
Mohammed Irfan

Your code works like a dream. The upi app opens up and the payment gets completed.
Is there a way we know in the react native app that the upi payment has completed/failed. How to receive the payment response/status.

Collapse
 
suyashdev profile image
Suyash Vashishtha

Thanks bro. As for the status, I really don't have any idea for that. But you can use Promise handling on Linking module in React Native

Linking.openURL().then(response=>{})

May be this can give information about the status in some manner.

Collapse
 
rahul_jakhar_07236ec78507 profile image
Rahul Jakhar

i tried it but it does'nt work :(

Collapse
 
rishavraj221 profile image
Rishav Raj

what is mc and mode params?

Collapse
 
ultronprime25 profile image
Suraj Bhattacharya

how to do the same in reactjs app?