H5支付在后台返回支付 URL 后,通常使用 window.open 或者 location.href 都会跳转到一个空页面然后调起微信支付,
请问一下大家,如何像京东或者华为商城一样,在不跳转页面的情况下调起微信支付,取消支付后还是回到原来的页面,并且没有刷新页面
像这样:当我点击微信支付的是否,是在原来的页面上打开并挑起微信支付,取消支付后还是在原来的页面(图2)
有使用过 iframe,但在苹果手机上调不起来
const iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.setAttribute("src", url);
iframe.setAttribute("sandbox", "allow-top-navigation-by-user-activation allow-scripts");
iframe.onload = function () {
// 4秒后删除 iframe,否则会跳回上一个页面
setTimeout(() => {
document.body.removeChild(iframe);
}, 4000);
};
document.body.appendChild(iframe);
正常流程用户支付完成后会返回至发起支付的页面,如需返回至指定页面,则可以在MWEB_URL后拼接上redirect_url参数,来指定回调页面。
如,您希望用户支付完成后跳转至https://www.wechatpay.com.cn,则可以做如下处理:
假设您通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn
注意:
1.需对redirect_url进行urlencode处理
2.由于设置redirect_url后,回跳指定页面的操作可能发生在:1,微信支付中间页调起微信收银台后超过5秒 2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时,支付流程已结束,所以商户设置的redirect_url地址不能自动执行查单操作,应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图