前端 H5 使用微信支付成功,返回页面时出现异常。

发布于 2022-09-11 23:21:21 字数 1025 浏览 32 评论 0

有一个需求,要求 H5 页面在外部浏览器里(非微信/支付宝),调用手机的微信/支付宝进行付款。

经过前后端的努力,支付宝完美实现了这个功能。这个正常的流程是:

  1. 在浏览器 app 的页面里不打开新标签页直接访问接口拿到的付款链接。
  2. 链接打开后呼出支付宝 app 由用户操作付款并点击完成按钮。
  3. 跳转回原本的浏览器 app 并访问付款成功页面。

我以为到微信上会更简单,因为只需要前端拼接 redirect_url ,结果效果非常不完美。我把 官方文档 看了几次,百度谷歌的也看了个遍,只能把付款功能实现到这个程度:

  • iOS 的 Chrome 在第 3 步会跳到 Safari 并打开 redirect_url (貌似其他浏览器最终都会跳回 Safari,未经过大量验证)。
  • iOS 的 Safari 上,步骤 123 一切正常。
  • Android 的 Chrome 在第 3 步里跳转 app 成功,但是不会访问 redirect_url ,而是访问原来的页面。
  • Android 的 Firefox 上,步骤 123 一切正常。

我的源码是这样的:

window.location.href = `${支付链接}&redirect_url=${encodeURIComponent(
    `${window.location.origin}/#/done?orderId=${参数}`
)}`;

请问,iOS 的 Chrome 浏览器如何在微信支付成功后跳转回自己本身(我也试过网友说的去掉跳转链接里的 https:// 但是的确不跳转 Safari 了却也不跳转回 Chrome),以及 Android 的 Chrome 浏览器如何在微信支付成功后打开指定的 redirect_url 而不是访问原页面?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

白芷 2022-09-18 23:21:21

HASH路由的问题 可以尝试 回调到一个静态页面 在这个页面再做自己的逻辑

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文