前端H5支付,微信支付和支付宝支付

9,421

这两天写H5支付,记录一下,我这边几乎所有配置都是后端搞的,提交订单后

微信支付

  • 微信支付会返回一个mweb_url地址,支付跳转到微信支付中间页进行H5权限的校验,安全性检查
  • 用户在微信支付收银台完成支付或取消支付,返回商户页面(默认为返回支付发起页面)
  • 正常流程用户支付完成后会返回至发起支付的页面,如需返回至指定页面,则可以在mweb_url后拼接上redirect_url=+地址,来指定回调页面

注意踩坑

  • redirect_url地址需要通过进行urlencode处理
  • 取消支付或者支付成功都会跳转到这个地址,然后再进行订单查询,根据个人需求
  • 注意:不管是取消支付还是支付成功都会跳转到redirect_url地址,且在支付页面停留超过五秒也会自动跳转,所以没办法搞自动查询订单状态,需要自己写一个按钮引导用户点击之类的

image.png

payApi.wxPrepare({ orderSn: this.order.orderSn })
     .then((res) => {

     //唤起支付中间页地址  res.data.mwebUrl
       const url = escape(`${process.env.VUE_APP_WEB_URL}/#/applyText?orderSn=${this.order.orderSn}&totalPrice=${this.order.totalPrice}`)

     //url 相当于 https://www.baidu.com/#/applyText?orderSn=123456
     //escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
     // 进行地址拼接
       window.location.href = res.data.mwebUrl+`&redirect_url=${url}`
                    
				})

注:返回上一页还是会返回到中间页,这个要看你具体写法了,可在路由里面拦截或者重定向之类的

支付宝支付

  • 后端返回一个隐藏的form表单,然后我们插入前端,通过提交表单拉起支付宝支付

image.png

payApi.Alipay({ orderSn: this.order.orderSn })
	.then((res) => {
					// 调用支付宝
		const div = document.createElement('div')
                div.id = 'formdata'
		div.innerHTML = res
		document.body.appendChild(div)
                const form=document.getElementById('formdata');
		document.forms[0].submit()
                document.body.removeChild(form)
	})

注:不知道是不是我的问题,我每次返回当前页面都会重新拉取支付,所有表单提交之后就就删除了