微信公众号接入H5支付

一、概述

1.H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付。主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。如在微信内打开，无法进行支付。H5支付和公众号支付无法同时开通。

2.H5外起支付的优点：
1）.签名无关性（整个支付，不需要你在微信后台填写app签名，需要设置key）
2）.包名无关性（整个支付，不需要你去微信后台申请app）
大家试想，如果你是一个SDK开发者，你的SDK要提供给外面的任何人使用，那么别人每次都要通过你去微信那边申请app，然后申请app支付权限，然后呢？别人开发的时候每次还要用微信后台配置的签名。

我们先了解下H5外起支付的原理。这个东西正常的使用场景是这样的，你有一个app，你用H5发起支付，那么你需要在H5中进行，服务端从微信那边下订单，拿到一个url，这个url在H5里面自动跳转，然后deeplink到微信。这样微信支付就调来了，当支付完成后，返回你的app 中，点击“已完成支付”，然后调用后端接口查询支付结果，然后展现在网页中。

二、申请和配置

2.1 支付接口申请

申请入口：微信商户平台-产品中心-H5支付：

申请材料及注意事项：

1. H5支付域名；
2. 售卖产品/使用场景的描述；
3. 所售卖产品对应的官方网站域名（需要备案）或详情页网址。

可以展示的应用地址，应用图片，支付域名，简述，产品对应网站域名。

注：支付域名一定需要备案过的域名。比如：baidu.com;网站域名则是可以在浏览器打开的应用网站的具体地址。不能使用花生壳提供的域名。
支付接口的申请通常需要一个星期左右，申请成功后，会收到一封申请成功的邮件：

2.1 微信公众号后台配置

2.1.1密钥key设置：

用途：在使用MD5签名时需要用到;
设置路径：微信商户平台(pay.weixin.qq.com)–>账户中心–>账户设置–>API安全–>API密钥设置API密钥
样例：3fcb883f3b3d4b42bdd63e9ee2814d7c
仅保留在商户系统和微信支付后台，不在网络中传播。设置好后，不能轻易改变！

2.1.2 支付域名设置

 用途：微信后台用来验证支付请求域名。

设置路径：微信商户平台(pay.weixin.qq.com)–>产品中心–>开发设置–> 支付配置—》H5支付:

最多可以添加五个域名。相当于最多支持五个网站使用当前的h5支付接口。

三、开发

参考官方开发文档：

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

主要接口：统一下单，查询订单，关闭订单，支付结果异步通知。

3.1 注意事项：

1. 为了防止接收不到微信后台的异步通知，启动一个后台定时任务，定时查询近10分钟之内未完成支付的订单。定时时长可根据业务进行设置。
2. 支付完成后，返回至指定的页面，指定页面方法：

https://xxx.app/api/main/wxpay/payRedirectUrl?orderId=xxxxx
"${mweb_url}&redirect_url="+redirectUrl;

说明：redirectUrl 需要编码处理encodeURIComponent，mweb_url是微信返回的支付链接。
前端返回至指定的redirect_url页面，需要在页面设置一个“已完成支付”的按钮让用户点击:

返回页面展示效果（仅供参考）。
用户点击“已完成支付”按钮，商户需要调用商户查单接口，确认订单状态。
1） 如果商户查单接口明确返回支付成功，则给用户展示支付成功页。
2） 如果商户查单接口返回订单未支付，需要提醒用户“稍后进入订单管理页核实订单状态，不要重复发起支付”。 商户后端需要及时获取、更新订单状态，实现逻辑参考【后端服务处理】。当用户再次进入订单管理页面，对未支付的订单再次发起支付时，商户应该使用原单号发起，不要更换支付单号，避免用户重复支付。

3. 异步回调url：
   用途：接收微信后台的支付结果通知。
   注：
   1.接收微信支付异步通知回调地址，通知url必须为直接可访问的url，不能携带参数。
   2.notify_url的代码处理逻辑不能做登录态校验。
   集成第三方的cas单点登录系统，需要对notify_url进行免拦截，否则系统后台无法收到微信后台的异步通知。
   配置方法：调用微信统一下单接口时带在参数里。

四、测试

H5支付不支持沙盒测试。调试环境下，可以用花生壳映射内网端口进行测试，前提是要在微信后台添加一个支付域名，且只适用于HTTP链接，HTTPS链接会被微信识别为风险交易。

五、总结

H5支付建议使用HTTPS，加强交易安全性。