Invoking UPI apps from my react-native App works in iOS but not in Android

Question

I am trying to invoke few common UPI Apps (Google Pay, Phone Pay, PayTM) using deep links.

openPaymentApp = async (payApp) => {
    let url = '';
    switch(payApp) {
        case 'PAYTM'   : url = 'paytmmp'; break;
        case 'GPAY'    : url = 'gpay'; break;
        case 'PHONEPE' : url = 'phonepe'; break;
    }
    url = url + '://upi/pay?pa=7024293076@upi&pn=DK Bose&mc=0000&tr=123456789ABCDEFG&tn=HelloWorld&am=11&cu=INR'
    console.log('URL : ',url);
    try {
        await Linking.openURL(url);
    }
    catch (err) {
        console.error('ERROR : ',err);
    }
}

render(){
    return (
        <View style={{alignItems:"center",justifyContent:"center",flex:1}}>
            <Button title='PAYTM'    onPress={() => this.openPaymentApp('PAYTM')}/>
            <Button title='GPAY'     onPress={() => this.openPaymentApp('GPAY')}/>
            <Button title='PHONE PE' onPress={() => this.openPaymentApp('PHONEPE')}/>
        </View>
    );
}

It works fine in iOS, i.e on opening the Deep Links the respective apps open up and the app automatically jumps to the UPI payments page with pre filled fields of VPA, Name, Amount, Note etc.

But on Android i have following problems :

• GPay : App does not open.
• Paytm : App opens but does not go to UPI payments page
• PhonePe : App opens but does not go to UPI payments page

When I tried using default upi deeplink, on android it gives a popup to select a UPI app. But only Google Pay and iMobile (from ICICI) are listed there, Paytm and Phonepe are not listed in that popup.

upi://pay?pa=7024293076@upi&pn=DK...

Are Deeplinks for UPI payment Apps different for iOS and Android ?

What else needs to be done to open the App and move to UPI payment page with pre filled fields ?

Answer 1

I am solving in one way but it's not the best solution I know. So far i am solving the issue by redirecting it to a browser in params and from browser i am opening intent link.

Example-

www.website.com?paymentinfo=intent://pay?pa=payu@axisbank&pn=company LIMITED&tr=12703860471&tid=COBya9xXv2VWZ7Zc&am=4.00&cu=INR&tn=OrderId-COBya9xXv2VWZ7Zc#Intent;scheme=upi;package=com.phonepe.app;S.browser_fallback_url=https://play.google.com/store/apps/details?id=com.phonepe.app&hl=en_IN;end

after receiving payment info i am opening in browser using window.open(paymentinfo)

Answer 2

Working deep links for these android apps are:

Paytm:

paytmmp://pay?pa=your@vpa&pn=YourName&tn=Note&am=1&cu=INR

Phonepe:

phonepe://pay?pa=your@vpa&pn=YourName&tn=Note&am=1&cu=INR

GPay

tez://upi/pay?pa=your@vpa&pn=YourName&tn=Note&am=1&cu=INR

Answer 3

This is the solution you are looking for. The code should look something like this:

 openPaymentApp = async (payApp) => {

    let url = '';
    switch(payApp) {
        case 'PAYTM'   : url = 'paytmmp://'; break;
        case 'GPAY'    : url = 'tez://upi/'; break;
        case 'PHONEPE' : url = 'phonepe://'; break;
    }
    url = url + 'pay?pa=7024293076@upi&pn=DK Bose&mc=0000&tr=123456789ABCDEFG&tn=HelloWorld&am=11&cu=INR'
    console.log('URL : ',url);
    try {
        await Linking.openURL(url);
    }
    catch (err) {
        console.error('ERROR : ',err);
    }
}

render(){
    return (
        <View style={{alignItems:"center",justifyContent:"center",flex:1}}>
            <Button title='PAYTM'    onPress={() => this.openPaymentApp('PAYTM')}/>
            <Button title='GPAY'     onPress={() => this.openPaymentApp('GPAY')}/>
            <Button title='PHONE PE' onPress={() => this.openPaymentApp('PHONEPE')}/>
        </View>
    );
}

Hope this helps. Cheers!