微信移动端H5支付

微信移动端网站H5支付

接入主体： 企业或个人
场景： 手机网站支付是指商家在移动端网页展示商品或服务，用户在商家页面确认使用微信支付后，手机浏览器唤起手机微信收银台。

一、业务流程

请求地址：

https://kf.fw199.com/gateway/partner/pay/wx/personal/h5

二、请求地址：

请求示例

  @Test  
    public void PayWXCreateH5Pay() throws Exception {  
        //支付金额 (单位分）  
        String  amount ="1000";  
        String  mchId  ="163588 "; //由蜂巢提供的微信商户号,向客服咨询
        // 确保传入的开发者订单号唯一, 订单号生成规则开发者可自定，  修改  
        String ext_trade_no =String.valueOf(System.currentTimeMillis());  
        // 扩展参数，付款成功时回调给开发者时会原样返回，根据自己需求填写或为空。  
        String attach ="";  
        // 订单标题  
        String body ="支付测试商品08";  
        // 回调通知url，开发者自己的服务器Url  
        String notify_url = Config.PayNotifyUrl;  
        //业务参数  
        Map<String, String> data = new HashMap<String, String>();  
        data.put("appid",  Config.AppId);  
        Long timestamp = System.currentTimeMillis() / 1000;  
        data.put("timestamp", timestamp.toString());  
        data.put("ext_trade_no",ext_trade_no );  
        data.put("mch_id",mchId );  
        data.put("amount",amount );  
        data.put("attach",attach );  
        data.put("body" , body );  
        data.put("notify_url",notify_url );
    // data.put("redirect_url","https://www.163.com" );
        data.put("sign", Utils.Sign(data, Config.AppSecret   ));  
        String result = doHttpRequest(Config.PayWXPersonalCreateH5PayUrl,data);  
       System.out.println("result:"+result);  
       JSONObject rsp = JSON.parseObject(result);  
       if (rsp.getInteger("code") == 0){  
           JSONObject rspData = rsp.getJSONObject("data");  
           String payUrl = URLDecoder.decode(rspData.getString("h5pay_url"),"utf-8");  
           System.out.println("请在手机浏览器点击此Url跳去支付:"+payUrl);  
       } else {  
           System.out.println("返回错误:" + rsp.getString("message"));  
       }   
    }

三、接口返回结果：

{
  "code": 0,
  "message": "ok",
  "data": {
    "h5pay_url": "https%3A%2F%2Fkf.fw199.com%2Fgateway%2Fpartner%2Fpay%2Fwx%2Fpersonal%2Fh5payshow%3Ffc_trade_no%3D20230813001105023839%26ts%3D1691856665%26sign%3D07C7DEF82E4FF5ACDA917467327D5DB8%26pid%3D11"
  },
  "trace_id": ""
}

返回参数说明

开发者获取到h5的支付链接h5pay_url后， 在自己的移动手机端网站供用户点击唤起手机微信收银台。 用户付款后，蜂巢将会推送付款通知，如何处理付款回调通知，请见支付回调通知。

四、参考示例

下面给出商家H5网站的调用示例，前端交互方式仅为参考，您可以根据自己网站的情况进行调整。

4.1 商家H5网站前端

此网页为终端用户浏览访问的下单页面， 在此页面调用商家自己的后台API。

<script> 

    let amount = '10'; 

    function goWxPay() {
         // 商家自己
        var url = 'https://YOU-SYSTEM-API/wxpay/h5pay';
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            body: `amount=${amount}`
        })
            .then((response) => response.json())
            .then((rsp) => {
                if (rsp.code == 0) {
                    window.open(rsp.h5pay_url);
                } else {
                    alert(rsp.msg);
                }
            });
    }
</script>


<section>
    <h1>蜂巢H5支付演示</h1> 
    <h2>
        付款金额(元): <input bind:value="{amount}" type="text" /> 
    </h2>
    <h3>
        <button on:click={goAlipay}>支付宝付款</button>  
        <button on:click={goWxPay}>微信付款</button>
    </h3>
</section>

H5网站用户下单的主要代码示例。

4.2 商家H5网站后台API

下面代码为4.1的网站提供API接口服务，用于处理前端界面传入的金额，保存订单等，再向蜂巢发起支付请求，以获取微信的支付url并返回给h5网站。

  @RequestMapping("/wxpay/h5pay")
    @CrossOrigin
    @ResponseBody
    public Map wxH5Pay(HttpServletRequest request, HttpServletResponse response) {

        Map<String, Object> map = new HashMap<String, Object>();
        //返回结果，statusCode =0 表示已收到推送的数据
        map.put("code", 0);
        map.put("msg", "成功");
        String amount = request.getParameter("amount");
        // 支付金额如果前端传入是元，则要转为 (单位分）
        Long amountFen = Long.valueOf(amount) * 100;
        try {
            String mchId = "1635xxxx"; //由蜂巢提供的支付宝商户号， 联系蜂巢客服
            // 确保传入的开发者订单号唯一, 订单号生成规则开发者可自定，  修改
            String ext_trade_no = String.valueOf(System.currentTimeMillis());
            // 扩展参数，付款成功时回调给开发者时会原样返回，根据自己需求填写或为空。
            String attach = "none";
            // 订单标题
            String body = "支付测试商品0806-4";
            // 回调通知url，开发者自己的服务器Url
            String notify_url = Config.PayNotifyUrl;
            //业务参数
            Map<String, String> data = new HashMap<String, String>();
            data.put("appid", Config.AppId);
            Long timestamp = System.currentTimeMillis() / 1000;
            data.put("timestamp", timestamp.toString());
            data.put("ext_trade_no", ext_trade_no);
            data.put("mch_id", mchId);
            data.put("amount", amountFen.toString());
            data.put("attach", attach);
            data.put("body", body);
            data.put("notify_url", notify_url);
            data.put("sign", Utils.Sign(data, Config.AppSecret));
            String result = Utils.doHttpRequest(Config.PayWXPersonalCreateH5PayUrl, data);
            JSONObject rsp = JSON.parseObject(result);
            if (rsp.getInteger("code") == 0) {
                JSONObject rspData = rsp.getJSONObject("data");
                String payUrl = URLDecoder.decode(rspData.getString("h5pay_url"), "utf-8");
                map.put("h5pay_url", payUrl);
                return map;
            }
            map.put("code", 1);
            map.put("msg", "请求支付失败:" + rsp.getString("message"));
            return map; 

        } catch (Exception ex) {
            ex.printStackTrace();
            //日志处理
            map.put("code", 1);
            map.put("msg", "请求支付失败:" + ex.getMessage());
            return map;
        }

    }

4.3 商家H5网站支付效果

用户选择微信支付 ， 唤起微信收银台，如下图：