react-native - 从 react-native 在浏览器中打开非标准协议 url

Question

我必须从我的 ReactNative 代码中使用 Chrome 或 Android 中的任何默认浏览器打开如下所示的 URL。

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

但是，当我打开此 URL 时，出现错误：

可能的未处理承诺拒绝......未找到处理意图的活动。

我的代码打开了下面给出的链接：

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

如果我传递诸如https://www.google.com. 但是，我有一个 QR 码阅读器应用程序，当我单击其中的打开网站按钮时，它能够读取上述 URL，然后使用浏览器打开它。只是想弄清楚要走的方向。

标签： react-nativelinkerupi

Answer 1

要使用意图流从 react-native 发起 UPI 支付，您只需使用此处react-native-upi-pay的包。

下面是一个工作代码：

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;