这两天写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及回调blog.csdn.net/zcl_666/art… 相关文章