[TOC] ## 前言 H5支付是基于公众号基础开发的一种非微信内浏览器支付方式（需要单独申请支付权限），可以满足在微信外的手机H5页面进行微信支付的需求。同时，由于H5链接传播十分方便、来源不易追踪，商户需要特别注意做好防钓鱼、防刷单的处理，控制风险。 **备注：** 本文档重点介绍与前端相关的以及一些准备工作的部分，部分后端接口实现的不重点描述 ## 微信支付场景  ## h5支付场景介绍  ## 准备工作 ### 申请入口  ### ua确定 为了保证最后的微信h5能成功，请确认需要的ua能把案例的微信支付唤起，其本质是一个url连接，带有唤起微信支付的功能。 案例url:http://wxpay.wxutil.com/mch/pay/h5.v2.php 参考的生成地址格式（该页面首先进行安全校验，通过后才会唤起支付，不通过则会提示各种问题）：https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx201711292155101b1c4a8fce0223911410&package=3611216311 ### 商户准备  ### 用户设置图解 ### 用户支付流程  ### 图解支付流程（来源微信官网）  ### 注意事项 1、由商户后台向微信支付发起下单请求（调用统一下单接口）注：交易类型trade_type=MWEB，[参考下单文档](https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=9_20&index=1) 2、统一下单接口返回支付相关参数给商户后台，如支付跳转url（参数名“mweb_url”），商户通过mweb_url调起微信支付中间页 3、中间页进行H5权限的校验，安全性检查（此处常见错误请见下文） 4、如支付成功，商户后台会接收到微信侧的异步通知，后台部分需要同步订单的状态 5、用户界面需要正确设置支付结果的显示逻辑，建议如上图设计。 ## 技术准备 ## 常见的技术问题 ### 图解常见的技术问题  ### 1 . 网络环境未能通过安全验证，请稍后再试 ip问题：本质原因是因为生成支付地址与实际支付时ip不一致，除去个人切换网络之外的个人原因，其主要难点存在于获取用户网络ip的部分。 **参考文档**：[获取ip指引](https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_5) **备注**：文档已经比较详细了，只不过如果你是纯前端资源项目比如spa的，可能需要自己通过某种方式获取用户的ip，那么一种方式可以通过设置nginx实现，比如提到的下面的方式： ~~~ proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-Port $remote_port; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; ~~~ **其他方式：** 你也可以通过请求一个线上比较稳定的获取ip的站点来实现如果以上的方式行不通，参考代码如下，依赖于jsonp方案实现前端跨域请求。 ~~~ // 获取ip的方法 getIp(){ return new Promise((resolve, reject) => { request.get('https://freegeoip.net/json/').use(jsonp({ })).end( (err, res)=>{ if(res&&res.body){ localStorage.setItem('ip',res['body']['ip']) } } ) }) }, ~~~ ### 2 . 商家参数格式有误，请联系商家解决 1. 当前调起H5支付的referer为空导致，一般是因为直接访问页面调起H5支付，请按正常流程进行页面跳转后发起支付，或自行抓包确认referer值是否为空。换句话就是说，需要你从产品支付页生成调节跳转到这个页面，不能直接跳转到该地址。 2. 如果是APP里调起H5支付，需要在webview中手动设置referer，如( Map extraHeaders = new HashMap(); extraHeaders.put("Referer", "商户申请H5时提交的授权域名");//例如 http://www.baidu.com )) ### 3. 商家存在未配置的参数，请联系商家解决 1，当前调起H5支付的域名（微信侧从referer中获取）与申请H5支付时提交的授权域名不一致，如需添加或修改授权域名，请登陆商户号对应的商户平台--"产品中心"--"开发配置"自行配置 2，如果设置了回跳地址redirect_url，请确认设置的回跳地址的域名与申请H5支付时提交的授权域名是否一致（**需对redirect_url进行urlencode处理，js中建议使用encodeURIComponent方法**） ### 4. 支付请求已失效，请重新发起支付 一般很少发生这种情况，如果已失效，需要产品定义相关的方案，一般是用户返回上一个页面，重新进行支付流程。 ### 5. 请在微信外打开订单，进行支付 h5支付不能再微信端进行 ### 6. OS：签名验证失败 或者 安卓：系统繁忙，请稍后再试 基本不会遇到，如果遇到了参考官网的解释： 1，请确认同一个MWEB_URL只被一个微信号调起，如果不同微信号调起请重新下单生成新的MWEB_URL 2，如MWEB_URL有添加redirect_url，请确认参数拼接格式是否有误，是否有对redirect_url的值做urlencode,可对比以下例子格式： https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn ## 其他 ### App-webview中支持支付 * 安卓代码，需要拦截页面的url，如果有对应的协议关键字，就用相关的唤起工具类  参考文档：[csdn:安卓webview唤起微信支付](http://m.blog.csdn.net/xiaoxiao_ming/article/details/54692378) * ios 完成配置即可   备注：如果你遇到了其他app打开支付宝支付跳转到了你的app,是因为你的配置文档里写了支付宝的协议，去掉即可。比如下面的配置就会导致这种情况。  ### 获取app中的用户信息 * 前提说明 如果你需要在app中一定要使用微信h5的支付，那么你肯定需要需要获取用户的信息，因为app中已经登录过的不需要进入webivew重新登录。 * 区分ua 因为wap是针对所有ua的，所以针对不同的ua需要单独做处理，就需要区分不同的ua,那么app重需要追加特殊的标识，比如"XHX-v1.1.1",针对ua的转化以及识别，本次方案中采用了ua-parse的模块。 ~~~ let UAParser = require('ua-parser-js') let parser = new UAParser() let result = parser.getResult() // TYPE 枚举： Mobile Safari ; WeChat ; App ; QQ ; ali let type = result.browser.name let version = result.browser.version let os = result.os.name let isApp=result.ua.indexOf('XHX')>-1 if(isApp){ type='App' }else if(result.ua.indexOf('AlipayClient')>-1){ type="ali" } var info = { os, type, version } module.exports = info ~~~ * 如果你是vue的项目，建议store中存储一份ua相关的数据，便于使用，代码如下（仅供参考） ~~~ const state = { // type 枚举： 'Mobile Safari' ; 'WeChat' ; 'App' ; 'QQ' ; 'ali' ; os:localStorage.getItem("os")?localStorage.getItem("os"):'', type:localStorage.getItem("type")?localStorage.getItem("type"):'', version:localStorage.getItem("version")?localStorage.getItem("version"):'', ip:localStorage.getItem("ip")?localStorage.getItem("ip"):'', } const getters = { getUa:state=>{ return state } } const mutations = { // 更新用户存储信息,建议存储到cookie一份，用于网关的请求 updateUa(state, ua) { state.os = ua.os localStorage.setItem('os', ua.os) state.type = ua.type localStorage.setItem('type', ua.type) state.version = ua.version localStorage.setItem('version', ua.version) }, updateIp(state,ip){ state.ip = ua.ip localStorage.setItem('ip', ua.ip) } } const actions = { } export default { state, getters, mutations, actions } ~~~ * **定义获取用户信息方法** 因为ios和安卓载入webview的时机不同，我们做了针对性的处理，如果你们不做区分也可以的。另外这里做个常识性的解释：app中有js相关的方法的写法，可以将一些js的方法注入到webview之中，在使用之前需要确定这些方法注入时是在你的方法之前还是之后。 我们目前摸索出来并决定的结果是：ios在前端之后，安卓在前端之后,客户端的方法定义在window.xhxapp域名空间下，前端定义在window域名空间下，具体代码如下： ~~~ if(ua.type=='App'){ //ios app内 if(ua.os=="iOS"){ // 与ios 约定 ，ios加载webview之后调用前端isReady方法 window.isReady=function(){ //约定 getUserInfo 返回user的json对象，共四个字段 if(window.xhxapp&&window.xhxapp.getUserInfo){ let user=window.xhxapp.getUserInfo(); store.commit("updateUser",user) } } } else{ //安卓app内 if(window.xhxapp&&window.xhxapp.getUserInfo){ let user=window.xhxapp.getUserInfo(); user=JSON.parse(user) //是否加json转换根据app传值类型，不固定 store.commit("updateUser",user) } } }else { } ~~~ ### 用户支付界面产品设计 相信你可能理解了我的支付流程以及交互界面，但可能对具体的实现效果还不是特别清楚，下面我分四种情况分别介绍微信h5的最终实现效果。 1 常规浏览器 ：微信支付 - 支持微信以及支付宝支付的两种场景， - 传回调地址，回调地址为支付成功的页面 - 基于全面的考虑，建议订单成功页也进行订单状态查询，如果还是未支付成功的再调回支付页 - 请求接口拿到微信支付地址之后，选择一次微信支付，记录一次用户支付 - 用户取消支付回到支付页，支付成功会到支付成功页 - 支付页进入时判断是否有支付操作，有的话加用户支付确认弹窗进行订单查询，查询支付成功跳转到订单成功页 2 qq浏览器 :微信支付 - 支持微信支付的一种场景， - 传回调地址，回调地址为支付成功的页面 - 基于全面的考虑，建议订单成功页也进行订单状态查询，如果还是未支付成功的再调回支付页 - 请求接口拿到微信支付地址之后，选择一次微信支付，记录一次用户支付 - 用户取消支付回到支付页，支付成功会到支付成功页 - 支付页进入时判断是否有支付操作，有的话加用户支付确认弹窗进行订单查询，查询支付成功跳转到订单成功页 3 安卓 app：微信支付 - 支持微信支付，支付宝支付的2种场景， - 传回调地址，回调地址为支付成功的页面 - 基于全面的考虑，建议订单成功页也进行订单状态查询，如果还是未支付成功的再调回支付页 - 请求接口拿到微信支付地址之后，选择一次微信支付，记录一次用户支付 - 用户取消支付回到支付页，支付成功会到app支付成功页，这点安卓支持性较好 - 支付页进入时判断是否有支付操作，有的话加用户支付确认弹窗进行订单查询，查询支付成功跳转到订单成功页 4 ios app：微信支付 - 支持微信支付，支付宝支付的2种场景， - 不传回调地址 - 基于全面的考虑，建议订单成功页也进行订单状态查询，如果还是未支付成功的再调回支付页 - 请求接口拿到微信支付地址之后，选择一次微信支付，记录一次用户支付 - 支付页进入时判断是否有支付操作，有的话加用户支付确认弹窗进行订单查询，查询支付成功跳转到订单成功页 - ios app返回传递参数返回会有问题，所以我们不传回调页面，它默认返回项目根目录，我们在h5的根目录展示一个提示页，告诉用户切换到app进行查看订单。 5 最终建议：希望大家针对app webview中的支付尽量不要用h5的方式，让app单独去开发，这是最好的方式。 ## 页面支付逻辑判断 ## 参考文档 * [微信h5支付文档](https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1) * [微信h5支付，知乎问答](https://www.zhihu.com/question/39182675) * [常见的问题类型-微信官方](https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4)