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

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

微信支付

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

注意踩坑

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

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表单，然后我们插入前端，通过提交表单拉起支付宝支付

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

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

• 支付成功的回调需要到后端配置
• java支付宝H5及回调https://blog.youkuaiyun.com/zcl_666/article/details/75655530 相关文章