本文主要介绍如何接入支付宝支付。
功能:
- H5支付
- 唤起支付宝支付
安装:
ohpm install @cashier_alipay/cashiersdk
一、使用
1、默认方式,H5通过router进行跳转
// orderInfo 由服务端生成
// 第二个参数 控制是否展示支付宝loading
new Pay().pay(orderInfo, true).then((result) => {
let message = `resultStatus: ${result.get('resultStatus')} memo: ${result.get('memo')} result: ${result.get('result')}`;
console.log(message);
}).catch((error: BusinessError) => {
console.log(error.message);
});
2、使用navigator进行跳转(使用系统路由表)
new Pay().payWithNav(orderInfo, true, undefined, this.pageInfos).then((result) => {
let message = `resultStatus: ${result.get('resultStatus')} memo: ${result.get('memo')} result: ${result.get('result')}`;
console.log(message);
}).catch((error: BusinessError) => {
console.log(error.message);
});
3、使用navigator进行跳转
步骤一:通过调用payWithNav方法
- 第三个参数由sdk回调传入H5页面名称和需要传入到H5页面的参数,开发者自行进行nav跳转
- 第四个参数必传,传入 NavPathStack 实例
new Pay().payWithNav(orderInfo, true, (name: string, params: Object) => {
this.pageInfos.pushPathByName(name, params);
}, this.pageInfos).then((result) => {
let message = `resultStatus: ${result.get('resultStatus')} memo: ${result.get('memo')} result: ${result.get('result')}`;
console.log(message);
}).catch((error: BusinessError) => {
console.log(error.message);
});
步骤二: 在你的navigation的navDestination builder中配置对应页面
Navigation(this.pageInfos)...
.navDestination(this.PagesMap)
...
@Builder
PagesMap(name: string, navPageIntent: Map<string, Object>) {
if (name === 'alipay/cashier/H5Page') {
// name 固定为这个,当然如果你的项目支持动态import的话可以使用回调中的name,二者值一致
AlipayH5Page({ navPageIntent: navPageIntent })
}
}
4、日志获取
Log.setupLogCallback((log) => {
hilog.info(0x00, "sdk_demo", log);
});