纯血鸿蒙原生应用APP怎么接入支付宝支付

纯血鸿蒙原生应用APP怎么接入支付宝支付

在当下的app集成支付 进行app应用内部购买 是一件很常规的功能，接下来 看下 在当下很火的移动操作系统 鸿蒙版本 怎么接入支付宝支付？

功能说明

1： H5支付
2：唤起支付宝支付
3：H5转native支付

tip：目前上面我们常见的三种方式，本人一般用第三种；
先贴支付完成图

版本说明

compileSdkVersion
12

minSdkVersion
12

安装说明

ohpm install @cashier_alipay/cashiersdk

使用说明

配置
唤起支付宝 APP, 需要在项目 entry 中的 module.json5 中增加如下配置

“module”: {
…
“querySchemes”: [
“alipays”
],

使用 - H5转native支付

// 在你的H5容器中拦截url加载

Web({
src: ‘https://xxx/xx’,
controller: this.webviewController,
})
…
.onLoadIntercept((event) => {
let data = event.data;
let url = data.getRequestUrl();
if (!(url.startsWith(“http”) || url.startsWith(“https”))) {
return false;
}
console.log(alipay: url: ${url});
//url 可以通过此if判断： if (url.includes(“https://mclient.alipay.com/cashier/mobilepay.htm?”))
let result = new Pay().payInterceptorWithUrl(url, true, (result) => {
let resultCode = result.get(“resultCode”);
let returnUrl = result.get(“returnUrl”);
console.log(resultCode: ${resultCode}, returnUrl: ${returnUrl});
// 如果url不为空，建议商户跳转到对应url，当然也可自行处理
this.webviewController.loadUrl(returnUrl);
/*
* 返回码，标识支付状态，含义如下：
* 9000——订单支付成功
* 8000——正在处理中
* 4000——订单支付失败
* 5000——重复请求
* 6001——用户中途取消
* 6002——网络连接出错
*/

              if (resultCode == "9000") {
                ToastUtil.showToast("支付成功")
              } else if (resultCode == "6001") {
                ToastUtil.showToast("支付被取消")              
              } else if (resultCode == "5000") {        
                ToastUtil.showToast("重复请求")
              } else if (resultCode == "4000") {                
                ToastUtil.showToast("支付失败")
              } else if (resultCode == "6002") {                  
                ToastUtil.showToast("网络连接出错")
              } else if (resultCode == "6002") {                 
                ToastUtil.showToast("正在处理中")
              } else {
                ToastUtil.showToast("resultCode::::::" + resultCode)
              }
});
return result;

})

使用 - 直接支付功能

未安装支付宝 APP 是跳转 H5 支付，已安装支付宝 APP 会直接跳转 APP 支付 通过 router 跳转或者通过 navigation 跳转，只针对未安装支付宝 APP 时跳转 H5 的方式有差异
1：默认方式，H5通过router进行跳转（备注：很多小伙伴认为h5支付 app原生上层就不用写代码，其实是不行的，在实操过程中会点击没反应），所以要通过 router跳转 或者 navigation进行跳转；
// orderInfo 由服务端生成或者H5f返回给web层
// 第二个参数 控制是否展示支付宝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进行跳转 ```typescript

步骤一：通过调用payWithNav方法
第三个参数由sdk回调传入H5页面名称和需要传入到H5页面的参数，开发者自行进行nav跳转
第四个参数必传 ，传入 NavPathStack 实例
api:
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 }) } }

3. 使用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);
  });

总结：纯血鸿蒙原生app 支付宝支付 功能完成。(推荐使用 - H5转native支付 )
谢谢大家，欢迎评论讨论。