前提说明：此blog仅为业余时间，为了测试后端Java程序的paySign是否正确，而编写的测试代码 Alipay参考： https://github.com/0x5e/react-native-alipay Wxpay参考： https://www.jianshu.com/p/6a792118fae4

前提环境

  1. Node环境
  2. Android环境
  3. rn环境

    一、创建RN项目

    1.1 初始化RN项目

    1. react-native init pay_demo

    1.2 测试项目是否能够运行

    1. react-native run-android
    如果，能够在手机上，正常运行安装app，即初始项目搭建成功

    二、集成Alipay

    Alipay前景说明：采用SandBox进行支付测试，所安装的依赖，也可支持正式环境的测试 所安装的依赖为： @0x5e/react-native-alipay 官方github： https://github.com/0x5e/react-native-alipay

2.1 安装依赖

  1. # npm 安装
  2. npm install @0x5e/react-native-alipay
  3. // yarn 安装
  4. yarn add @0x5e/react-native-alipay

2.2 配置Alipay

参照官方github： https://github.com/0x5e/react-native-alipay/blob/master/docs/android-setup.md

2.3 配置完成之后，编写页面测试

2.3.1 导入依赖

  1. import Alipay from '@0x5e/react-native-alipay';

2.3.2 支付按钮

  1. <TouchableOpacity onPress={this._aliPay}>
  2.   <View style={styles.btn}>
  3.     <Text style={styles.text}>支付宝支付</Text>
  4.   </View>
  5. </TouchableOpacity>

2.3.3 支付响应函数

这里，使用调用接口的方式，获取到服务端返回的paySign签名

  1. _aliPay = async () => {
  2.   var options = {
  3.     method: 'GET'
  4.   }
  5.   fetch('http://your-server-address, options)
  6.     .then((response) => {
  7.     return response.text();
  8.   }).then((responseText) => {
  9.     let resData = JSON.parse(responseText);
  10.     let data = resData.data;
  11.     // 设置为沙箱环境，如果是正式环境，注释即可，默认是正式环境
  12.     Alipay.setAlipaySandbox(true)
  13.     // 调用pay方法，就能调其支付宝
  14.     Alipay.pay(data).then(function(data){
  15.       console.log(data);
  16.     }, function (err) {
  17.       console.log(err);
  18.     });
  19.   })
  20. };

服务端的签名返回数据示例为

  1. alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2016101300678365&biz_content=%7B%22body%22%3A%22%E6%88%91%E6%98%AF%E7%94%9F%E6%88%90%E4%BA%8C%E7%BB%B4%E7%A0%81%E6%B5%8B%E8%AF%95%E6%95%B0%E6%8D%AE%22%2C%22out_trade_no%22%3A%222151520200910%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22subject%22%3A%22paytest%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%221%22%7D&charset=utf-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2F5tgtz9.natappfree.cc%2Falipay_callback&sign=mpbaLONr1fdbxYfRD%2FSKSzZtMuzol4ZimLSZQXOSDKurQntHW1CgleWac6egDaEcVYahzYjzDMKJwFwfVpbyi0xDSfqP1YshO96y%2BafNb0XJYhwYC60eHywqgHGhGCdxVQLohI2bCkeVkLSSZv9Xh0r6HfXWKOtTHPPnRtcUYjEaJqbe8qNwe1wkAF%2FfqVWrNTZHxS4JrUAtdb2ty0U6uSc%2BLcJrJRMAKax5s9S2EK66yg0fHZAIctPSjQMW5%2FLl0Noupwrw2nSDwAHbPN8a07%2FjkS40VbADbvN%2FPQCM9uEQXC2wJI57P%2B7MmY4O0bVGy3mKeMuq9LGbcqgCByOeYQ%3D%3D&sign_type=RSA2&timestamp=2020-09-10+10%3A10%3A30&version=1.0"

2..4 页面编写完成，运行项目进行测试

  1. react-native run-android

点击按钮，如果正确的调起了沙箱的支付宝，说明，服务端签名成功，客户端也没有问题，Alipay sandbox测试成功

三、集成wxpay

前提说明，wxpay的申请流程，比Alipay复杂很多，所以，没有的朋友，可以结束了….

3.1 安装依赖

  1. npm install react-native-wechat
  2. yarn add react-native-wechat

2.2配置 wxpay

2.2.1 添加 WeChatPackage

在 android/app/src/main/java/your package/MainApplication.java 中添加如下的代码

  1. @Override
  2. protected List<ReactPackage> getPackages() {
  3. @SuppressWarnings("UnnecessaryLocalVariable")
  4. List<ReactPackage> packages = new PackageList(this).getPackages();
  5.     packages.add(new WeChatPackage());
  6.     return packages;
  7. }

2.2.2 创建wxapi 包，添加如下的几个类

WXEntryActivity.java

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import com.theweflex.react.WeChatModule;
  6. public class WXEntryActivity extends Activity {
  7.   @Override
  8.   protected void onCreate(Bundle savedInstanceState) {
  9.     super.onCreate(savedInstanceState);
  10.     WeChatModule.handleIntent(getIntent());
  11.     finish();
  12.   }
  13. }

WXPayEntryActivity.java

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import com.theweflex.react.WeChatModule;
  6. public class WXPayEntryActivity extends Activity {
  7.   @Override
  8.   protected void onCreate(Bundle savedInstanceState) {
  9.     super.onCreate(savedInstanceState);
  10.     WeChatModule.handleIntent(getIntent());
  11.     finish();
  12.   }
  13. }

2.2.3 修改 android/settings.gradle

在最后添加如下的内容

  1. include ':RCTWeChat'
  2. project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')

2.2.4 修改 AndroidManifest.xml

添加如下的内容

  1. <application>
  2.   <activity
  3.             android:name=".wxapi.WXEntryActivity"
  4.             android:label="@string/app_name"
  5.             android:exported="true"
  6.             />
  7.   <activity
  8.             android:name=".wxapi.WXPayEntryActivity"
  9.             android:label="@string/app_name"
  10.             android:exported="true"
  11.             />
  12. </application>

2.3页面测试

与上述的alipay相同，其中的差别为支付响应函数

  1. _wxpay = async () => {
  2.   WeChat.registerApp('your appid').then((res) => {
  3.     console.log('res', res);
  4.   });
  5.   var options = {
  6.     method: 'GET'
  7.   }
  8.   fetch('http://your-server-address, options)
  9.     .then((response) => {
  10.     return response.text();
  11.   }).then((responseText) => {
  12.     let resData = JSON.parse(responseText);
  13.     let payObject = resData.data;
  14.     let payData = {
  15.       partnerId: payObject.partnerid,  // 商家向财付通申请的商家id
  16.       prepayId: payObject.prepayid,   // 预支付订单
  17.       nonceStr: payObject.noncestr,   // 随机串，防重发
  18.       timeStamp: payObject.timestamp    ,  // 时间戳，防重发.
  19.       package: 'Sign=WXPay',    // 商家根据财付通文档填写的数据和签名
  20.       sign: payObject.paySign       // 商家根据微信开放平台文档对数据做的签名
  21.     }
  22.     WeChat.pay(payData).then((success) => {
  23.       console.log("支付成功" + success)
  24.     }).catch((error) => {
  25.       if (error.errCode == -2) {
  26.         console.log('取消支付')
  27.       }else{
  28.         console.log('支付失败' + error);
  29.       }
  30.     })
  31.   });      
  32. }

2.4 进行测试

如果一切顺利，且微信公众平台的配置无误的话，应该是能够调起支付的