react-native对接香港支付宝支付

我正在参加「掘金·启航计划」

前言

在我们生活中支付宝支付是一种很重要的支付方式。它方便快捷，便于管理。在我们开发中需要对接支付的场景有很多。例如账户充值，产品购买，礼物购买等等。。。小编我在需求开发中就遇见了一个支付对接问题，而且对接的还是香港的支付宝，特此记录一下。

正文

我的需求是在商品购买的时候选择不同的支付方式，国内的支付宝我对接多很多，无非是后端返回支付连接我们使用react-native-alipay调起。具体代码如下

    async pay_Alipay(str) {
    // 支付宝端支付
    // payInfo 是后台拼接好的支付参数
    // return_url=
    let payInfo = str
    let resule = await Alipay.alipay(payInfo);
    console.log( resule ,'结果')
    if (resule.resultStatus == '9000') {
        toastShort(I18n.t('充值成功'));
    } else {
        toastShort(I18n.t('充值失败'));
    }
  }

但是在我对接香港支付宝的时候遇到了问题，拉起支付宝但是一直报错“订单参数异常”，按理说后端配置好返回的连接应该没什么问题，结果就是报错，后端同事也找不出问题出在哪里。查找无果我们就寻求其他方法，既然支付宝直接调不起来，那我们就转变方法，通过h5支付。说干就干，我们更改传递的参数，获取支付链接，通过web-view跳转外部链接，不出意外的话肯定会出意外。果然出现了新的问题。香港支付宝返回的支付链接直接打开会报错，**net::ERR_UNKNOWN_URL_SCHEME**。这还真是第一次遇见。好在网友的力量是非常大的。通过过滤链接头的不同使用Linking.openURL()打开连接

   onShouldStartLoadWithRequest=(request)=>{
    // short circuit these
    if (!request.url ||
      request.url.startsWith('http') ||
      request.url.startsWith('https') ||
      request.url.startsWith("/") ||
      request.url.startsWith("weixin://") ||
      request.url.startsWith("#") ||
      request.url.startsWith("javascript") ||
      request.url.startsWith("about:blank")
    ) {
      return true;
    }
  
    // blocked blobs
    if(request.url.startsWith("blob")){
      Alert.alert("Link cannot be opened.");
      return false;
    }
  
    // list of schemas we will allow the webview
    // to open natively
    if(request.url.startsWith("tel:") ||
      request.url.startsWith("mailto:") ||
      request.url.startsWith("maps:") ||330122200805126097
      request.url.startsWith("weixin://") ||
      request.url.startsWith("geo:") ||
      request.url.startsWith("alipays:") ||
      request.url.startsWith("alipayhk:") ||
      request.url.startsWith("uppaywallet:") ||
      request.url.startsWith("sms:")
      ){
  
      Linking.openURL(request.url).catch(er => {
        Alert.alert("Failed to open Link: " + er.message);
      });
      return false;
    } 
    
    <WebView
        onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
        originWhitelist={['http://*', 'https://*', 'intent://*', 'alipays://*', 'alipayhk://*', 'uppaywallet://']}
        source={{ uri: this.state.htmls }}
      />