React-native 0.6版本集成支付宝-Alipay爬坑

前言

项目里需要做支付， 在github看到的插件多多少少都遇到了坑， 实在是爬不出来。参考了支付宝官方文档 还有别的一些大佬的文章，做个记录

安卓集成

1.在app目录下新建libs目录,将sdk 包放在应用工程的 libs 目录下

2.在主项目的 build.gradle 中，添加下面的内容，将 libs 目录作为依赖仓库：

    allprojects {
    repositories {

        // 添加下面的内容
        flatDir {
            dirs 'libs'
        }

        // ... jcenter() 等其他仓库
    }
}

3.App Module 的 build.gradle中（项目的app 目录下），添加下面的内容，将支付宝 SDK 作为项目依赖：

//官方用的是compile，两者都可以 用implementation更好
 implementation (name: 'alipaySdk-15.6.5-20190718211159-noUtdid', ext: 'aar')

4.支付宝 SDK 需要使用下面这些权限，在AndroidManifest.xml下添加：

以上sdk的配置基本完成 下面就需要和原生做桥接（下面代码基本是copy另一位大佬的，膜拜）

5.android/app/src/main/java/com.xx下创建alipay，如下图

6.创建AlipayModule.java，代码如下：
（注意： 第一行的包名一定要写对）

package com.xxxx.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 result = alipay.payV2(orderInfo,true);
                for (Map.Entry entry: result.entrySet())
                    map.putString(entry.getKey(), entry.getValue());
                promise.resolve(map);
            }
        };
        // 必须异步调用
        Thread payThread = new Thread(payRunnable);
        payThread.start();
    }

}

7.创建AlipayPackage.java，代码如下：（还是要注意包名）

package com.xxxx.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 createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

}

8.在com.xxxx下的MainApplication中注册模块：
（注意：这里和原文有点区别 0.6版本的添加包与旧版本有些区别）

@Override
    protected List getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
       packages.add(new AlipayPackage());
      return packages;
    }

react-native调用

1.编写Alipay.js工具类

import { NativeModules } from 'react-native';
export default NativeModules.Alipay;

2.在支付页面调用Alipay发起支付宝支付：

import Alipay from './Alipay'
 async aliPayAction(payStr){
       //payStr为从后台获取的支付字符串
        Alipay.pay(payStr).then((data) =>{
           let resultDic = {};
/*笔者iOS端和安卓端返回的支付回调结果数据不一致，可能和支付宝sdk版本有关，
读者可自行根据返回数据进行相关处理，iOS(RCTAlipay.m)和安卓(AlipayModule)
可自行选择需要resolve回调判断处理的数据，如只返回resultStatus*/
            if (Platform.OS === 'ios'){
                resultDic = data[0];
            } else {
                resultDic = data;
            }
            if (resultDic.resultStatus == '9000'){
                //支付成功
            }else {
                //支付失败
            }
        }).catch((err) => {
            console.log('err='+err);
            this.refs.toast.show('支付失败');
        });
    }

到这里支付宝就集成完了，刚开始一头雾水,看了下rn的官方文档，支付宝的官方文档，还有其他大佬的文章。终于拼凑完成了。做个记录
Happy Hacking

参考1:支付宝集成官方文档
参考2:react-native集成支付宝支付)