在微信中使用支付宝支付

众所周知,微信和支付宝是死对头,两家相互封杀的历史也是由来已久。

作为微信公众号开发者,在实现支付时肯定会希望能够支持多种支付方式,然而直接在微信中打开支付宝链接会被跳转到如下页面,用户如果要接下去操作会非常麻烦,下面将会就这个问题给出解决方案。

方案

iFrame

虽然直接访问支付宝的链接是不行的,我们可以尝试将支付宝链接放在一个 iFrame 中,再添加一个悬浮的返回按钮方便用户关闭 iFrame。

然而此方法在微信近期更新 X5 内核后已经无法使用,只有版本低于 6.2.23 和部分安卓可用,所以就不在这里赘述了。

在外部浏览器中打开

既然在微信中打开链接不行,那么在浏览器中打开总行了吧,但是用户的订单信息也需要保存下来,如果让用户直接打开下单的页面,不仅要在服务器端存储用户填写的订单信息,自动登陆也是一件麻烦事。

所以我们干脆直接给用户创建订单,获取到支付的 URL 后,跳转到一个新的页面,在这个页面中我们提示用户需要在浏览器中打开。

这个页面的 URL 中包含支付宝的支付链接,用户在浏览器打开后,读取 URL 中的支付链接,直接跳转到该链接

注意点

我这里用到的是 AngularJS 并且路由切换方式使用的是 pushState,微信对该 API 的支持不是很好,在调用 pushState 后,页面的实际链接并不会改变,所以需要做一次全量刷新,我这里使用的是 location.href = '...' 这样的方法,当然也可以跳转后调用 location.reload(),或者利用后端的 302 重定向。

总结

国内的互联网真是一朵奇葩,不仅本身的网络是一个大局域网,甚至微信在这样的大局域网中还要创建一个小局域网,上文的这种中国特色的实现方式不得不说是一种无奈的妥协。

希望中国早日实现 WWW。