微信官方文档 

https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4

 

这里只讨论前端需要做的工作，

1-3 步骤是后台完成的，

 1、前端仅仅需要调用后台的接口传递要购买的商品的某些参数，

接口返回一个url就是上图步骤3中的mweb_url

2、拿到的mweb_url之后前端唯一需要做的就是拼接上redriect_url 

注意 （1）这个redirect_url 必须是申请h5支付时候填入的授权域名下的网址，否则亲测会出错。

（2）redirect_url必须要encode, 否则回调的时候要么会报错，要么会获取不到该url后面附带的参数

比如 完整的url是  http://test.com?status=done&lang=zh,   如果不encode，那么回调的地址就是http://test.com?status=done， 我测试的时候丢失了后面的第二个参数lang

之后用encodeURIComponent(url), encode 之后就可以正常跳转了。【这是我遇到的问题，仅供大家参考， 官方文档也明确说了回调地址必须encode】

3、上述步骤时候得到了一个完整的url 如官方文档所示

在浏览器中h5支付的时候仅需要  window.location.href = url  【处理过后的url】即可

注意（1）跳转的域名必须是申请h5支付时候填入的授权域名下的网址，否则会报错【商家存在未配置的参数，请联系商家解决】，如官方文档所示

（2）在android的webview中，需要安卓端设置referer = 申请h5支付时候填入的授权域名地址，如官方文档所示

 

综上所述，h5支付 so easy~

 

 

----- 更新------

按照上述方法都没问题，但是突然找到一个android 7的手机，然后还是会提示【商家存在未配置的参数，请联系商家解决】经过移动端小伙伴研究，换了一种设置referer的方式就好了

所以，如果同样有这样的问题，可以让移动端同学，检查一下设置referer的方法，仅供参考