Web (View) and UPI
The article explores intercommunication between web and UPI apps on your mobile.
TL;DR: The article talks about customising the UPI apps chooser on your android device via webpage/hybrid app running in a webview.
Background
Unified Payment Interface (UPI) is gaining traction in financial domain following which developers and companies are finding ways to explore its use-cases over web. Since UPI requires to validate your mobile number, so it only works on your mobile OS and not on webpage/HTML/JS (android, iOS etc).
Companies wanting to integrate UPI in their web pages accessible via hybrid apps/ mobile webviews still can’t build user experiences around UPI because they can’t access apps available for processing UPI on phone / android.
For example: Let’s say we want to build an experience on web page (HTML, JS etc) that would allow customer to choose from available UPI apps like Google Pay, PhonePe, Paytm, Airtel, Whatsapp etc on his phone and initiate a payment via that app.
Solution
All major mobile OS (android, iOS etc) provides you with the way to add a bridge layer via JS that allows you to call native utilities and functions written in native language. For android the JS bridge can internally route calls to native Java api calls. (This is what cordova does behind the scenes).
So on HTML/JS side, consider it like having a global jquery/angular/React variable exposed in javascript and via this you can call different methods that internally calls native methods.
How does this work?
When you open a HTML JS webpage via webview in android app, you can actually get full control over any communication that happens inside the webview. Like a proxy on your browser that can track everything that you do in a webview, like a mini browser that you can manipulate programmatically (Be very careful!)
Lets Code
Above is our MainActivity.java. Don’t worry about details, (code is available in Download section in the end) just understand that when you build a hybrid app, the android app will be doing below steps behind the scenes:
- Create a webview. (Line 19)
- Enable JS usage in webview. (Line 22)
- Register a global javascript variable “ApuSDK” name as our JS interface. The variable points to a Java object (WebAppInterface) having method implementation. See the below gist. (Line 23)
- Load your html file. (Line 29)
And below is the sample implementation of WebAppInterface
You can see methods annotated with @JavascriptInterface. These are the methods that can be called via HTML/JS through the global variable (“ApuSDK”) we defined in earlier gist.
Replace line 20 above with your UPI handle
In the above code, upiHandlers method will give a native call to return the list of all UPI apps that can handle a UPI payment
The second method openUPIHandler takes two arguments from HTML/JS about which app to open and forwards the call to native method to open the actual app. See the below gist (Line 33 and 48)
The below code is used in your HTML web page
Checkout line 33 and 48 in the above gist. You can see we are using the global variable ApuSDK to call the java method. Although this seems like a JS call, but internally it routes this call to the java method defined in the WebAppInterface.java gist defined earlier.
And below is the end goal:
Food for thought
We just saw how to do this via webpage. Some of you must be wondering how is it useful for people working purely in webpage. Well this is useful for those who build hybrid apps in web technology (HTML /JS) via Cordova, Ionic, Phonegap etc.
These frameworks allows you add plugins to access any native functionality. The code show above in WebAppInterface.java could be used in your plugin that can allow you to access UPI apps on android directly in your web page. Go ahead and convert it into a cordova plugin as a Homework :)
Feel free to tweet me @apuravchauhan in case you need any further help.
