Open non-standard protocol url in browser from react-native

Question

I have to open a URL as below with Chrome or any default browser that is in Android from my ReactNative code.

upi://pay?pa=starbucks.payu@indus&pn=sample@okicici&am=5.00&tn=note&mc=&tr=1234567890

However, when I open this URL I get an error:

Possible Unhandled Promise Rejection......No activity found to handle intent.

My code which opens the links given below:

let upi_url = "upi://pay?pa=starbucks.payu@indus&pn=sample@okicici&am=5.00&tn=note&mc=&tr=1234567890";
Linking.openURL(upi_url)

It works fine if I pass a URL such as https://www.google.com. I however have a QR code reader app, which is able to read the above URL and then open it with a browser when I click on the open website button in it. Just trying to figure out the direction to take.

Answer 1

For initiating UPI payment from react-native using intent flow, you just use the react-native-upi-pay package from here.

Below is a working code:

import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Button,
  TextInput
} from 'react-native';



import upi_pay from 'react-native-upi-pay';

const App: () => React$Node = () => {

  const [ payment, setPayment] = useState({  status : "Not Set",
                                             txnId : "000000"
                                         });
  const [ response, setResponse] = useState({});
  const [ upiId, setUpiId ] = useState("starbucks.payu@indus");

  
                                             

  const pay = async() => {
    
    upi_pay.initializePayment({
      vpa: upiId, // or can be john@ybl or mobileNo@upi
      payeeName: 'SOME+PRIVATE+LIMITED',
      amount: '1', //the actual amount
      transactionRef: 'aasf-332-aoei-fn'
    },success,failure);

    

  }

  const success = (data) => {
    let status = { status : "SUCCESS", txnId : data['txnId']};
    setPayment(status);
    setResponse(data);
  }

  const failure = (data) => {
    let status = { status : "FAILURE", txnId : data['txnId']};
    setPayment(status);
    setResponse(data);
  }

  const handleUPIChange = (id)=>{      
      setUpiId(id);      
  }

  
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>

          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.footer}>UPI INTENT FLOW</Text>
              <TextInput
                value={upiId}
                onChangeText={(upiId) => handleUPIChange(upiId)}
                placeholder={'UPI Id'}
                style={styles.input}
              />
              <Button title="pay" onPress={ ()=> pay() } />                               
            </View>
            <View style={styles.sectionContainer}>
            <Text>Result:</Text>
            <Text style={styles.sectionTitle}> 
               
               {  JSON.stringify(payment) }                                         
            </Text>
            <View style={styles.divider}></View>
            
            <Text>Output:</Text>
            <Text style={styles.sectionTitle}> 
               
               {  JSON.stringify(response) }
               
                          
            </Text>
            </View>
            
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: "#C3C3C3"
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: "white",
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
    
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: "black",
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: "black",
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: "#3b3b3b",
    fontSize: 20,
    fontWeight: 'bold',
    padding: 4,    
    textAlign: 'left',
  },
  input: {
    borderColor: "black",
    borderWidth: 1,
    borderRadius: 4,
    paddingHorizontal: 10,
    paddingVertical: 5,
    marginBottom: 10 
  },
  divider: {
    borderBottomWidth: 2,
    borderBottomColor: "#c3c3c3",
    marginVertical: 10

  }
  
});

export default App;