微信支付现在的应用场景以及越来越多了，微信的支付有公众号支付、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微信内部支付