React Native之支付集成(微信 支付宝)(ios android)

React Native之支付集成(微信 支付宝)(ios android)

一,需求分析

1.1,app在线充值与提现

二,技术介绍与集成

2.1,微信支付

2.1.1,Android配置

详细配置可查看React Native之微信分享(iOS Android),这里主要介绍的是支付方面的配置

第一步:创建名为'wxapi'的文件夹，并在文件夹内创建WXPayEntryActivity.java，用于获得微信的授权和支付权限。

 package your.package.wxapi;

 import android.app.Activity;
 import android.os.Bundle;
 import com.theweflex.react.WeChatModule;

 public class WXPayEntryActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     WeChatModule.handleIntent(getIntent());
     finish();
   }
 }

第二步:在AndroidManifest.xml文件中添加刚刚创建的Actiivty的配置

 <manifest>
   <application>

    ...

     <activity
       android:name=".wxapi.WXPayEntryActivity"
       android:label="@string/app_name"
       android:exported="true"
     />
   </application>
 </manifest>

第三步:添加混淆设置,在proguard-rules.pro中添加如下代码，当然如果不混淆就不安全啦

 -keep class com.tencent.mm.sdk.** {
    *;
 }

2.1.2,ios配置

详细配置可查看React Native之微信分享(iOS Android),支付方面的配置在React Native之微信分享(iOS Android)已完成

2.2,支付宝支付

在蚂蚁金服开放平台https://open.alipay.com/platform/manageHome.htm申请应用，并签约https://open.alipay.com/platform/home.htm

2.2.1,Android配置

第一步:在android/app目录下新建libs目录

第二步:将alipaySdk-15.5.7-20181023110917.aar (目前最新版的sdk类库)包放入android/app/libs目录下，如下图。

第三步:在android/build.gradle 中，添加下面的内容，将 libs 目录作为依赖仓库：

 allprojects {
     repositories {
          // 添加下面的内容
         flatDir {
             dirs 'libs'
         }
       // ... jcenter() 等其他仓库
         jcenter()
         google()
     }
 }

第四步:在android/app/build.gradle文件里面支付宝 SDK 作为项目依赖：

 dependencies {

     // 添加下面的内容
     implementation (name: 'alipaySdk-15.5.7-20181023110917', ext: 'aar')

     // ... 其他依赖项
 }

第五步:在android/app/proguard-rules.pro添加混淆规则，增加安全性

 -keep class com.alipay.android.app.IAlixPay{*;}
 -keep class com.alipay.android.app.IAlixPay$Stub{*;}
 -keep class com.alipay.android.app.IRemoteServiceCallback{*;}
 -keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*;}
 -keep class com.alipay.sdk.app.PayTask{ public *;}
 -keep class com.alipay.sdk.app.AuthTask{ public *;}
 -keep class com.alipay.sdk.app.H5PayCallback {
  <fields>;
  <methods>;
 }
 -keep class com.alipay.android.phone.mrpc.core.** { *; }
 -keep class com.alipay.apmobilesecuritysdk.** { *; }
 -keep class com.alipay.mobile.framework.service.annotation.** { *; }
 -keep class com.alipay.mobilesecuritysdk.face.** { *; }
 -keep class com.alipay.tscenter.biz.rpc.** { *; }
 -keep class org.json.alipay.** { *; }
 -keep class com.alipay.tscenter.** { *; }
 -keep class com.ta.utdid2.** { *;}
 -keep class com.ut.device.** { *;}

第六步:在android/app/src/com/main/java/xx/xx下创建包名alipay,和微信支付一样，处理回调

第七步:编写 Module，在alipay包下创建AlipayModule.java，代码如下：

 package com.项目工程名.alipay;

 import com.alipay.sdk.app.PayTask;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.WritableMap;
 import java.util.Map;

 public class AlipayModule extends ReactContextBaseJavaModule {

  public AlipayModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "Alipay";
  }

  @ReactMethod
  public void pay(final String orderInfo, final Promise promise) {
    Runnable payRunnable = new Runnable() {
      @Override
      public void run() {
        WritableMap map = Arguments.createMap();
        PayTask alipay = new PayTask(getCurrentActivity());
        Map<String, String> result = alipay.payV2(orderInfo,true);
        for (Map.Entry<String, String> entry: result.entrySet())
          map.putString(entry.getKey(), entry.getValue());
        promise.resolve(map);
      }
    };
    // 必须异步调用
    Thread payThread = new Thread(payRunnable);
    payThread.start();
  }

 }

第八步:编写 Package，在alipay包下创建AlipayPackage.java，代码如下：

 package com.项目工程名.alipay;

 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager;
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;

 public class AlipayPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
          ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new AlipayModule(reactContext));
    return modules;
  }

 }

第九步:在MainApplication中注册模块：

 ...

 import com.项目工程名. AlipayPackage; 

 ...

 @Override
 protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      // ...other packages
      new AlipayPackage() // <-- 注册模块
  );
 }

2.2.2,iOS配置

第一步:启动Xcode，把iOS包中的压缩文件中以下文件拷贝到项目文件夹下，并导入到项目工程中。

AlipaySDK.bundle
AlipaySDK.framework

第二步:在Build Phases选项卡的Link Binary With Libraries中，增加以下依赖：

第三步:在项目目录下创建Group Alipay，并创建AlipayMoudle模块，如下图所示：

第四步:编写AlipayModule.h代码如下：

 /**
  * Created by jackson影琪 on 2018/12/05.
  */
 #import <React/RCTBridgeModule.h>
 #import <React/RCTLog.h>
 #import <Foundation/Foundation.h>

    @interface AlipayModule : NSObject <RCTBridgeModule>

 @end

第五步:编写AlipayModule.m代码如下：

 /**
  * Created by jackson影琪 on 2018/12/05.
  */

 #import <Foundation/Foundation.h>
 #import "AlipayModule.h"
 #import <AlipaySDK/AlipaySDK.h>

    @implementation AlipayModule

    RCT_EXPORT_METHOD(pay:(NSString *)orderInfo
     resolver:(RCTPromiseResolveBlock)resolve
     rejecter:(RCTPromiseRejectBlock)reject)
 {
     //应用注册scheme,在AliSDKDemo-Info.plist定义URL types
     NSString *appScheme = @"zftest";
      [[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
     resolve(resultDic);
   }];
  }

 RCT_EXPORT_MODULE(Alipay);

 @end

第六步:应用注册scheme,在AliSDKDemo-Info.plist定义URL types，箭头所指的设置必须和上一步中的NSString *appScheme = @"zftest";必须保持一致，否则在支付成功后没法回到商户app中，同样和无法拿到成功与否的结果，这是一个坑，注意了。

第七步:.iOS9 以上，添加白名单,直接编辑编辑 Info.plist：

 <key>LSApplicationQueriesSchemes</key>
 <array>
     <string>alipay</string>
     <string>weixin</string>
     <string>wechat</string>
 </array>

或给 LSApplicationQueriesSchemes 添加三个值 alipay、weixin、wechat

到此为止,基本配置完成

三,使用

3.1,微信支付使用

详细使用可查看React Native之微信分享(iOS Android),这里主要介绍的是支付方面的使用

 // 微信支付
     WeChatPayment = () => {
        WeChat.isWXAppInstalled()
                                             .then((isInstalled) => {
                                                    if (isInstalled) {
                                                         WeChat.pay({
                                                             partnerId: 'xxxxxx',  // 商家向财付通申请的商家id
                                                             prepayId: 'xxxxxx',   // 预支付订单
                                                             nonceStr:'xxxxxx',   // 随机串，防重发
                                                             timeStamp: 'xxxxxxx'    ,  // 时间戳，防重发.
                                                             package: 'Sign=WXPay',    // 商家根据财付通文档填写的数据和签名
                                                             sign: 'xxxxxxxxx'       // 商家根据微信开放平台文档对数据做的签名
                                                             }).then((requestJson)=>{
                                                                       //支付成功回调
                                                                       if (requestJson.errCode=="0"){
                                                                        //回调成功处理
 Toast.show('已成功支付')
                                                                       }
                                                                   }).catch((err)=>{
                                                                         Toast.show('支付失败')
                                                                   })
                                                     } else {
                                                        Toast.show('您还没有安装微信，请安装微信之后再试');
                                                     }
                                              });

     }

以下数据从后台获取

 {
     partnerId: '',  // 商家向财付通申请的商家id
     prepayId: '',   // 预支付订单
     nonceStr: '',   // 随机串，防重发
     timeStamp: '',  // 时间戳，防重发
     package: '',    // 商家根据财付通文档填写的数据和签名
     sign: ''        // 商家根据微信开放平台文档对数据做的签名
   }

微信支付状态监听

 //监听 支付状态
         // 'SendMessageToWX.Resp' 分享监听字段
         // 'PayReq.Resp'          支付监听字段
         // 'SendAuth.Resp'        登录监听字段
         wechat.addListener(
             'PayReq.Resp',
             (response) => {
                 if (parseInt(response.errCode) === 0) {
                     toastShort('支付成功');
                 } else {
                     toastShort('支付失败');
                 }
             }
         );

3.2,支付宝支付使用

支付宝支付调用:

 import { NativeModules } from 'react-native';

 ...

 async pay(res) { // params 为后端提供的参数
     let ret = await NativeModules.Alipay.pay(res.result); // 调起支付宝，发起支付
     if (ret.resultStatus === '') {
        Toast.show('已成功支付');
       // 支付成功回调
     } else {
       Toast.show('支付失败');
       // 支付失败回调
     }
   }
  

返回的状态码对应的信息:

  switch (data[0].resultStatus) {
             case "9000":
               opt.success && opt.success(data)
               break;
             case "8000":
               opt.fail && opt.fail('支付结果未知,请查询订单状态')
               break;
             case "4000":
               opt.fail && opt.fail('订单支付失败')
               break;
             case "5000":
               opt.fail && opt.fail('重复请求')
               break;
             case "6001":
               opt.fail && opt.fail('用户中途取消')
               break;
             case "6002":
               opt.fail && opt.fail('网络连接出错')
               break;
             case "6004":
               opt.fail && opt.fail('支付结果未知,请查询订单状态')
               break;
             default:
               opt.fail && opt.fail('其他失败原因')
               break;
           }

后台返回的数据格式为:

 //res是支付宝服务器返回的数据，格式为：
 {
     "code": 200,
     "status": "success",
     "message": "",
     "result": "alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2xxxxxxxxxx"
 }