微信H5支付

本篇文件来聊聊微信服务商模式以及商户模式下微信H5支付

先说一个事情。8月1号开始微信公众平台支付的开发配置页面迁移至商户平台 详细说明参考这个或者看下面的截图

平台公告 微信支付商户平台.png

官方文档
普通商户版-微信H5支付
服务商版-微信H5支付

1、申请开通微信H5支付

服务商模式下H5支付

服务商模式下点击申请开通会立即开通，邀请子商户时需要填写子商户的信息。服务商模式下与商户模式下主要的区别在于商户模式下不用填写特约商户信息、只需要填写商户H5支付相关的信息 如下图

服务商H5支付

服务商H5支付产品设置 - 微信支付商户平台

注意
填写的H5支付域名必须是对应网站备案的域名且备案主体还得与商户的主体信息一致。否则申请的时候不给予通过。审核反馈的周期不是很长一般是隔天就可以给出反馈。

2、接口流程图以及常见错误

接口流程图

简单点概括
1、用户使用非微信客户端浏览器下单
2、调用微信支付接口下单得到H5支付URL的跳转链接
3、跳转到微信唤起微信支付
4、支付成功异步通过
5、处理支付结果

详细流程介绍

1、用户在商户侧完成下单，使用微信支付进行支付
2、由商户后台向微信支付发起下单请求（调用统一下单接口）注：交易类型trade_type=MWEB
3、统一下单接口返回支付相关参数给商户后台，如支付跳转url（参数名“mweb_url”），商户通过mweb_url调起微信支付中间页
4、中间页进行H5权限的校验，安全性检查（此处常见错误请见下文）
5、如支付成功，商户后台会接收到微信侧的异步通知
6、用户在微信支付收银台完成支付或取消支付,返回商户页面（默认为返回支付发起页面）
7、商户在展示页面，引导用户主动发起支付结果的查询
8,9、商户后台判断是否接到收微信侧的支付结果通知，如没有，后台调用我们的订单查询接口确认订单状态
10、展示最终的订单支付结果给用户

常见错误：

1、网络环境未能通过安全验证，请稍后再试(IP改变导致的)
2、商家参数格式有误，请联系商家解决(H5支付的referer为空导致)
3、商家存在未配置的参数，请联系商家解决(H5支付的域名问题)
4、支付请求已失效，请重新发起支付（有效期为5分钟）
5、请在微信外打开订单，进行支付（H5支付不能直接在微信客户端内调起）

3、统一下单获取支付的URL

你做过扫码支付、公众号支付以及App支付吗？如果做过那H5支付就相当简单了，与前面的提到的几种支付方式统一下单的URL是一样的只是个别请求参数不同而已（trade_type为MWEB、scene_info必填）。如果没有做过也没有关系下面就是详细的案例了。

/**
     * 微信H5 支付
     */
    public void wapPay(){
        String ip = IpKit.getRealIp(getRequest());
        if (StrKit.isBlank(ip)) {
            ip = "127.0.0.1";
        }
        
        H5ScencInfo sceneInfo = new H5ScencInfo();
        
        H5 h5_info = new H5();
        h5_info.setType("Wap");
        h5_info.setWap_url("https://pay.qq.com");
        h5_info.setWap_name("腾讯充值");
        sceneInfo.setH5_info(h5_info);
        
        Map params = WxPayApiConfigKit.getWxPayApiConfig()
                .setAttach("IJPay H5支付测试  -By Javen")
                .setBody("IJPay H5支付测试  -By Javen")
                .setSpbillCreateIp(ip)
                .setTotalFee("520")
                .setTradeType(TradeType.MWEB)
                .setNotifyUrl(notify_url)
                .setOutTradeNo(String.valueOf(System.currentTimeMillis()))
                .setSceneInfo(h5_info.toString())
                .build();
        
        String xmlResult = WxPayApi.pushOrder(false,params);
log.info(xmlResult);
        Map result = PaymentKit.xmlToMap(xmlResult);
        
        String return_code = result.get("return_code");
        String return_msg = result.get("return_msg");
        if (!PaymentKit.codeIsOK(return_code)) {
            ajax.addError(return_msg);
            renderJson(ajax);
            return;
        }
        String result_code = result.get("result_code");
        if (!PaymentKit.codeIsOK(result_code)) {
            ajax.addError(return_msg);
            renderJson(ajax);
            return;
        }
        // 以下字段在return_code 和result_code都为SUCCESS的时候有返回
        
        String prepay_id = result.get("prepay_id");
        String mweb_url = result.get("mweb_url");
        
        renderText("prepay_id:"+prepay_id+" mweb_url:"+mweb_url);
    }

在手机浏览器中访问mweb_url即可唤起微信进行支付

更正 20170830
1、上面复制mweb_url到手机浏览器访问会出现网络环境未能通过安全验证，请稍后再试 为什么呢？ 因为发起支付与唤起支付的IP不一致
2、微信H5支付必须在设置的域名（商户平台--"产品中心"--"开发配置"）网页中发起支付不然会出现商家参数格式有误，请联系商家解决 为什么呢？ 因为微信H5支付需要验证支付的referer

更正后的代码如下：

/**
     * 微信H5 支付
     * 注意：必须再web页面中发起支付且域名已添加到开发配置中
     */
    public void wapPay(){
        String ip = IpKit.getRealIp(getRequest());
        if (StrKit.isBlank(ip)) {
            ip = "127.0.0.1";
        }
        
        H5ScencInfo sceneInfo = new H5ScencInfo();
        
        H5 h5_info = new H5();
        h5_info.setType("Wap");
        //此域名必须在商户平台--"产品中心"--"开发配置"中添加
        h5_info.setWap_url("https://pay.qq.com");
        h5_info.setWap_name("腾讯充值");
        sceneInfo.setH5_info(h5_info);
        
        Map params = WxPayApiConfigKit.getWxPayApiConfig()
                .setAttach("IJPay H5支付测试  -By Javen")
                .setBody("IJPay H5支付测试  -By Javen")
                .setSpbillCreateIp(ip)
                .setTotalFee("520")
                .setTradeType(TradeType.MWEB)
                .setNotifyUrl(notify_url)
                .setOutTradeNo(String.valueOf(System.currentTimeMillis()))
                .setSceneInfo(h5_info.toString())
                .build();
        
        String xmlResult = WxPayApi.pushOrder(false,params);
log.info(xmlResult);
        Map result = PaymentKit.xmlToMap(xmlResult);
        
        String return_code = result.get("return_code");
        String return_msg = result.get("return_msg");
        if (!PaymentKit.codeIsOK(return_code)) {
            ajax.addError(return_msg);
            renderJson(ajax);
            return;
        }
        String result_code = result.get("result_code");
        if (!PaymentKit.codeIsOK(result_code)) {
            ajax.addError(return_msg);
            renderJson(ajax);
            return;
        }
        // 以下字段在return_code 和result_code都为SUCCESS的时候有返回
        
        String prepay_id = result.get("prepay_id");
        String mweb_url = result.get("mweb_url");
        
        System.out.println("prepay_id:"+prepay_id+" mweb_url:"+mweb_url);
        redirect(mweb_url);
    }

在Web页面中发起支付

具体实现可以参考开源项目 IJPay 让支付触手可及

推荐阅读
极速开发微信公众号
基于 CentOS 搭建 FTP 文件服务
基于 CentOS Mysql 5.7.19 安装与主从同步配置详解
Redis4.0.1安装以及主从复制详解
10分钟搭建属于自己的ngork服务器，实现内网穿透
JDK开发环境搭建及环境变量配置