react-native项目快速接入支付宝支付,使用新版本react-native-alipay-payment模块
·
近期在RN项目中集成支付宝App支付(v2.0接口)时,选用第三方模块react-native-alipay-payment(项目地址:Dirinkbottle/react-native-alipay-payment: An npm package that integrates Alipay payments, eliminating your native integration),因其封装了原生集成逻辑,支持回调处理与完善错误机制。以下是客户端接入指南(服务端生成签名字符串 orderStr 的流程需参考支付宝官方文档):app支付接口2.0 - 支付宝文档中心
1. 安装和导入模块
bash
//安装
npm install react-native-alipay-payment --save
javascript
//导入
import AlipayPayment from 'react-native-alipay-payment';
2. Android权限配置(部分权限需动态申请)xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- 以下权限按需添加 -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
3. 核心API说明
(1)环境配置
javascript
//设置debug模式,会输出debug信息,需要结合logcat来看
AlipayPayment.setDebugMode(true)
// 沙箱模式(仅测试用)
AlipayPayment.setSandboxMode(true)
.then(() => console.log('切换至沙箱环境'))
.catch(error => console.error('环境切换失败', error));
// 正式环境
AlipayPayment.setSandboxMode(false);
// 查询环境状态
AlipayPayment.isSandboxEnabled()
.then(isEnabled => console.log(`当前环境:${isEnabled ? '沙箱' : '正式'}`));
(2)支付宝安装检测
javascript
AlipayPayment.isAlipayInstalled()
.then(installed => installed
? console.log('支付宝已安装')
: console.warn('未检测到支付宝,请引导用户安装')
);
(3)支付调用(orderInfo需服务端生成)
javascript
// 基础支付
AlipayPayment.pay(orderInfo)
.then(result => {
const status = result.resultStatus;
if (AlipayPayment.isPaymentSuccess(status)) {
console.log("支付成功");
} else {
console.error(`支付失败:${AlipayPayment.getPaymentMessage(status)}`);
}
});
// 简化支付(推荐)
AlipayPayment.payWithResult(orderInfo)
.then(result => {
if (result.success) console.log("支付成功");
else if (result.cancelled) console.log("用户取消");
else if (result.processing) console.log("处理中");
else console.error(`支付失败:${result.message}`);
});
(4)支付状态码参考
| 状态码 | 含义 |
|---|---|
| 9000 | 支付成功 |
| 8000 | 处理中 |
| 4000 | 支付失败 |
| 6001 | 用户取消 |
| 6002 | 网络错误 |
| 6004 | 未知错误 |
4. 注意事项
-
支付状态管理:
模块自动管理支付状态,通常无需手动重置。特殊场景(如状态异常)可使用:javascript
AlipayPayment.resetPaymentState().then(...); -
结果通知机制:
- SDK会同步返回支付结果至客户端(通过
payWithResult回调)。 - 支付宝服务器会异步通知服务端(需后端配置回调接口),建议结合两种结果验证支付状态。
- SDK会同步返回支付结果至客户端(通过
更多推荐


所有评论(0)