共计 3471 个字符,预计需要花费 9 分钟才能阅读完成。
前言
项目里需要做支付,在 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 集成支付宝支付)
正文完
发表至: react-native
2019-10-22