1.将支付宝alipaysdk-15.8.06.211122170115.aar
(支付宝sdk下载地址)文件放入android/app/libs 文件夹下面(没有的话就新建一个)
2.查看android/app/build.gradle
文件,找到dependencies 在里面加上
implementation fileTree(dir:"libs",include: ["*.jar","*.aar"])
3.在android/app/src/main/AndroidMainifest.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.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
4.在android/app/src/main/java/com.xxx
下面创建alipay文件夹
5.在创建的alipay文件下新建PayModule.java
和PayPackage.java
(注意修改以下package为自己项目对应的)
PayModule.java
代码如下
package com.xxx.alipay; import com.alipay.sdk.app.PayTask; import com.alipay.sdk.app.EnvUtils; import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.Callback; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.facebook.react.bridge.ReadableMap; import com.facebook.react.bridge.WritableMap; import java.util.Map; public class PayModule extends ReactContextBaseJavaModule { private final ReactApplicationContext reactContext; public PayModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "PayModule"; } @ReactMethod public void setAlipayScheme(String scheme){ } @ReactMethod public void setAlipaySandbox(Boolean isSandbox) { if (isSandbox) { EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX); } else { EnvUtils.setEnv(EnvUtils.EnvEnum.ONLINE); } } @ReactMethod public void alipay(final String orderInfo, final Callback promise) { Runnable payRunnable = new Runnable() { @Override public void run() { PayTask alipay = new PayTask(getCurrentActivity()); Map<String, String> result = alipay.payV2(orderInfo, true); WritableMap map = Arguments.createMap(); map.putString("memo", result.get("memo")); map.putString("result", result.get("result")); map.putString("resultStatus", result.get("resultStatus")); promise.invoke(map); } }; // 必须异步调用 Thread payThread = new Thread(payRunnable); payThread.start(); }}
PayPackage.java代码如下
package com.xxx.alipay; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.JavaScriptModule; 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 PayPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new PayModule(reactContext)); return modules; } // 早期版本的RN如果有报错取消这个注释即可 // @override public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); }}
6.在com.xxx下面的MainApplication.java
中注册模块
下面我们需要在react-native中调用Android支付唤起支付宝方法
1.添加工具类Alipay.js
import { NativeModules } from 'react-native'; export default NativeModules.PayModule;
2.在支付页面引入
import PayModule from './Alipay'; /** * 唤起支付宝app支付 * @param {*} payStr 为后端接口返回的支付参数 */const aliPayAction = async payStr => { PayModule.alipay(payStr, res => { const { resultStatus } = res; const resObj = { '6001': '支付取消', '6002': '网络连接出错', '4000': '支付失败', '5000': '重复请求' }; if (resultStatus === '9000') { // 支付成功处理 .... } else { // 支付失败处理 ....... } });};
如有不清楚的可以留言、欢迎指正。(客户端Android集成流程)