问题背景:
支付宝的APP支付功能比较好开通,H5支付比较难申请,或者说比较麻烦。所以需要实现:H5页面如何实现支付宝的APP支付功能
问题分析:
1、H5页面是否可以直接拉起支付宝支付
2、H5页面是否可以拉起支付宝,在支付宝内拉起支付
问题解决:
1、H5页面不可以直接拉起APP支付,使用支付宝H5/网站支付是可以的
2、H5页面是否可以拉起支付宝,并跳转指定的页面,在该页面在进行自动拉起支付宝支付,这个业务逻辑是可以实现的。
主要技术点:
1、Android/ios中浏览器H5页面跳转拉起支付宝,并跳转指定的页面(url)
2、在支付宝H5环境进行支付宝APP支付的拉起
具体实现:
1、参考文章:浏览器H5如何拉起支付宝APP,并跳转指定的页面-CSDN博客
2、在支付宝H5环境进行拉起支付宝APP支付
a、需要先加载js:加载的js(https://download.csdn.net/download/ahualong1/90069355)
const script = document.createElement('script');
script.src = "https://alipayjsapi.inc.min.js";
script.onload = function() {
this.$utils.toastDebug("进入了这个里22222")
this.isLoaded = true; // 设置isLoaded为true,表示加载完成
if (typeof this.onScriptLoadCallback === 'function') { // 如果有回调函数
this.onScriptLoadCallback(); // 调用回调函数
}
}.bind(this);
document.head.appendChild(script); // 动态添加到头部
b、js加载完成,调用了onScriptLoadCallback 方法,该方法中写拉起支付的具体代码:
//使用APP支付功能 直接在支付宝H5环境进行拉起APP支付
// ap.tradePay({
// tradeNO: that.pay_records_id
// }, function(res){
// ap.alert("打印数据 " + JOSN.stringify(res));
// });
// AlipayJSBridge.call("tradePay", {
// tradeNO: that.pay_records_id
// }, function(result) {
// alert(JSON.stringify(result));
// });
AlipayJSBridge.call("tradePay", {
orderStr: res.data.data.h5_url
}, function(result) {
// alert(JSON.stringify(result));
if(result.resultCode === '9000'){
uni.showToast({
title: "支付成功",
duration: 2000,
icon: "none"
})
}else if(result.resultCode === '6001'){
uni.showToast({
title: "取消支付",
duration: 2000,
icon: "none"
})
}else{
uni.showToast({
title: result.memo,
duration: 2000,
icon: "none"
})
}
});
具体可以参考文档:小程序文档 - 支付宝文档中心
到这里整个的业务逻辑就实现了,如有不正确的地方,欢迎各位大佬进行回复,谢谢🙏