微信、支付宝H5支付

思路：

第一次做H5支付，在网上看到了很多文章，大多说怎么调用openId什么的。

其实H5支付不需要获取openId,而是根据用户的ip地址作为识别。

大体思路如下：

前端采用vue：

生成订单：

 // 生成订单
    submitOrder: function () {
  
      let param = {userId: this.userId }
      this.$http
        .post('/api/xxxx', param, { emulateJSON: true })
        .then(res => {
      
          headerId = []
          var arr = []
          if (res.data.success == true) {
            for (var i = 0; i < res.data.orders.length; i++) {
              arr.push(res.data.orders[i].id)
            }
            headerId = arr//这里保存订单id
            this.pay()//这里调用支付
          } else {
            Indicator.open({
              text: '网络出错...',
              spinnerType: 'fading-circle'
            })
          }
        })
    },

支付--调用统一订单

 pay: function () {
      var arr = headerId.join(',')
      let param = {
        total_fee: this.total,
        attach: 'H5支付',
        openId: '',
        body: 'H5支付',
        userId: this.userId,
        requestNum: '',
        payWays: this.payWay,//支付方式：11 微信  10 支付宝
        headerIds: arr}
      this.$http
        .post('/api/xxxx', param, {emulateJSON: true})
        .then(res => {
          // eslint-disable-next-line eqeqeq
          if (this.payWay == '11') {
            window.location.href = res.body.data.payUrl + '&redirect_url=http%3a%2f%2fxxx.com' //这里的redirect_url 需要进行urlencode处理
          } else {
            var bhtml = res.body.data.payUrl
            document.getElementById('alipay').innerHTML = bhtml
            document.forms[0].submit()
          }
        })
    },

调用统一订单接口：

  @Override
  public String orderPay(String outTradeNo) {
    List> jsonArray = new ArrayList>();
    TradeInfo tradeInfo = tradeInfoService.selectByOutTradeNo(outTradeNo);
    String totle = String.valueOf(tradeInfo.getAmount());
    DecimalFormat decimalFormat = new DecimalFormat("###################.###########");
    totle = String.valueOf(decimalFormat.format(Double.parseDouble(totle)));
    String appid = WECHAT_APPID;// 小程序ID-->替换为自己的ID
    String mch_id = WECHAT_MCH_ID;// 商户号-->替换为自己的商户号
    String nonce_str = UUIDHexGenerator.generate();// 随机字符串
    String out_trade_no = outTradeNo;// 商户订单号mch_id + today + code
    String notify_url = RETURN_URL + "/api/wx/payBack/notifyOrder";// 通知地址

    // 交易类型JSAPI---NATIVE---MWEB
    String trade_type = null;
    String body = "xxxx";
    String openId = null;
    String spbillCreateIp = null;
   if (tradeInfo.getTradeWay() == TradeWay.WECHAT_H5){
        trade_type = "MWEB";
        notify_url = RETURN_URL + "/api/xxx";// 通知地址--自己controler接口
      Gson gson = new Gson();
      @SuppressWarnings("unchecked")
          Map resultMap = gson.fromJson(tradeInfo.getExtraParams(), Map.class);
      spbillCreateIp = resultMap.get("spbill_create_ip");
    } 
    PaymentPo paymentPo = new PaymentPo();
    paymentPo.setAppid(appid);
    paymentPo.setMch_id(mch_id);
    paymentPo.setNonce_str(nonce_str);
    String newbody = new String(body);// 以utf-8编码放入paymentPo，微信支付要求字符编码统一采用UTF-8字符编码
    paymentPo.setBody(newbody);
    paymentPo.setOut_trade_no(out_trade_no);
    paymentPo.setTotal_fee(String.valueOf(decimalFormat.format(Double.parseDouble(totle) * 100)));
    paymentPo.setNotify_url(notify_url);
    paymentPo.setTrade_type(trade_type);
    paymentPo.setOpenid(openId);
    paymentPo.setSpbill_create_ip(spbillCreateIp);
    // 把请求参数打包成数组
    Map sParaTemp = new HashMap();
    sParaTemp.put("appid", paymentPo.getAppid());
    sParaTemp.put("mch_id", paymentPo.getMch_id());
    sParaTemp.put("nonce_str", paymentPo.getNonce_str());
    sParaTemp.put("body", paymentPo.getBody());
    sParaTemp.put("out_trade_no", paymentPo.getOut_trade_no());
    sParaTemp.put("total_fee", paymentPo.getTotal_fee());
    sParaTemp.put("notify_url", paymentPo.getNotify_url());
    sParaTemp.put("trade_type", paymentPo.getTrade_type());
    sParaTemp.put("openid", paymentPo.getOpenid());
    sParaTemp.put("spbill_create_ip", paymentPo.getSpbill_create_ip());
    // 除去数组中的空值和签名参数
    Map sPara = PayUtil.paraFilter(sParaTemp);
    String prestr = PayUtil.createLinkString(sPara); // 把数组所有元素，按照“参数=参数值”的模式用“&”字符拼接成字符串
    String key = "&key=" + WECHAT_MERC_KEY; // 商户支付密钥
    // MD5运算生成签名
    String mysign = PayUtil.sign(prestr, key, "utf-8").toUpperCase();
    paymentPo.setSign(mysign);
    // 打包要发送的xml
    String respXml = MessageUtil.messageToXML(paymentPo);
    // 打印respXml发现，得到的xml中有“__”不对，应该替换成“_”
    respXml = respXml.replace("__", "_");
    // 统一下单API接口链接
    String result = PayUtil.httpRequest("https://api.mch.weixin.qq.com/pay/unifiedorder", "POST", respXml);
    // 保存请求参数（忽略）
    


    // 返回预支付单信息prepay_id
    // 将解析结果存储在HashMap中
    Map map = new HashMap();
    InputStream in = new ByteArrayInputStream(result.getBytes());
    // 读取输入流
    SAXReader reader = new SAXReader();
    Document document = null;
    try {
      document = reader.read(in);
    } catch (DocumentException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
    // 得到xml根元素
    if(null != document){
      Element root = document.getRootElement();
      // 得到根元素的所有子节点
      @SuppressWarnings("unchecked")
      List elementList = root.elements();
      for (Element element : elementList) {
        map.put(element.getName(), element.getText());
      }
    }
    // 返回信息
    String return_code = map.get("return_code");// 返回状态码
    Map jsonObject = new HashMap();

    if (return_code == "SUCCESS" || return_code.equals("SUCCESS")) {
      // 业务结果
      jsonObject.put("out_trade_no", out_trade_no);
      jsonObject.put("return_code", return_code);
      String prepay_id = map.get("prepay_id");// 返回的预付单信息
      String nonceStr = UUIDHexGenerator.generate();
      jsonObject.put("nonceStr", nonceStr);
      jsonObject.put("package", "prepay_id=" + prepay_id);
      Long timeStamp = System.currentTimeMillis() / 1000;
      jsonObject.put("timeStamp", timeStamp + "");
      String stringSignTemp =
          "appId=" + appid + "&nonceStr=" + nonceStr + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + timeStamp;
      jsonObject.put("signType", "MD5");
      jsonObject.put("codeUrl", map.get("code_url"));
      // H5跳转URL
      jsonObject.put("mweb_url", map.get("mweb_url"));
      // 再次签名
      String paySign = PayUtil.sign(stringSignTemp, "&key=" + WECHAT_MERC_KEY, "utf-8").toUpperCase(); // 替换为自己的密钥
      jsonObject.put("paySign", paySign);
      jsonArray.add(jsonObject);

    } else {
      jsonObject.put("return_code", return_code);
    }

    Gson gson = new Gson();
    //这里操作订单 （略）   
    
    return gson.toJson(jsonObject);
  }

其他工具类可以参考小程序支付的文章：

https://blog.csdn.net/qq_30641447/article/details/73222648

H5支付所遇到的坑：

第一：ip地址，本地公网ip，本地用request获取的都是127.0.0.1，所以在测试的时候最好先写死公网ip

第二：域名配置，需要在公众号配置而且前端（前后端分离的）的映射访问域名要一致，不然微信会检测referer与配置的域名是否一致

第三：微信、支付宝支付成功跳转到本系统页面（回调页面）配置：

    微信

    需要在MWEB_URL后拼接上redirect_url参数: 就是在返回的payUrl上拼接redirect_url（redirect_url进行urlencode处理）

 支付宝

支付宝需要在支付宝回调的时候 在后端重定向到对应页面

由于返回后 前端的数据可能会丢失，所以第一可以一开始可以把前端的数据保存到本地缓存，第二在跳转的时候传参，返回页面的时候再获取

常见问题：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4