微信支付之微信公众号网页支付（各种总结）

淩亂°似流年 2022-07-12 09:08 518阅读 0赞

微信支付除了坑，就是坑！！！

网上也还是好多吐槽的，各种签名问题，文档也比较乱。重点是，安卓最后报错就只报chooseWXPay failed。什么具体错误也不显示。最后还是喊朋友的苹果机远程帮忙测试（苹果机会返回错误信息）。

一：签名问题

微信网页支付。需要3个签名。后面2个签名的文档总连接页面，开发前一定要仔细看。https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html\#.E5.8F.91.E8.B5.B7.E4.B8.80.E4.B8.AA.E5.BE.AE.E4.BF.A1.E6.94.AF.E4.BB.98.E8.AF.B7.E6.B1.82        第一个，获取prepay\_id的时候需要一个，那个按照文档来没问题。第二个签名。再调用JS种需要，需要conf配置。那个也是需要生成一个授权签名的。

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名，见附录1
        jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

上面这个，签名请去看那个连接的附录1。这个算法是附录1有的。和签名的不一样。

第三个签名：

### **发起一个微信支付请求** ###

wx.chooseWXPay({
        timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: '', // 支付签名随机串，不长于 32 位
        package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
        signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: '', // 支付签名
        success: function (res) {
            // 支付成功后的回调函数
        }
    });

备注：prepay\_id 通过微信支付统一下单接口拿到，paySign 采用统一的微信支付 Sign 签名生成方法，注意这里 appId 也要参与签名，appId 与 config 中传入的 appId 一致，即最后参与签名的参数有appId, timeStamp, nonceStr, package, signType。

请注意该接口只能在你配置的支付目录下调用，同时需确保支付目录在JS接口安全域名下。

微信支付开发文档：[https://pay.weixin.qq.com/wiki/doc/api/index.html][https_pay.weixin.qq.com_wiki_doc_api_index.html]

上面的这个paySign就是最后一次签名（第三次），参数有appId, timeStamp, nonceStr, package, signType这三个参数。

第一个签名的代码：

SortedMap<Object,Object> parameters = new TreeMap<Object,Object>();  
            parameters.put("appid", appid);  
            parameters.put("mch_id", mch_id);
            parameters.put("nonce_str",nonce_str); 
            parameters.put("body", body); 
    		parameters.put("out_trade_no", out_trade_no);
            parameters.put("total_fee", total_fee);
            parameters.put("spbill_create_ip", spbill_create_ip);
            parameters.put("notify_url",notify_url);
            parameters.put("trade_type", trade_type);
            parameters.put("openid", openid);
            System.out.println("ip:"+spbill_create_ip);
            String mysign=WeChatPayUtils.createSign("UTF-8", parameters);
            System.out.println("我的签名是:"+mysign);

第一个签名获得后，就可以获取到prepay\_id了。

HttpPost post=new HttpPost("https://api.mch.weixin.qq.com/pay/unifiedorder");
    		String xml="<xml>"+ 
    				"<appid>"+appid+"</appid>"+
    				"<body>"+body+"</body>"+
    				"<mch_id>"+mch_id+"</mch_id>"+
    				"<nonce_str>"+nonce_str+"</nonce_str>"+
    				"<notify_url>"+notify_url+"</notify_url>"+
    				"<openid>"+openid+"</openid>"+
    				"<out_trade_no>"+out_trade_no+"</out_trade_no>"+
    				"<spbill_create_ip>"+spbill_create_ip+"</spbill_create_ip>"+
    				"<total_fee>"+total_fee+"</total_fee>"+
    				"<trade_type>"+trade_type+"</trade_type>"+
    				"<sign>"+mysign+"</sign>"+
    			    "</xml>";
    		
    			post.setEntity(new StringEntity(xml,"UTF-8"));
    			HttpResponse execute = httpClient.execute(post);
    			HttpEntity entity = execute.getEntity();
    			String responseContent = EntityUtils.toString(entity,"utf-8");
    			String prepay_id=WeChatPayUtils.getPrepay_id(responseContent);

到现在为止，已经获取到prepay\_id了。

第二次JS授权签名：

System.out.println("获取到的prepay_id为:"+prepay_id);
    			Token token=WeChatPayUtils.getToken() ;
    			String jsapi_ticket = WeChatPayUtils.getJsapi_ticket(token);
    			SortedMap<Object,Object> quanXianParameters = new TreeMap<Object,Object>();
    			quanXianParameters.put("noncestr",nonce_str);
    			quanXianParameters.put("jsapi_ticket",jsapi_ticket);
    			quanXianParameters.put("timestamp",timeStamp);
    			quanXianParameters.put("url",quanXianUrl);
    			String quanXianSign = WeChatPayUtils.createSignWithNoKey("UTF-8", quanXianParameters);//调用JS权限签名SHA1

第三次支付授权

SortedMap<Object,Object> wePayparameters = new TreeMap<Object,Object>();
    			wePayparameters.put("appId", appid);
    			wePayparameters.put("timeStamp", timeStamp);
    			wePayparameters.put("nonceStr", nonceStr);
    			wePayparameters.put("signType", signType);
    			wePayparameters.put("package","prepay_id="+prepay_id_package);
    			String wePaySign=WeChatPayUtils.createSign("utf-8", wePayparameters);//支付签名MD5且大写

大概就需要的这些参数。当时我遇到最烦的就说第三次授权那个，那个应该是wePayparameters.put("package","prepay\_id="+prepay\_id\_package);

前台代码：

<%@ page language="java" contentType="text/html; charset=utf-8"
    	pageEncoding="utf-8"%>
    <!DOCTYPE html>
    <html class="no-js">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>微信支付</title>
    <jsp:include page="../../common/include_head_css.jsp"></jsp:include>
    <script type="text/javascript"
    	src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    var appId = "${appId}";
    var timestamp ="${timeStamp}";
    var nonceStr = "${nonceStr}";
    var signType = "${signType}";
    var paySign ="${wePaySign}"; 
    var prepay_id="${prepay_id}";
    var signature="${quanXianSign}";
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp:timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature,// 必填，签名，见附录1
        jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    function pay(){
    	alert("进了pay prepay_id:"+prepay_id+"timeStamp:"+timestamp);
    	
    	wx.chooseWXPay({
    		'appId':appId,
    		'timestamp' : timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    		'nonceStr' : nonceStr, // 支付签名随机串，不长于 32 位
    		'package' : 'prepay_id='+prepay_id,  // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
    		'signType' : signType,  // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    		'paySign' : paySign,   // 支付签名
    		success : function(res) {
    			alert("结果:" + res);
    		}
    	});
    }
    
    	
    </script>
    </head>
    <body>
    	<button class="am-btn am-btn-success" onClick="pay()">点击支付</button>
    </body>
    </html>

后台应该要把那些appid等信息传到session种，这样前面jsp才能获取。

wechatpayutils类种的核心代码：

/** 
         * 微信支付签名算法sign 默认带key
         * @param characterEncoding 
         * @param parameters 
         * @return 
         */  
         
        public static String createSign(String characterEncoding,SortedMap<Object,Object> parameters){  
            StringBuffer sb = new StringBuffer();  
            Set es = parameters.entrySet();//所有参与传参的参数按照accsii排序（升序）  
            Iterator it = es.iterator();  
            while(it.hasNext()) {  
                Map.Entry entry = (Map.Entry)it.next();  
                String k = (String)entry.getKey();  
                Object v = entry.getValue();  
                if(null != v && !"".equals(v)   
                        && !"sign".equals(k) && !"key".equals(k)) {  
                    sb.append(k + "=" + v + "&");  
                }  
            }  
            sb.append("key=" + WeChatPayUtils.key);  
            System.out.println("创建sign的字符串未MD5加密前:"+sb.toString());
            String sign = MD5Util.MD5Encode(sb.toString(), characterEncoding).toUpperCase();  
            return sign;  
        }  
        /** 
         * 微信支付签名算法sign 默认不带key
         * @param characterEncoding 
         * @param parameters 
         * @return 
         */  
         
        public static String createSignWithNoKey(String characterEncoding,SortedMap<Object,Object> parameters){  
            StringBuffer sb = new StringBuffer();  
            Set es = parameters.entrySet();//所有参与传参的参数按照accsii排序（升序）  
            Iterator it = es.iterator();  
            while(it.hasNext()) {  
                Map.Entry entry = (Map.Entry)it.next();  
                String k = (String)entry.getKey();  
                Object v = entry.getValue();  
                if(null != v && !"".equals(v)   
                        && !"sign".equals(k) && !"key".equals(k)) {  
                    sb.append(k + "=" + v + "&");  
                }  
            }  
            sb=new StringBuffer(sb.substring(0, sb.length()-1));
            System.out.println("创建sign不用key未MD5加密前:"+sb.toString());
            String sign = SHA1.encode(sb.toString());
            return sign;  
        }  
          public static String getJsapi_ticket(Token token)
        {
          String result="";
          String url=WeChatPayUtils.jsapi_ticket;
          HttpClient client=HttpClients.createDefault();
          
          HttpGet get=new HttpGet(url.replace("ACCESS_TOKEN", token.getAccessToken()));
          
          try {
             HttpResponse execute = client.execute(get);
             HttpEntity entity = execute.getEntity();
          
             
             String responseContent = EntityUtils.toString(entity,"UTF-8");
             System.out.println();
             System.out.println("获取jsapi_ticket返回的json串："+responseContent);
             System.out.println();
             JSONObject jsonResult=new JSONObject(responseContent);
             result=(String) jsonResult.get("ticket");
          } catch (ClientProtocolException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
          } catch (IOException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
          } catch (JSONException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
          }
          
          return result;
        }

MD5utils工具类中的核心代码：

private static String byteArrayToHexString(byte b[]) {
    		StringBuffer resultSb = new StringBuffer();
    		for (int i = 0; i < b.length; i++)
    			resultSb.append(byteToHexString(b[i]));
    
    		return resultSb.toString();
    	}
    
    	private static String byteToHexString(byte b) {
    		int n = b;
    		if (n < 0)
    			n += 256;
    		int d1 = n / 16;
    		int d2 = n % 16;
    		return hexDigits[d1] + hexDigits[d2];
    	}
    
    	public static String MD5Encode(String origin, String charsetname) {
    		String resultString = null;
    		try {
    			resultString = new String(origin);
    			MessageDigest md = MessageDigest.getInstance("MD5");
    			if (charsetname == null || "".equals(charsetname))
    				resultString = byteArrayToHexString(md.digest(resultString
    						.getBytes()));
    			else
    				resultString = byteArrayToHexString(md.digest(resultString
    						.getBytes(charsetname)));
    		} catch (Exception exception) {
    		}
    		return resultString;
    	}
    
    	private static final String hexDigits[] = { "0", "1", "2", "3", "4", "5",
    		"6", "7", "8", "9", "a", "b", "c", "d", "e", "f" };
    	/**
    	 * 生成订单号
    	 * @return 订单号
    	 */
    	public static String getout_trade_no()
    	{
    		String out_trade_no="";
    		Date now = new Date(); 
    		SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
    		String time=String.valueOf(System.currentTimeMillis());
    		long d=System.currentTimeMillis();
    		String r=MD5Encode(time,"UTF-8");
    		System.out.println(r);
    		System.out.println(d);
    		String hehe = dateFormat.format( now ); 
    		System.out.println(hehe+"-"+r); 
    		out_trade_no=hehe+"-"+r;
    		return out_trade_no.substring(0, 30);
    	}

有个重要的就是微信支付目录问题。如果你的类是再www.xxx.com/pay下面的，那就是填写这个www.xxx.com/pay。

比如请求路径为:www.xxx.com/pay/pay\_index

那就是填写上面那个www.xxx.com/pay。而不是填写www.xxx.com/pay/pay\_index。这个pay\_index是错的哦！！

凑合看。这个是可以的。我测试成功了。折腾了好几天。如果你还不懂，留言看到了会回复的。自己都感觉乱。。。

[https_pay.weixin.qq.com_wiki_doc_api_index.html]: https://pay.weixin.qq.com/wiki/doc/api/index.html