前言
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,参考下单文档 2、统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名“mweb_url”),商户通过mweb_url调起微信支付中间页 3、中间页进行H5权限的校验,安全性检查(此处常见错误请见下文) 4、如支付成功,商户后台会接收到微信侧的异步通知,后台部分需要同步订单的状态 5、用户界面需要正确设置支付结果的显示逻辑,建议如上图设计。
技术准备
常见的技术问题
图解常见的技术问题
1 . 网络环境未能通过安全验证,请稍后再试
ip问题:本质原因是因为生成支付地址与实际支付时ip不一致,除去个人切换网络之外的个人原因,其主要难点存在于获取用户网络ip的部分。 参考文档:获取ip指引 备注:文档已经比较详细了,只不过如果你是纯前端资源项目比如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 . 商家参数格式有误,请联系商家解决
-
当前调起H5支付的referer为空导致,一般是因为直接访问页面调起H5支付,请按正常流程进行页面跳转后发起支付,或自行抓包确认referer值是否为空。换句话就是说,需要你从产品支付页生成调节跳转到这个页面,不能直接跳转到该地址。
-
如果是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唤起微信支付
- 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 { } 复制代码