react-native 微信H5支付


通过webView打开支付页面,实现app内的微信H5支付功能。

安卓端:

  需要添加webView的referrer信息。

  修改react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewManager.java文件。

  1.在类(RNCWebViewManager)开头添加referrerUrl定义

public static String referrerUrl = null;

  2.在receiveCommand方法内的COMMAND_LOAD_URL下,删除root.loadUrl(args.getString(0)),并添加以下代码:

HashMap headerMap = new HashMap<>();
if (referrerUrl != null) {
    headerMap.put("Referrer", referrerUrl);
}
root.loadUrl(args.getString(0), headerMap);

  3.在类(RNCWebVIEWclient)添加设置referrerUrl的方法,在onPageFinished方法内成功时调用。

private void setReferrerUrl(String url) {
    Uri uri = Uri.parse(url);
    String protocol = uri.getScheme();
    String server = uri.getAuthority();
    referrerUrl = protocol + "://" + server;
}

// 在onPageFinished方法内调用(成功时调用)
setReferrerUrl(url);

以下是比较完整的代码,步骤在注释的挎号内:

public class RNCWebViewManager extends SimpleViewManager {  
 // 添加定义(1)
  public static String referrerUrl = null;
  
  // 修改这个函数下的加载url逻辑,添加ReferrerUrl
  public void receiveCommand(WebView root, int commandId, @Nullable ReadableArray args) {
    case COMMAND_LOAD_URL:
        if (args == null) {
          throw new RuntimeException("Arguments for loading an url are null!");
        }
        // 删除这行(2)
        // root.loadUrl(args.getString(0));
        
        // 添加以下4行代码(3)
        HashMap headerMap = new HashMap<>();
        if (referrerUrl != null) {
          headerMap.put("Referrer", referrerUrl);
        }
        root.loadUrl(args.getString(0), headerMap);
        break;
  }

  // 设置referrerUrl
  protected static class RNCWebViewClient extends WebViewClient 
  {
    // 新增这个函数,用于设置referrerUrl(4)
    private void setReferrerUrl(String url) {
      Uri uri = Uri.parse(url);
      String protocol = uri.getScheme();
      String server = uri.getAuthority();
      referrerUrl = protocol + "://" + server;
    }

    @Override
    public void onPageFinished(WebView webView, String url) {
      super.onPageFinished(webView, url);

      if (!mLastLoadFailed) {
        RNCWebView reactWebView = (RNCWebView) webView;

        reactWebView.callInjectedJavaScript();

        emitFinishEvent(webView, url);

        // 调用设置ReferrerUrl的方法(5)
        setReferrerUrl(url);
      }
    }
}

ios端:

  不需要修改webView组件,但是需要修改项目配置,添加scheme,解决微信支付完成后,无法跳回app的问题。