微信h5支付开发指南

前言

H5支付是基于公众号基础开发的一种非微信内浏览器支付方式（需要单独申请支付权限），可以满足在微信外的手机H5页面进行微信支付的需求。同时，由于H5链接传播十分方便、来源不易追踪，商户需要特别注意做好防钓鱼、防刷单的处理，控制风险。

备注：本文档重点介绍与前端相关的以及一些准备工作的部分，部分后端接口实现的不重点描述

微信支付场景

h5支付场景介绍

准备工作

申请入口

ua确定

为了保证最后的微信h5能成功，请确认需要的ua能把案例的微信支付唤起，其本质是一个url连接，带有唤起微信支付的功能。
案例url:wxpay.wxutil.com/mch/pay/h5.…
参考的生成地址格式（该页面首先进行安全校验，通过后才会唤起支付，不通过则会提示各种问题）：wx.tenpay.com/cgi-bin/mmp…

商户准备

用户支付流程

图解支付流程（来源微信官网）

下单支付时序图

注意事项

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时提交的授权域名");//例如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,可对比以下例子格式：
wx.tenpay.com/cgi-bin/mmp…

其他

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 {

}

微信h5支付开发指南

微信h5支付开发指南

前言

微信支付场景

h5支付场景介绍

准备工作

申请入口

ua确定

商户准备

用户支付流程

图解支付流程（来源微信官网）

注意事项

技术准备

常见的技术问题

图解常见的技术问题

1 . 网络环境未能通过安全验证，请稍后再试

2 . 商家参数格式有误，请联系商家解决

3. 商家存在未配置的参数，请联系商家解决

4. 支付请求已失效，请重新发起支付

5. 请在微信外打开订单，进行支付

6. OS：签名验证失败或者安卓：系统繁忙，请稍后再试

其他

App-webview中支持支付

获取app中的用户信息

参考文档

results matching ""

No results matching ""

微信h5支付开发指南

前言

微信支付场景

h5支付场景介绍

准备工作

申请入口

ua确定

商户准备

用户支付流程

图解支付流程（来源微信官网）

注意事项

技术准备

常见的技术问题

图解常见的技术问题

1 . 网络环境未能通过安全验证，请稍后再试

2 . 商家参数格式有误，请联系商家解决

3. 商家存在未配置的参数，请联系商家解决

4. 支付请求已失效，请重新发起支付

5. 请在微信外打开订单，进行支付

6. OS：签名验证失败 或者 安卓：系统繁忙，请稍后再试

其他

App-webview中支持支付

获取app中的用户信息

参考文档

results matching ""

No results matching ""

6. OS：签名验证失败或者安卓：系统繁忙，请稍后再试