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

697 阅读2分钟

问题背景: 支付宝的APP支付功能比较好开通,H5支付比较难申请,或者说比较麻烦。所以需要实现:H5页面如何实现支付宝的APP支付功能

问题分析: 1、H5页面是否可以直接拉起支付宝支付

2、H5页面是否可以拉起支付宝,在支付宝内拉起支付

问题解决: 1、H5页面不可以直接拉起APP支付,使用支付宝H5/网站支付是可以的

2、H5页面是否可以拉起支付宝,并跳转指定的页面,在该页面在进行自动拉起支付宝支付,这个业务逻辑是可以实现的。

主要技术点: 1、Android/ios中浏览器H5页面跳转拉起支付宝,并跳转指定的页面(url)

2、在支付宝H5环境进行支付宝APP支付的拉起

具体实现: 1、参考文章: ios具体实现

window.location.href = "https://ulink.alipay.com/?scheme=" + encodeURIComponent('alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(window.location.href + '?selectedInta=' + this.selectedInta + "&userTel=" + this.userTel + "&goodsId=" + this.goodsId));

Android实现:

window.location.href = "https://ulink.alipay.com/?scheme=" + encodeURIComponent('alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=' + encodeURIComponent(window.location.href + '?selectedInta=' + this.selectedInta + "&userTel=" + this.userTel + "&goodsId=" + this.goodsId));

2、在支付宝H5环境进行拉起支付宝APP支付

a、需要先加载js:加载的js(download.csdn.net/download/ah…

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

具体可以参考文档:opendocs.alipay.com/open/02502j

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