乐趣区

Reactnative-06版本集成支付宝Alipay爬坑

jiezi

前言

项目里需要做支付，在 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 下添加：
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.CAMERA"/>

以上 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<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();}

}

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<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;
    }

}

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

@Override
    protected List<ReactPackage> getPackages() {@SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> 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 集成支付宝支付)

退出移动版