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
Top comments (4)
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.
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.
what is mc and mode params?
how to do the same in reactjs app?