1. 程式人生 > >微信支付總結--小程式與H5頁面微信支付

微信支付總結--小程式與H5頁面微信支付

專案開發過程中,涉及到了微信支付功能,這裡做一個詳細的記錄。

小程式和H5的後端程式碼是通用的,前端呼叫不同的程式碼實現,這裡不是重點,會簡單的給出相關的程式碼。

微信支付,官方給了開發文件,但是其中還是有一部分需要自己去摸索一下,剛開始接觸走一點彎路踩一點坑也比較正常。

當然微信支付這邊涉及到商戶平臺,需要進行驗證,使用的是公司的賬號,個人小程式沒有支付的許可權。

1.開發之前的認知

先了解一下鋪墊的知識,會讓開發的思路更加的清楚,當時覺得這些沒啥用,現在回想回想這些流程確實會更加的明確開發的流程,這張時序圖就很清楚的描述了流程。這裡是小程式的支付模式。

 這裡知道了大概流程就可以了,是在沒辦法開發時比對自己的程式碼邏輯,會發現跟這個時序圖還是完全吻合的。

需要:appid,商戶mchid,商戶祕鑰key

支付的開發步驟:

這裡官方文件羅列了JSAPI與JSSDK之間的整體流程和一些小區別。H5進行支付時需要在後臺設定授權域名,當然也都需要設定微信支付通知的回撥介面url,微信會向介面傳送支付結果的通知,會按照一定的時間間隔進行通知,接收到支付結果的伺服器返回微信成功或失敗結果,微信接收到成功結果便不會再進行訊息的通知。

 2.程式碼邏輯

瞭解了基本的流程之後,附上程式碼為敬。

 (1)前端簡單的流程就是點選支付按鈕

(2)將支付金額等資料傳到後臺,後臺進行處理,並生成預支付訂單

//Controller方法 返回給小程式端需要的引數Map集合 
Map<String, Object> resultMap = new HashMap<String, Object>();
public class IpUtil {
	/** 
     * IpUtils工具類方法 
     * 獲取真實的ip地址 
     * @param request 
     * @return 
     */  
    public static String getIpAddr(HttpServletRequest request) {  
        String ip = request.getHeader("X-Forwarded-For");  
        if(StringUtils.isNotEmpty(ip) && !"unKnown".equalsIgnoreCase(ip)){  
             //多次反向代理後會有多個ip值,第一個ip才是真實ip  
            int index = ip.indexOf(",");  
            if(index != -1){  
                return ip.substring(0,index);  
            }else{  
                return ip;  
            }  
        }  
        ip = request.getHeader("X-Real-IP");  
        if(StringUtils.isNotEmpty(ip) && !"unKnown".equalsIgnoreCase(ip)){  
           return ip;  
        }  
        return request.getRemoteAddr();  
    }
}

 

public static Map<String, Object> wxPay(String ip,UserInfo user,int inviteAnswerId) throws Exception
	{	
		InviteAnswer answer = seekHelpAnswerService.getInviteAnswer(inviteAnswerId);
		
		Question question = seekHelpQuestionService.getQuestion(answer.questionId);//直接調固定的方法
		
		Account myAccount = seekHelpPayService.getUserAccount(user.id);
		
		BigDecimal qMoney = new BigDecimal(question.money.toString());
		
		BigDecimal totalMoney = new BigDecimal("0");
		
		if(null != answer.helperId && null != question.extraAward && question.extraAward != QuestionExtraAwardType.暫無.code)
		{
			totalMoney = SeniorBigDecimalUtil.add(qMoney, question.extraAwardMoney);
			
		}else{
			
			totalMoney = qMoney;
			
		}
		
		BigDecimal needPayMoney = SeniorBigDecimalUtil.sub(myAccount.money, totalMoney).abs();
		
		BigDecimal needPayMoneyFormatCent = SeniorBigDecimalUtil.mul(needPayMoney, new BigDecimal("100"));//將需要支付的金額轉換為以分為單位的金額
		
		Integer totalFee = needPayMoneyFormatCent.intValue();
		//Integer totalFee = 1;
		
        String nonce_str = WxPayOperate.getRandomStringByLength(32);  //生成的隨機字串        
        
        String body = "求助支付";   //商品名稱            
        
        String out_trade_no = DateTimeOper.getStrForDate(new Date()) + inviteAnswerId;//充值訂單號
        
        
        Map<String, String> packageParams = new HashMap<String, String>();  //組裝引數,使用者生成統一下單介面的簽名  
        packageParams.put("appid", WxPayConfig.appid);  
        packageParams.put("mch_id", WxPayConfig.mch_id);  
        packageParams.put("nonce_str", nonce_str);  
        packageParams.put("body", body);  
        packageParams.put("out_trade_no", out_trade_no);//商戶訂單號  
        packageParams.put("total_fee", String.valueOf(totalFee));//支付金額,這邊需要轉成字串型別,否則後面的簽名會失敗  
        packageParams.put("ip", ip);  
        packageParams.put("notify_url", WxPayConfig.notify_url);//支付成功後的回撥地址  
        packageParams.put("trade_type", WxPayConfig.TRADETYPE);//支付方式  
        packageParams.put("openid", user.openId);
        
        String prestr = PayUtil.createLinkString(packageParams); // 把陣列所有元素,按照“引數=引數值”的模式用“&”字元拼接成字串   
        
        
        String mysign = PayUtil.sign(prestr, WxPayConfig.key, "utf-8").toUpperCase();//MD5運算生成簽名,這裡是第一次簽名,用於呼叫統一下單介面  
        

        String xml = "<xml>" + "<appid>" + WxPayConfig.appid + "</appid>"     //拼接統一下單介面使用的xml資料,要將上一步生成的簽名一起拼接進去  
                + "<body><![CDATA[" + body + "]]></body>"   
                + "<mch_id>" + WxPayConfig.mch_id + "</mch_id>"   
                + "<nonce_str>" + nonce_str + "</nonce_str>"   
                + "<notify_url>" + WxPayConfig.notify_url + "</notify_url>"   
                + "<openid>" + user.openId + "</openid>"   
                + "<out_trade_no>" + out_trade_no + "</out_trade_no>"   
                + "<ip>" + ip+ "</ip>"   
                + "<total_fee>" + String.valueOf(totalFee) + "</total_fee>"  
                + "<trade_type>" + WxPayConfig.TRADETYPE + "</trade_type>"   
                + "<sign>" + mysign + "</sign>"  
                + "</xml>";
        
        String result = PayUtil.httpRequest(WxPayConfig.pay_url, "POST", xml);//呼叫統一下單介面,並接受返回的結果        
  
        Map<?, ?> map = PayUtil.doXMLParse(result);// 將解析結果儲存在HashMap中   
        
        String return_code = (String) map.get("return_code");//返回狀態碼
        
        Map<String, Object> resultMap = new HashMap<String, Object>();//返回給小程式端需要的引數 
        
        if(return_code.equals("SUCCESS"))
        {     
        	
          String result_code = (String)map.get("result_code");       
          
          if(result_code.equals("SUCCESS"))
          {
        	  String prepay_id = (String) map.get("prepay_id");//返回的預付單資訊     	      	  
        	  
              resultMap.put("nonceStr", nonce_str);                           
              
              resultMap.put("package", "prepay_id=" + prepay_id);  
              
              Long timeStamp = System.currentTimeMillis() / 1000;     

              resultMap.put("timeStamp", timeStamp + "");//這邊要將返回的時間戳轉化成字串,不然小程式端呼叫wx.requestPayment方法會報簽名錯誤  
              
              String stringSignTemp = "appId=" + WxPayConfig.appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id+ "&signType=MD5&timeStamp=" + timeStamp;  //拼接簽名需要的引數     
             
              String paySign = PayUtil.sign(stringSignTemp, WxPayConfig.key, "utf-8").toUpperCase();   //再次簽名,這個簽名用於小程式端呼叫wx.requesetPayment方法  
                  
              resultMap.put("paySign", paySign);             
              
          }else{
        	  return_code = "FAIL";//result_code決定最終請求結果,result_code為FAIL,則表示請求支付失敗,return_code也置為FAIL
        	  
        	  String err_code = (String)map.get("err_code");
        	  
        	  String err_code_des = (String) map.get("err_code_des");
        	  
        	  order.err_code = err_code;
        	  
        	  order.err_code_des = err_code_des;
          }
           
        }  
          
        resultMap.put("appid", WxPayConfig.appid); 
        
        resultMap.put("flag", return_code);
        
        resultMap.put("tradeNo", out_trade_no);
          
        return resultMap;
	}

不好的習慣,程式碼的註釋寫的很少。大致的流程就是就官方要求的參加新增到Map中,然後將元素轉換成“引數=引數值”的模式用“&”字元拼接成字串,使用PayUtil.sign方法與商戶祕鑰key進行引數第一次簽名,後面統一下單介面呼叫需要使用。

拼接統一下單介面使用的xml資料,post請求統一下單介面,https://api.mch.weixin.qq.com/pay/unifiedorder,獲取統一下單介面返回的xml格式資料,解析返回的xml資料,儲存在map中,根據返回的狀態碼判斷下單是否成功。如果成功,將成功的資訊返回給小程式端準備呼叫微信app的支付功能。

這部分多看看官方的文件,會有比較詳細的流程,下單請求需要的引數,以及返回的資料欄位等等。

  • 元素轉換成“引數=引數值”的模式用“&”字元拼接成字串
/**   
     * 把陣列所有元素排序,並按照“引數=引數值”的模式用“&”字元拼接成字串   
     * @param params 需要排序並參與字元拼接的引數組   
     * @return 拼接後字串   
     */     
    public static String createLinkString(Map<String, String> params) {     
        List<String> keys = new ArrayList<String>(params.keySet());     
        Collections.sort(keys);     
        String prestr = "";     
        for (int i = 0; i < keys.size(); i++) {     
            String key = keys.get(i);     
            String value = params.get(key);
            if(value != null && (!key.equals("sign")))
            {
            	if (i == keys.size() - 1) {// 拼接時,不包括最後一個&字元     
                    prestr = prestr + key + "=" + value;     
                } else {     
                    prestr = prestr + key + "=" + value + "&";     
                } 
            }
                
        }     
        return prestr;     
    } 
  •  MD5運算簽名
    /**   
     * 簽名字串   
     * @param text需要簽名的字串   
     * @param key 金鑰   
     * @param input_charset編碼格式   
     * @return 簽名結果   
	 * @throws Exception 
     */     
    public static String sign(String text, String key, String input_charset) throws Exception {     
        text = text + "&key=" + key;        
        return MD5(text).toUpperCase();
    }

 

    /**
     * 生成 MD5
     *
     * @param data 待處理資料
     * @return MD5結果
     */
    public static String MD5(String data) throws Exception {
        java.security.MessageDigest md = MessageDigest.getInstance("MD5");
        byte[] array = md.digest(data.getBytes("UTF-8"));
        StringBuilder sb = new StringBuilder();
        for (byte item : array) {
            sb.append(Integer.toHexString((item & 0xFF) | 0x100).substring(1, 3));
        }
        return sb.toString().toUpperCase();
    }

 

  • 拼接xml格式資料 
  • post請求統一下單地址

使用了最基本的HttpURLConnection方式,這裡可以自己更好的實現,目的是獲取返回的結果

    /**   
     *   
     * @param requestUrl請求地址   
     * @param requestMethod請求方法   
     * @param outputStr引數   
     */     
    public static String httpRequest(String requestUrl,String requestMethod,String outputStr){        
        StringBuffer buffer = null;     
        try{     
            URL url = new URL(requestUrl);     
            HttpURLConnection conn = (HttpURLConnection) url.openConnection();     
            conn.setRequestMethod(requestMethod);     
            conn.setDoOutput(true);     
            conn.setDoInput(true);     
            conn.connect();     
            //往伺服器端寫內容     
            if(null !=outputStr){     
                OutputStream os=conn.getOutputStream();     
                os.write(outputStr.getBytes("utf-8"));     
                os.close();     
            }     
            // 讀取伺服器端返回的內容     
            InputStream is = conn.getInputStream();     
            InputStreamReader isr = new InputStreamReader(is, "utf-8");     
            BufferedReader br = new BufferedReader(isr);     
            buffer = new StringBuffer();     
            String line = null;     
            while ((line = br.readLine()) != null) {     
                buffer.append(line);     
            }     
        }catch(Exception e){     
            e.printStackTrace();     
        }  
        return buffer.toString();  
    
  • 解析xml資料
    /** 
     * 解析xml,返回第一級元素鍵值對。如果第一級元素有子節點,則此節點的值是子節點的xml資料。 
     * @param strxml 
     * @return 
     * @throws JDOMException 
     * @throws IOException 
     */  
    public static Map<String, String> doXMLParse(String strxml) throws Exception {  
        if(null == strxml || "".equals(strxml)) {  
            return null;  
        }  
          
        Map<String, String> m = new HashMap<String, String>();  
        InputStream in = String2Inputstream(strxml);  
        SAXBuilder builder = new SAXBuilder();  
        Document doc = builder.build(in);  
        Element root = doc.getRootElement();  
        List<?> list = root.getChildren();  
        Iterator<?> it = list.iterator();  
        while(it.hasNext()) {  
            Element e = (Element) it.next();  
            String k = e.getName();  
            String v = "";  
            List<?> children = e.getChildren();  
            if(children.isEmpty()) {  
                v = e.getTextNormalize();  
            } else {  
                v = getChildrenText(children);  
            }  
              
            m.put(k, v);  
        }  
          
        //關閉流  
        in.close();  
          
        return m;  
    }  
    /** 
     * 獲取子結點的xml 
     * @param children 
     * @return String 
     */  
    public static String getChildrenText(List<?> children) {  
        StringBuffer sb = new StringBuffer();  
        if(!children.isEmpty()) {  
            Iterator<?> it = children.iterator();  
            while(it.hasNext()) {  
                Element e = (Element) it.next();  
                String name = e.getName();  
                String value = e.getTextNormalize();  
                List<?> list = e.getChildren();  
                sb.append("<" + name + ">");  
                if(!list.isEmpty()) {  
                    sb.append(getChildrenText(list));  
                }  
                sb.append(value);  
                sb.append("</" + name + ">");  
            }  
        }  
          
        return sb.toString();  
    }  
    public static InputStream String2Inputstream(String str) throws UnsupportedEncodingException {  
        return new ByteArrayInputStream(str.getBytes("UTF-8"));  
    }
  •  重要的地方,二次簽名
//拼接簽名需要的引數
String stringSignTemp = "appId=" + WxPayConfig.appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id+ "&signType=MD5&timeStamp=" + timeStamp;       
             
//再次簽名,這個簽名用於小程式端呼叫wx.requesetPayment方法
String paySign = PayUtil.sign(stringSignTemp, WxPayConfig.key, "utf-8").toUpperCase();     

 3.小程式端獲取預支付訂單資料,呼叫支付元件

/**
 * 充值並支付成功回撥
 */
function rechargeAndPaySuc(data) {
  if (data.flag === "SUCCESS") {
    var timeStamp = data.timeStamp;
    var nonceStr = data.nonceStr;
    var pack = data.package;
    var paySign = data.paySign;
    tradeNo = data.tradeNo;
    wx.requestPayment({
      timeStamp: timeStamp,
      nonceStr: nonceStr,
      package: pack,
      signType: 'MD5',
      paySign: paySign,
      success: function (re) {
        //支付成功 
        
      },
      fail: function (re) {
        
      //  cancalPay();
      },
      complete: function (re) {

        if (re.errMsg == "requestPayment:fail cancel") {
         cancalPay();
        } else if (re.errMsg == "requestPayment:ok") {
         //進行一些頁面邏輯的處理
        } else {        
          cancalPay();
        }

      }
    })
  } else {
    //呼叫微信支付介面生成預付訂單失敗
    cancalPay();
  }
}

這裡選擇在complete回撥函式進行頁面的處理,但是真正的業務邏輯確認需要在微信通知結果獲取後進行處理,這裡的返回結果並不一定準確。

4.微信通知支付結果,根據設定的結果回撥url進行處理

    /**
	* @Title: wxPayNotify
	* @Description: 支付回撥通知  微信非同步通知
	* 訂單待確認狀態
	* 
	* 如果訂單確認,則進行賬戶金額的劃轉
	* 
	* 如果訂單沒有支付成功,則返回給失敗狀態給客戶端
	* 
	* @param @param request
	* @param @param response
	* @param @throws Exception    
	* @return String    
	* @throws
	*/ 
	@RequestMapping("/wxPayNotify")
	@ResponseBody
	public String wxPayNotify(HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		InputStream inputStream = null;
		
		inputStream = request.getInputStream();
		
		StringBuffer sb = new StringBuffer();
		
		BufferedReader in = new BufferedReader(new InputStreamReader(inputStream,"UTF-8"));
		
		String line = null;
		
		while((line = in.readLine()) != null)
		{
			sb.append(line);
		}
		
		in.close();
			
		inputStream.close();
		
		String result = seekHelpPayService.processWxPayNotifyInfoToDB(sb.toString());
		
		String xml = null;
		
		if(result.equals("success"))
		{
			xml = "<xml>" + "<return_code><![CDATA[" + "SUCCESS" + "]]></return_code>"   
	                + "<return_msg><![CDATA[" + "OK" + "]]></return_msg>"  
	                + "</xml>";
		}
		
		return xml;
	}

這裡就是對獲取的微信支付通知結果進行的處理。

整個單機系統的微信支付流程就完成了,首先最重要的還是要看微信的官方文件,明白開發的流程,理解了流程,剩下就是業務邏輯的處理了,對於開發人員並沒有太大的難度。

H5頁面與小程式端對比,前端呼叫有所不同,這裡的H5支付是在微信環境中的H5

H5頁面js:

        $.ajax({
    		url:urlHeader + "/xxx/xxxx",
    		type:"post",
    		dataType:"json",
    		data:{
    			xxxxxx		
    		},
    		success:function(data){
    			console.log("預支付訂單請求成功:");
    			if(data.flag == "SUCCESS"){
        			appId = data.appid;
        			timeStamp = data.timeStamp;
        			nonceStr = data.nonceStr;
        			packageStr = data.packageStr;
        			signType = data.signType;
        			paySign = data.paySign;
        			out_trade_no = data.tradeNo;
    			}		
    			
    			callPay();
    		},
    		error:function(data){
    			console.log(data);
    			alert("支付失敗");
    		}
    	})

下面的兩個js方法是官方提供的,大致意思是呼叫微信內建的js 

function onBridgeReady(){
	console.log("申請支付頁面");	
	
	WeixinJSBridge.invoke(
		      'getBrandWCPayRequest', {
		    	  "appId":appId,
		    	  "timeStamp":timeStamp,
		    	  "nonceStr":nonceStr,
		    	  "package":packageStr,
		    	  "signType":signType,
		    	  "paySign":paySign
		      },
		      function(res){
		    	  console.log("支付請求返回結果");
		    	  console.log(res);
		      if(res.err_msg == "get_brand_wcpay_request:ok" ){
		      // 使用以上方式判斷前端返回,微信團隊鄭重提示:
		      //res.err_msg將在使用者支付成功後返回ok,但並不保證它絕對可靠。
		    	  //執行成功後的頁面邏輯

		      }else if(res.err_msg == "get_brand_wcpay_request:fail"){
		    	  alert("支付失敗");
		      } 
		   });
}

function callPay(){
	if (typeof WeixinJSBridge == "undefined"){
		   if( document.addEventListener ){
		       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
		   }else if (document.attachEvent){
		       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
		       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
		   }
		}else{
		   onBridgeReady();
		}
}

 

基本的流程就是這樣了,程式碼寫的比較差,持續努力中。

如有問題,歡迎新增我的微信:llbbaa

一起交流,共同學習。。。