我在react native中开发了一个应用程序,应该与支付网关通信,在完成支付过程(成功或失败)后,我需要向用户显示一个alert .为此,我在100中打开了一个链接,然后用101获得了return的url,并显示成功或失败消息.

但是,这security个问题的流程必须在default device browser中完成.

当前代码:

const BASEURL = 'https://gatewayURL/?ID=';
let Token = null;
let paymentAccepted = null;
let paymentFactorId = null;

class Gateway extends PureComponent {
  static propTypes = {
    dispatch: PropTypes.func,
    navigation: PropTypes.any,
  }

  componentWillMount() {
    this.props.dispatch(getPaymentStatus());
  }


  _onLoad(webViewState) {
    let url = webViewState.url.toString();
    let isResponseValid = url.includes('backFromGateway');
    if(isResponseValid){
      if(this.props.checkedPaymentStatus != 'checked' ){
        setTimeout(() => {
          this.props.dispatch(setPaymentStatus('checked'));

          let splitedURL = url.split("/");
          paymentFactorId = splitedURL[splitedURL.length -2];
          if(splitedURL[splitedURL.length - 1] === '0'){
            paymentAccepted = true;
            this.props.dispatch(setGatewayResponse('done', paymentFactorId));
          }
          else {
            paymentAccepted = false;
            this.props.dispatch(setGatewayResponse('rejected', paymentFactorId));
          }


          this.props.navigation.navigate('BackFromGateway', { title: '' })
        }, 1000);
      }
    }
  }


  render() {
    const { addNewOrderGatewayToken, checkedPaymentStatus } = this.props;
    token = addNewOrderGatewayToken;
    let view = null;
    if(checkedPaymentStatus !== 'checked'){
      view =  <WebView onNavigationStateChange={this._onLoad.bind(this)} style={styles.container} source={{ uri: `${BASEURL}${token}`  }}/>
    }
    else{
      view = <View></View>
    }

    return (
      <View style={styles.container}>
        {view}
      </View>      
    );
  }
}

知道吗

推荐答案

如果你可以从gateway网站进行回调,那么我建议使用深度链接来处理应用程序和浏览器之间的流.基本上,你的应用程序将打开网关网站进行支付,根据支付结果,网站将使用其深层链接回调应用程序.然后应用程序将收听该链接,获取必要的信息并继续进行.

你需要做的是:

在应用程序中设置深度链接.你应该遵循官方网站(here)的指南来启用它.让我们在这里随机 Select 一个URL进行链接,例如gatewaylistener

设置从网关到应用程序的必要回调.在您的情况下,由于您需要处理成功付款和失败付款,您可以添加两个回调,例如gatewaylistener://success?id={paymentId}gatewaylistener://error?id={paymentId}

最后,你需要收听应用程序中的网络浏览器.一种方法是在打开网关的组件内部添加侦听器.

// setup
componentDidMount() {
  Linking.getInitialURL().then((url) => {
    if (url) {
      this.handleOpenURL(url)
    }
  }).catch(err => {})
  Linking.addEventListener('url', this.handleOpenURL)
}

componentWillUnmount() {
  Linking.removeEventListener('url', this.handleOpenURL)
}

// open your gateway
async openGateWay = () => {
  const { addNewOrderGatewayToken } = this.props
  const url = `${BASEURL}${addNewOrderGatewayToken}`
  const canOpen = await Linking.canOpenURL(url)
  if (canOpen) {
    this.props.dispatch(setPaymentStatus('checked'))
    Linking.openURL(url)
  }
}

// handle gateway callbacks
handleOpenURL = (url) => {
  if (isSucceedPayment(url)) { // your condition
    // handle success payment
  } else {
    // handle failure
  }
}

React-native相关问答推荐

Firebase身份验证Redux使用说明

在第二次加载时仅将本机应用程序设置为状态

@testing-library/react-native -> 渲染 -> TypeError:无法读取未定义的属性(读取存在)

如何在react-navigation 中将drawer抽屉放在标题上?

如何在 React Navigation 5 中将父函数传递给子屏幕?

React Native Child Parent 通信

在 React Native 上为 android 创建自定义 UI 组件,如何向 JS 发送数据?

redux-observable Promise 在单元测试中没有得到解决

使用 resizeMode = contain时的图像对齐

React-Native Android 中隐藏(hide)的元素溢出

java.lang.ClassNotFoundException:在路径上找不到类.MainActivity:DexPathList react-native

将 svg 转换为 react-native-svg

react-native createbottomtabnavigator 隐藏标签栏标签

如何使用 Typescript 在无状态组件上设置 navigationOptions

axios 的网络错误和react-native

React Native 发送短信

react-native-webview :对于 iOS 文本太小

React-native iOS 不显示图像(pod 问题)

如何将图形 API 与 react-native-fbsdk 一起使用?

React-Native 水平滚动视图分页:预览下一页/卡片