这几天做WAP网站,涉及到微信支付和支付宝支付,在开通应用前只是针对技术文档做了预研,了解下程序的逻辑实现。结果导致后期开发中支付宝很顺利,毕竟API很强大。微信有些坑要填补,真是悲催。
第一个坑:浏览器兼容问题
回调页面
逻辑是这样的:一开始弹框是没有的,用户点击右下角的“确认支付”,显示弹框,跳转到微信。
重点是后面的操作,在微信中点击“取消”,有些浏览器回退后刷新了这个页面,导致弹框又没有了。
当时我想了个简单的办法:前端存储一个标记值在localStorage中,点击弹框中的按钮后,清除该值。
这是个幼稚的想法~假如用户没有点击弹框中的按钮,直接关掉页面或者其他操作,岂不是这个localStorage一直在,下次进入这个页面弹框立马就出来了。
所以我最终解决的办法是将该页面地址作为回调地址redirect_url传递过去,并且携带标记参数,是否需要弹出提示框。
第二个坑:回调地址提早请求了
官方文档这样说明:
微信API文档
回调指定页面的操作可能发生在:
1、支付中间页调起客户端超过5秒
2、点击“取消支付”或“完成”
然而通过打日志实践证明,当我成功调起微信收银台没几秒,还没点击"取消”或者支付,就已经请求了我的回调地址。
第三个坑:chrome、猎豹浏览器 回调到了 safari
第一次发现这个坑有点搞笑,明明在谷歌浏览器访问WAP网站进行支付,成功跳转到微信收银台,点击左上角的取消,莫名其妙的到了safari浏览器中,真是一趟跨界的旅行呵~
发现这个问题后,就去研究饿了么,美团的H5支付。