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

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

1. 在当下的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——网络连接堕落
*/

1.               if (resultCode == "9000") {
2.                 ToastUtil.showToast("支付成功")
3.               } else if (resultCode == "6001") {
4.                 ToastUtil.showToast("支付被取消")              
5.               } else if (resultCode == "5000") {        
6.                 ToastUtil.showToast("重复请求")
7.               } else if (resultCode == "4000") {               
8.                 ToastUtil.showToast("支付失败")
9.               } else if (resultCode == "6002") {                  
10.                 ToastUtil.showToast("网络连接出错")
11.               } else if (resultCode == "6002") {                 
12.                 ToastUtil.showToast("正在处理中")
13.               } else {
14.                 ToastUtil.showToast("resultCode::::::" + resultCode)
15.               }
16. });
17. 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 }) } }

• 利用navigator进行跳转，利用体系路由表
  

1.   new Pay().payWithNav(orderInfo, true, undefined, this.pageInfos).then((result) => {
2.   let message =
3.   `resultStatus: ${result.get('resultStatus')} memo: ${result.get('memo')} result: ${result.get('result')}`;
4.   console.log(message);
5.   }).catch((error: BusinessError) => {
6.   console.log(error.message);
7.   });
9. 总结：纯血鸿蒙原生app 支付宝支付 功能完成。(推荐使用 - H5转native支付 )
10. 谢谢大家，欢迎评论讨论。

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。