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"

 }