前端H5调用微信支付

微信支付现在的应用场景以及越来越多了，微信的支付有公众号支付、H5支付，扫码支付等
今天要说的是其中的h5支付（原生浏览器及app）的支付方式。大致说一下流程和采过的坑。
H5支付主要是在微信外部，浏览器及其他APP所采用的一种方式；
首先需要在微信注册账号，申请改功能；申请入口：登录商户平台-->产品中心-->我的产品-->支付产品-->H5支付

支付流程

流程解析（摘自微信开发文档）：
1、用户在商户侧完成下单，使用微信支付进行支付
2、由商户后台向微信支付发起下单请求（调用统一下单接口）注：交易类型trade_type=MWEB
3、统一下单接口返回支付相关参数给商户后台，如支付跳转url（参数名“mweb_url”），商户通过mweb_url调起微信支付中间页
4、中间页进行H5权限的校验，安全性检查（此处常见错误请见下文）
5、如支付成功，商户后台会接收到微信侧的异步通知
6、用户在微信支付收银台完成支付或取消支付,返回商户页面（默认为返回支付发起页面）
7、商户在展示页面，引导用户主动发起支付结果的查询
8,9、商户后台判断是否接到收微信侧的支付结果通知，如没有，后台调用我们的订单查询接口确认订单状态
10、展示最终的订单支付结果给用户

主要意思就是：在下单的时候向后台发起请求，后台通过拿到的参数请求微信后台去生成一个订单，并返给你一个路径mweb_url，这个路径就是用来调起微信应用发起支付操作的。而我们拿到这个路径就可以跳转唤起微信支付了。

一定要注意的是

H5是获取不了微信的支付结果的，所以最好有一个中间页，或者蒙层来向后台查询这个支付的结果，否则，有时，你的用户手速太快，支付成功后返回回来，而你去请求查询支付结果，还没有处理到结果，返回未支付状态的时候，你的用户会懵逼，你的boss会打死你（别问了，问就是泪），所以 这个回调查询支付不能是自动查询，可以是过渡页，或者loading页，（最好是5s）

回调页面

正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在MWEB_URL后拼接上redirect_url参数，来指定回调页面。

如，您希望用户支付完成后跳转至https://www.alaal(拼接参数之类的)，则可以做如下处理：

假设您通过统一下单接口获到的 MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096

则拼接后的地址为 MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https://www.alaal

需要注意的是

1.需对redirect_url进行urlencode处理（必须的）
2.由于设置redirect_url后,回跳指定页面的操作可能发生在：
（1）微信支付中间页调起微信收银台后超过5秒
（2）用户点击“取消支付“或支付完成后点“完成”按钮。
因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirect_url地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。（你的用户不会打死你的最好操作）回跳页面展示效果可参考下图
3.请确保实际支付时的请求目录与后台配置的目录一致，否则将无法成功唤起微信支付。

支付查询

H5支付在微信是用不了的，在微信内部可以参看 JSAPI支付；
微信官方体验链接：https://wxpay.wxutil.com/mch/pay/h5.v2.php，请在微信外浏览器打开。

如果此页面需要在微信内部进行支付，可以参见下一章H5微信内部支付