鸿蒙Next(七)cashiersdk:支付宝支付

300 阅读1分钟

本文主要介绍如何接入支付宝支付。

功能:

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