H5页面如何实现支付宝的APP支付功能

问题背景:

支付宝的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"
										  })
									  }
								    });

具体可以参考文档:小程序文档 - 支付宝文档中心

到这里整个的业务逻辑就实现了,如有不正确的地方,欢迎各位大佬进行回复,谢谢🙏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mark.1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值