接到一个需求，开发一个H5的活动页面，实现购买会员的功能，前面的开发，对接接口一切都很顺利，但是在支付上的处理跟测试人员花了挺长时间，所以打算记录一下，下次就不会出现这种情况了。
项目不在微信内部浏览器打开，如果有相关需求的小伙伴下面的内容就不太适用了。
相关文档：
微信支付：pay.weixin.qq.com/wiki/doc/ap…
支付宝支付：opendoc.alipay.com/open/00a0ut
获取支付链接
H5支付其实挺简单的，项目挺简单的，就两个页面：购买页面，购买成功-app下载页
现在就从拿到生成订单这边说起。
用户选择会员之后，选择支付方式，点击购买。
前端判断token，没有则先登录，之后就是将会员信息（订单信息）发送给服务端，之后你会拿到服务端返回的数据。
支付宝支付的返回结果：
微信支付的返回结果：
文档中都有提到回调地址，但是有一个问题，微信支付无论订单是否支付成功，都会访问回调地址。支付宝则只有订单支付成功之后才会访问回调地址。所以这两种情况处理
微信的支付处理
我这边的做法是，直接用window.location打开页面。
用户打开页面之后，有以下几种操作：支付，取消支付。由于微信不管有没有完成支付都会跳转回调地址。
所以我的 回调页面 还是购买页，不过在跳转前手动加上了订单相关信息以及token。与后端返回的地址拼接之后再跳转。
针对微信支付无法判断订单状态的问题，只能我们在回调的页面进行判断，如果地址中带了订单信息，就打开【是否完成支付的】弹窗。
用户点击【否】->关闭弹窗，购跳转回买页面
用户点击【是】->用订单信息校验，是否购买成功。购买成功则跳转购买成功-app下载页
支付宝支付处理
支付宝的回调跳转没有出现问题，只要让后端配置好相应的地址就可以了，前端可以不用管。
一开始的跳转代码：
由于项目是有多个level的会员，测试的时候出现用户点击【会员1-100元】，点击支付之后，取消支付，返回了购买页，再点击【会员2-200元】点击支付，会出现支付的金额还是100元的bug.
最后的解决办法是
更新之后就不会出现上面的问题了。
结语
目前还有存在一个bug： 当用户没有安装微信的时候，点击支付之后浏览器显示白屏，没有回调页。考虑到这个情况出现概率低就没解决，不过要是有什么办法，欢迎讨论一下，我学习学习~
第一次写文章，有点生疏，各位大佬见谅~
