概要

主要記錄自己的開發流程,使用的springMVC

支付流程

引入相關依賴

<!-- 微信支付 -->
<dependency>
    <groupId>com.github.wxpay</groupId>
    <artifactId>wxpay-sdk</artifactId>
    <version>0.0.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-io -->
 

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-io</artifactId>
    <version>1.3.2</version>
</dependency>

編碼

1. 配置

package com.hejx.pay.wxpay;

import com.github.wxpay.sdk.WXPayConfig;
import com.xiaoyaoke.util.PropertyUtil;

import
 
 java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;

/**
 * Created by 追風少年
 * https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_3
 * 微信支付配置
     引數為Map<String, String>物件，返回型別也是Map<String, String>。
     方法內部會將引數會轉換成含有appid、mch_id、nonce_str、sign\_type和sign的XML；
     預設使用MD5進行簽名；
     通過HTTPS請求得到返回資料後會對其做必要的處理（例如驗證簽名，簽名錯誤則丟擲異常）。
     對於downloadBill，無論是否成功都返回Map，且都含有return_code和return_msg。若成功，其中return_code為SUCCESS，另外data對應對賬單資料。

     本系統使用的微信掃碼支付模式為模式二：
     模式二與模式一相比，流程更為簡單，不依賴設定的回撥支付URL。商戶後臺系統先呼叫微信支付的統一下單介面，
     微信後臺系統返回連結引數code_url，商戶後臺系統將code_url值生成二維碼圖片，使用者使用微信客戶端掃碼後發起支付。
    注意：code_url有效期為2小時，過期後掃碼不能再發起支付。

 * @email
 
 [email protected]
 * @create 2017-06-21 14:49
 **/
public class MyWxPayConfig implements WXPayConfig {

    //商戶號就是mchID
    private final String mch_id = PropertyUtil.getProperty("wxpay.mchId");
    private final String app_id = PropertyUtil.getProperty("wxpay.appId");
    //商戶祕鑰key
    private final String key = PropertyUtil.getProperty("wxpay.key");
    private final String certPath = PropertyUtil.getProperty("wxpay.certPath");

    public final static String notify_url = PropertyUtil.getProperty("wxpay.notify_url");

    private byte[] certData;

    public MyWxPayConfig() throws Exception {
        File file = new File(certPath);
        InputStream certStream = new FileInputStream(file);
        this.certData = new byte[(int) file.length()];
        certStream.read(this.certData);
        certStream.close();
    }


    public String getAppID() {
        return app_id;
    }

    public String getMchID() {
        return mch_id;
    }

    public String getKey() {
        return key;
    }

    public InputStream getCertStream() {
        ByteArrayInputStream certBis = new ByteArrayInputStream(this.certData);
        return certBis;
    }

    public int getHttpConnectTimeoutMs() {
        return 8000;
    }

    public int getHttpReadTimeoutMs() {
        return 10000;
    }


}

2. 封裝支付請求

package com.hejx.pay;

import com.alipay.api.AlipayApiException;
import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.request.AlipayTradePagePayRequest;
import com.github.wxpay.sdk.WXPay;
import com.xiaoyaoke.pay.alipay.AlipayConfig;
import com.xiaoyaoke.pay.wxpay.WxPayConfig;
import org.apache.log4j.Logger;

import java.util.HashMap;
import java.util.Map;

/**
 * Created by 追風少年
 * 封裝支付請求
 * @email [email protected]
 * @create 2017-06-22 10:13
 **/
public class PayRequest {

    private Logger logger = Logger.getLogger(PayRequest.class);

    /**
     * 支付寶
     * PC端支付請求
     * @param out_trade_no
     * @param bizContent
     * @return
     * @throws AlipayApiException
     */
    public String alipayByPc(String out_trade_no,String bizContent) throws AlipayApiException {
        //獲得初始化的AlipayClient
        AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key, "json", AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);
        //設定請求引數
        AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
        alipayRequest.setReturnUrl(AlipayConfig.return_url);    //同步的回撥地址 不做任何處理
        alipayRequest.setNotifyUrl(AlipayConfig.notify_url);    //非同步回撥地址 用於判斷支付的情況
        alipayRequest.setBizContent(bizContent);
        String result = alipayClient.pageExecute(alipayRequest).getBody();
        return result;
    }

    /**
     * 微信PC支付
     * @param orderId
     * @param body
     * @param fen
     * @return
     * @throws Exception
     */
    public Map<String, String> wxpayByPc(String orderId,String body,Long fen) throws Exception{
        WxPayConfig config = new WxPayConfig();
        WXPay wxpay = new WXPay(config);

        Map<String, String> data = new HashMap<String, String>();
        data.put("body", body);//商品簡單描述 String(128)
        data.put("out_trade_no", orderId);//商戶系統內部訂單號，要求32個字元內，只能是數字、大小寫字母_-|*@ ，且在同一個商戶號下唯一
        data.put("device_info", "WEB");    //可以不填 自定義引數，可以為終端裝置號(門店號或收銀裝置ID)，PC網頁或公眾號內支付可以傳"WEB"
        data.put("fee_type", "CNY");    //符合ISO 4217標準的三位字母程式碼，預設人民幣：CNY
        data.put("total_fee", String.valueOf(fen)); //訂單總金額，單位為分 int(88)
        data.put("spbill_create_ip", "123.12.12.123");  //APP和網頁支付提交使用者端ip，Native支付填呼叫微信支付API的機器IP。
        data.put("notify_url", WxPayConfig.notify_url); //非同步接收微信支付結果通知的回撥地址，通知url必須為外網可訪問的url，不能攜帶引數。
        data.put("trade_type", "NATIVE");  // 此處指定為掃碼支付
        data.put("product_id", "1");   //trade_type=NATIVE時（即掃碼支付），此引數必傳。此引數為二維碼中包含的商品ID
        Map<String, String> resp = wxpay.unifiedOrder(data);
        return resp;
    }

}

3. 生成訂單,呼叫微信統一下單API

/**
* 微信支付
* @return
*/
@RequestMapping(value = "/wxpay",method = RequestMethod.POST)
@ResponseBody
public Result wxpay(@RequestParam("money") Double money){

    //todo 引數驗證

    //生成唯一的訂單號：time + userid
    String orderId = String.valueOf(System.currentTimeMillis()) + userid;   
    String orderName = "訂單名稱";
    //引數傳的為元,需要轉化為分
    Long fen = AmountUtils.yuanToFen(money);//充值的所使用的人民幣單位 分

    //todo 儲存訂單資訊    

    try {
       Map<String, String> map = payRequest.wxpayByPc(orderId, orderName, fen);
       if("SUCCESS".equals(map.get("result_code"))){
           //介面返回成功
           Map<String, String> resultMap = new HashMap<>();
           resultMap.put("code_url",map.get("code_url"));//傳回前端 前端根據code_url生成二維碼
           resultMap.put("orderId",orderId);
           return ResultUtil.success(resultMap);
       }else{
           logger.error("微信下單失敗:" + map.toString());
           throw new Exception("微信下單失敗!");
       }
   }catch (Exception e){
       logger.error("微信下單異常：" + e);
       logger.error("當前登入的使用者手機號:" + nowUser.getPhone());
       return ResultUtil.error(ResultEnum.WXPAY_ERROR);
   }

}

4. 微信非同步通知支付資訊

private Logger logger = Logger.getLogger(WxPayController.class);
private final String SUCCESS = "SUCCESS";

//微信回撥
@RequestMapping(value = "/notify",method = RequestMethod.POST)
@ResponseBody
public String notify(HttpServletRequest request){
    logger.info("掃碼成功，微信伺服器回撥>>>>>>>>");
    try {
      Map<String, String> map = WXPayUtil.xmlToMap(IOUtils.toString(request.getInputStream(), "UTF-8"));
      logger.info("通知引數:" + map);
      WxPayConfig config = new WxPayConfig();
      WXPay wxpay = new WXPay(config);
      if (wxpay.isPayResultNotifySignatureValid(map)) {// 簽名正確 進行處理。
          // 注意特殊情況：訂單已經退款，但收到了支付結果成功的通知，不應把商戶側訂單狀態從退款改成支付成功
          String return_code = map.get("return_code");
          if(this.SUCCESS.equals(return_code)){//交易成功
              String transaction_id = map.get("transaction_id");//交易編號 微信的
              String out_trade_no = map.get("out_trade_no");//訂單ID
              String total_fee = map.get("total_fee");//訂單總金額，單位為分

              //驗證該通知資料中的out_trade_no是否為商戶系統中建立的訂單號
              Recharge recharge = rechargeDao.findOne(out_trade_no);  //根據訂單ID 查詢訂單資訊
              if(recharge == null){
                  String errLog = String.format("沒有查詢到對應的訂單資訊 【out_trade_no:%s】",out_trade_no);
                  logger.error(errLog);
                  return ResultEnum.ORDER_NOT_FOUND_ERROR.getMsg();
              }
              //判斷total_fee是否確實為該訂單的實際金額（即商戶訂單建立時的金額）
              Long fen = Long.valueOf(total_fee);
              if(!fen.equals(recharge.getRechargeMoney())){
                  String errLog = String.format("訂單資訊被篡改 【total_amount:%s,傳入的 total_amount:%s】",recharge.getRechargeMoney(),fen);
                  logger.error(errLog);
                  return ResultEnum.ORDER_TAMPER_ERROR.getMsg();
              }
              if(recharge.getRechargeStatus() == 0){//沒有做過處理
                  recharge.setTradeNo(transaction_id);
                  try{
                      //service 裡執行發貨操作 + 更新訂單資訊
                      rechargeService.rechargeToPlayer(recharge,"wxpay");
                      logger.info("訂單處理完成：" + recharge.getOrderId());
                  }catch (Exception e){
                      logger.error(e);
                      logger.error("引數轉換失敗：" + e.getMessage());
                      return "請檢查遊戲充值伺服器是否正常";
                  }
              }
          }else{
              String return_msg = map.get("return_msg");
              logger.error("交易失敗，錯誤原因：" + return_msg);
              return return_msg;
          }
      } else {
          // 簽名錯誤，如果資料裡沒有sign欄位，也認為是簽名錯誤
          String return_msg = map.get("return_msg");
          logger.error("簽名錯誤，如果資料裡沒有sign欄位，也認為是簽名錯誤:" + return_msg);
          return return_msg;
      }
      return success();   //返回成功
  }catch (Exception e){
      return "內部錯誤";
  }
}

5.查詢訂單狀態

//查詢訂單狀態
@RequestMapping(value = "/queryOrder",method = RequestMethod.POST)
@ResponseBody
/**
 * SUCCESS—支付成功
    REFUND—轉入退款
    NOTPAY—未支付
    CLOSED—已關閉
    REVOKED—已撤銷（刷卡支付）
    USERPAYING--使用者支付中
    PAYERROR--支付失敗(其他原因，如銀行返回失敗)
 */
public Result queryOrder(@RequestParam("orderId") String orderId) throws Exception{
    WxPayConfig config = new WxPayConfig();
    WXPay wxpay = new WXPay(config);
    Map<String, String> data = new HashMap<String, String>();
    data.put("out_trade_no", orderId);
    try {
        Map<String, String> resp = wxpay.orderQuery(data);
        //檢查訂單支付狀態 根據訂單支付狀態傳給前端做處理
        if(SUCCESS.equals(resp.get("return_code"))){ //通訊成功
            String trade_state = resp.get("trade_state"); //交易狀態
            if(TradeState.SUCCESS.name().equals(trade_state)){    //支付成功
                return ResultUtil.success(trade_state);
            }else if(TradeState.CLOSED.name().equals(trade_state)){ //已關閉
                logger.info("交易已被關閉,orderId：" + orderId);
                return ResultUtil.success(trade_state);
            }
        }else{
            logger.error("查詢訂單狀態失敗:"+resp.get("return_msg")+",orderId:"+orderId);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return ResultUtil.success();
}

充值頁面程式碼

html:

<input type="number" class="form-control" name="money" ng-model="data.money" maxlength="11" id="phone" placeholder="充值的鑽石數量" required>

js:

//封裝充值的URL
$scope.URL = {
    WXPAY_URL:"/wxpay" //充值URL
};

$scope.data = {
    money:0   //付款金額，必填
};

$scope.wxpay = function(){
    //載入層
    var index = layer.load(0, {shade: false}); //0代表載入的風格，支援0-2
    //提交資料
    $http({method : 'POST', data:$scope.data, url : $scope.URL.WXPAY_URL})
        .success(function(data,status,headers,config){
            layer.close(index);
            if(data.code==0){
                if(pt == 0){
                    //支付寶
                    $('#returnAli').html(data.data);
                }else{
                    //微信彈出掃描視窗
                    var url = "/wxpay/pay?url=" + data.data.code_url
                        + "&money=" + $scope.data.money + "&orderId=" + data.data.orderId;
                    openInputWin(url,'微信支付');
                }
            }else{
                layer.alert(data.msg, {
                    skin: 'layui-layer-molv' //樣式類名
                    ,closeBtn: 0
                });
            }
        }).error(function(data,status,headers,config){
        layer.close(index);
        console.log('error..........');
        console.log(data);
    });
}

/**
 * 根據瀏覽器的長寬開啟input視窗
 * @param url
 * @param title
 */
function openInputWin(url,title){
    //獲取當前網頁可見區域寬
    var offsetWidth = document.body.offsetWidth;  // pc:1694 ipad:798(比較大的ipad,不是最大的那種)
    if(offsetWidth<860){
        //則為移動端登入
        layer.open({
            type: 2,
            title: title,
            area: ['90%', '80%'],    //寬和高 原來為：90% 80%
            anim:1,//出場動畫全部採用CSS3。這意味著除了ie6-9，其它所有瀏覽器都是支援的。目前anim可支援的動畫型別有0-6 如果不想顯示動畫，設定 anim: -1 即可
            content: url, //這裡content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
            success: function(layero) {
                $(layero).addClass("scroll-wrapper"); //蘋果 iframe 滾動條失效解決方式 經測試 無效
            }
        });
    }else{
        //PC網頁端
        layer.open({
            type: 2,
            title: title,
            // area: ['800px', '500px'],    //寬和高
            area: ['1000px', '700px'],    //寬和高
            anim:1,//出場動畫全部採用CSS3。這意味著除了ie6-9，其它所有瀏覽器都是支援的。目前anim可支援的動畫型別有0-6 如果不想顯示動畫，設定 anim: -1 即可
            content: url, //這裡content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
            success: function(layero) {
                $(layero).addClass("scroll-wrapper"); //蘋果 iframe 滾動條失效解決方式 經測試 無效
            }
        });
    }
}

視窗頁面程式碼

wxpay.js

/**
 * Created by hejx on 2017/6/22.
 */

var timer;

//微信支付模組
var wxpay = {
    URL:{
        CHECK_ORDER_STATE:"/queryOrder"
    },
    load:function(){//初始化頁面
        wxpay.create2WM(url);
        //因為微信支付完成後頁面並沒有響應,所以在這裡輪詢訂單狀態進行相應的響應
        timer = setInterval("wxpay.checkState()", 3000);
    },
    create2WM:function(text){//生成二維碼
        jQuery('#paycode').qrcode({
            text     : text,  //設定二維碼內容
            render   : "canvas",//設定渲染方式
            width       : 200,     //設定寬度
            height      : 200,     //設定高度
            typeNumber  : -1,      //計算模式
            correctLevel    : 0,    //糾錯等級
            background      : "#ffffff",//背景顏色
            foreground      : "#000000" //前景顏色
        });
    },
    checkState:function(){ //檢視訂單支付狀態
        $.ajax({
            url:wxpay.URL.CHECK_ORDER_STATE,
            type:'POST', //GET
            async:false,    //或false,是否非同步
            data:{
                orderId:orderId
            },
            timeout:5000,    //超時時間
            dataType:'json',    //返回的資料格式：json/xml/html/script/jsonp/text
            success:function(data,textStatus,jqXHR){
                if(data.code==0){
                    //成功
                    if(data.data == "SUCCESS"){ //支付成功
                        clearInterval(timer);
                        layer.alert('充值成功', {
                            icon: 1,
                            skin: 'layer-ext-moon',
                            end:function(){
                                //支付完成 跳轉頁面
                                parent.wxpay_success();
                            }
                        })
                    }else if(data.data == "CLOSED"){ //交易已關閉
                        clearInterval(timer);
                        layer.alert('交易已關閉', {
                            icon: 2,
                            skin: 'layer-ext-moon',
                            end:function(){
                                //支付完成 跳轉頁面
                                parent.closeWin();
                            }
                        })
                    }
                }else{
                    layer.alert(data.msg, {
                        skin: 'layui-layer-molv' //樣式類名
                        ,closeBtn: 0
                    });
                }
            },
            error:function(xhr,textStatus){
                console.log('錯誤')
                console.log(xhr)
                console.log(textStatus)
            }
        })
    }
};

html

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--頭部-->
    <link href="<%=basePath%>static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=basePath%>static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=basePath%>static/css/animate.min.css" rel="stylesheet">
    <link href="<%=basePath%>static/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <!--頭部結束-->
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <title>微信掃碼支付</title>
    <style>
        body {
            background: #eee;
            font-size: 14px;
            font-family: "微軟雅黑", Helvetica, serif;
            color: #666;
        }

        a img {
            border: 0;
        }

        input {
            border: 1px solid #CCC;
            height: 25px;
            line-height: 25px;
            text-indent: 5px;
        }

        #header {
            padding: 10px 0;
        }

        .mass {
            max-width: 920px;
            min-height: 600px;
            margin: 0 auto;
            background: #fcfcfc;
            border: 1px solid #CCC;
            padding: 10px 50px 50px 50px;
        }

        .sub-logo {
            display: inline-block;
            vertical-align: bottom;
            padding: 0 0 5px 0;
        }

        .sub-logo span {
            font-size: 18px;
            color: #49afcd;
            font-weight: bold;
        }

        .taglineWrap {
            margin-top: 10px;
            padding: 10px 30px 8px 18px;
            min-height: 20px;
            min-width: 300px;
            border: 2px solid #ddd;
        }

        #payinfo {
            line-height: 32px;
            font-size: 16px;
            float: right;
        }

        .price {
            color: #F60;
            font-size: 20px;
            margin: 0 2px 0 5px;
        }

        #title {
            text-align: center;
            margin: 30px 0 20px 0;
        }

        #title span {
            font-size: 21px;
        }

        #paycode {
            text-align: center;
            margin-top: 20px;
        }

        #paymsg {
            text-align: center;
            margin-top: 10px;
        }

        .msg_default_box i {
            margin-left: -16px
        }

        .msg_default_box p {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            vertical-align: middle;
            letter-spacing: normal;
            text-align: left;
            font-size: 16px;
            line-height: 150%;
        }
    </style>
</head>
<body>

    <div class="mass">
        <div id="header">
            <div class="sub-logo">
                <span style="margin-left:-3px;">收銀臺</span>
            </div>
        </div>
        <div id="content">
            <p></p>
            <div class="taglineWrap">
                <img id="wxpay" title="微信支付" src="/static/img/pay/wxpay.png" height="66">
                <span id="payinfo">支付<b class="price">${money}</b>元</span>
            </div>
            <div id="title">
                <span>交易名稱</span>
            </div>
            <div id="paycode">
            </div>
            <div id="paymsg">
                <img src="/static/img/pay/pay-desc.png">
            </div>
        </div>
    </div>

</body>
<script src="<%=basePath%>static/js/jquery.min.js?v=2.1.4"></script>
<!-- 二維碼生成外掛 用於微信支付 -->
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="<%=basePath%>static/plugins/layer/layer.js"></script>
<script src="<%=basePath%>static/js/pay/wxpay.js"></script>
<script>
    var url = '${url}';
    var orderId = '${orderId}';
    $(function(){
        wxpay.load();
    });
</script>
</html>