微信支付开发h5调用
这两天做微信支付开发。碰到大坑。纠结死我了。好不容做完。
后台java：直接上代码：注意区分前后端的变量大小写。。。
@RequestMapping(value = "/index") public Model index(@RequestParam(value = "openid", required = true) String openid ,Model model,HttpServletRequest request) throws Exception{ logger.info("************openid***********为："+openid); //获取prepayid Map<String ,String > map=new HashMap<String,String>(); WeiXinConfig wcf=weiXinBaseService.getWeiXinConfig(); String nonceStr=UUID.randomUUID().toString().substring(0, 32); oauthService.shareFactory(request); String appid=wcf.getAppid(); long timestamp = System.currentTimeMillis() / 1000; map.put("appid", appid ); map.put("mch_id", WebConfig.get("pay.mch_id")); map.put("nonce_str",nonceStr); map.put("body", WebConfig.get("pay.body")); map.put("out_trade_no", payWxUtil.orderNum()); map.put("total_fee", WebConfig.get("pay.price")); map.put("spbill_create_ip",request.getRemoteAddr()); map.put("notify_url", WebConfig.get("hostAddress")+request.getContextPath()+"/babyShow/payInfo/info"); map.put("trade_type", "JSAPI"); map.put("openid", openid); String paySign=SignUtil.getPayCustomSign(map,WebConfig.get("pay.key")); map.put("sign",paySign); String xml= CommonUtil.ArrayToXml(map); String prepayid= payWxUtil.getPrepayid(xml); logger.info("prepareid*****************************="+prepayid); //封装h5页面调用参数 Map<String ,String > signMap=new HashMap<String ,String >(); signMap.put("appId", appid); logger.info("appId="+appid); signMap.put("timeStamp", timestamp+""); logger.info("timeStamp="+timestamp); signMap.put("package", "prepay_id="+prepayid); logger.info("package="+"prepay_id="+prepayid); signMap.put("signType", "MD5"); logger.info("singType="+"MD5"); signMap.put("nonceStr", nonceStr); logger.info("nonceStr="+nonceStr); model.addAttribute("paytimestamp", timestamp); model.addAttribute("paypackage", "prepay_id="+prepayid); model.addAttribute("paynonceStr", nonceStr); model.addAttribute("paysignType", "MD5"); String paySign2=SignUtil.getPayCustomSign(signMap,WebConfig.get("pay.key")); model.addAttribute("paySign",paySign2 ); logger.info("paySign="+paySign2); return model; }
以上代码获取openid需要根据网页授权来获取。这里就不多讲了。主要讲讲获取prepayid和生成h5页面所需参数，
这里面比较麻烦的就是签名的获取
查看方法SignUtil.getPayCustomSign(signMap,WebConfig.get("pay.key"))
代码如下
/** * 获取支付所需签名 * @param ticket * @param timeStamp * @param card_id * @param code * @return * @throws Exception */ public static String getPayCustomSign(Map<String, String> bizObj,String key) throws Exception { String bizString = CommonUtil.FormatBizQueryParaMap(bizObj, false); logger.info(bizString); return MD5SignUtil.sign(bizString, key); }
其中CommonUtil.FormatBizQueryParaMap是用来做字典排序的。有参考了网上的例子。就没单独做。
public static String FormatBizQueryParaMap(Map<String, String> paraMap, boolean urlencode) throws Exception { String buff = ""; try { List<Map.Entry<String, String>> infoIds = new ArrayList<Map.Entry<String, String>>( paraMap.entrySet()); Collections.sort(infoIds, new Comparator<Map.Entry<String, String>>() { public int compare(Map.Entry<String, String> o1, Map.Entry<String, String> o2) { return (o1.getKey()).toString().compareTo( o2.getKey()); } }); for (int i = 0; i < infoIds.size(); i++) { Map.Entry<String, String> item = infoIds.get(i); //System.out.println(item.getKey()); if (item.getKey() != "") { String key = item.getKey(); String val = item.getValue(); if (urlencode) { val = URLEncoder.encode(val, "utf-8"); } buff += key + "=" + val + "&"; } } if (buff.isEmpty() == false) { buff = buff.substring(0, buff.length() - 1); } } catch (Exception e) { throw new Exception(e.getMessage()); } return buff; }
其中MD5SignUtil.sign(bizString, key)方法如下
public static String sign(String content, String key) throws Exception{ String signStr = ""; signStr = content + "&key=" + key; return MD5Util.MD5(signStr).toUpperCase(); }
其中MD5Util.MD5(signStr)方法如下
public final static String MD5(String s) { char hexDigits[]={'0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'}; try { byte[] btInput = s.getBytes(); MessageDigest mdInst = MessageDigest.getInstance("MD5"); mdInst.update(btInput); byte[] md = mdInst.digest(); int j = md.length; char str[] = new char[j * 2]; int k = 0; for (int i = 0; i < j; i++) { byte byte0 = md[i]; str[k++] = hexDigits[byte0 >>> 4 & 0xf]; str[k++] = hexDigits[byte0 & 0xf]; } return new String(str); } catch (Exception e) { e.printStackTrace(); return null; } }
CommonUtil.ArrayToXml(map)方法如下
public static String ArrayToXml(Map<String, String> arr) { String xml = "<xml>"; Iterator<Entry<String, String>> iter = arr.entrySet().iterator(); while (iter.hasNext()) { Entry<String, String> entry = iter.next(); String key = entry.getKey(); String val = entry.getValue(); if (IsNumeric(val)) { xml += "<" + key + ">" + val + "</" + key + ">"; } else xml += "<" + key + "><![CDATA[" + val + "]]></" + key + ">"; } xml += "</xml>"; return xml; }
public static boolean IsNumeric(String str) { if (str.matches("\\d *")) { return true; } else { return false; } }
发送请求到微信获取prepayid代码如下
public static String URL="https://api.mch.weixin.qq.com/pay/unifiedorder"; @SuppressWarnings("deprecation") public JSONObject getPrepayJson(String xml){ HttpClient httpClient = new HttpClient(new HttpClientParams(),new SimpleHttpConnectionManager(true) ); InputStream is = null; PostMethod method=null; try { String url =URL; method = HttpClientUtils.postMethod(url); method.setRequestBody(xml); httpClient.executeMethod(method); //读取响应 is = method.getResponseBodyAsStream(); JSONObject o =Xml2JsonUtil.xml2JSON(is); return o; } catch (Exception e) { e.printStackTrace(); }finally{ if(method!=null){ method.releaseConnection(); } if(is!=null){ try { is.close(); } catch (IOException e1) { e1.printStackTrace(); } } } return null; } public String getPrepayid(String xml){ try { JSONObject jo=getPrepayJson(xml); JSONObject element=jo.getJSONObject("xml"); String prepayid=((JSONArray)element.get("prepay_id")).get(0).toString(); return prepayid; } catch (Exception e) { e.printStackTrace(); } return null; } public String orderNum(){ String chars = "0123456789"; String order = System.currentTimeMillis()+""; String res = ""; for (int i = 0; i < 19; i++) { Random rd = new Random(); res += chars.charAt(rd.nextInt(chars.length() - 1)); } order+=res; return order; }
xml转json方法Xml2JsonUtil.xml2JSON(is);。摘自网络
/** * 转换一个xml格式的字符串到json格式 * * @param xml * xml格式的字符串 * @return 成功返回json 格式的字符串;失败反回null */ @SuppressWarnings("unchecked") public static JSONObject xml2JSON(InputStream is) { JSONObject obj = new JSONObject(); try { SAXReader sb = new SAXReader(); Document doc = sb.read(is); Element root = doc.getRootElement(); obj.put(root.getName(), iterateElement(root)); return obj; } catch (Exception e) { log.error("传入XML后转换JSON出现错误===== Xml2JsonUtil-->xml2JSON============>>",e); return null; } } /** * 一个迭代方法 * * @param element * : org.jdom.Element * @return java.util.Map 实例 */ @SuppressWarnings("unchecked") private static Map iterateElement(Element element) { List jiedian = element.elements() ; Element et = null; Map obj = new HashMap(); List list = null; for (int i = 0; i < jiedian.size(); i++) { list = new LinkedList(); et = (Element) jiedian.get(i); if (et.getTextTrim().equals("")) { if (et.elements().size() == 0) continue; if (obj.containsKey(et.getName())) { list = (List) obj.get(et.getName()); } list.add(iterateElement(et)); obj.put(et.getName(), list); } else { if (obj.containsKey(et.getName())) { list = (List) obj.get(et.getName()); } list.add(et.getTextTrim()); obj.put(et.getName(), list); } } return obj; }
服务端基本这么多
前端被微信和我自己挖了大坑，整整搞了两天，擦
先是看的微信文档jssdk文档（开始埋坑。。）
页面引入js
加入
wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '${appid}', // 必填，公众号的唯一标识 timestamp: '${timestamp}', // 必填，生成签名的时间戳 nonceStr: '${nonceStr}', // 必填，生成签名的随机串 signature: '${signature}',// 必填，签名，见附录1 jsApiList: [ 'chooseWXPay' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 });
嗯。配置好了。如果传入jsconfig的参数。。。
然后看到jssdk里面有发送一个微信支付请求？
嗯加进去
function pay(){ wx.chooseWXPay({ timestamp: ${paytimestamp}, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: '${paynonceStr}', // 支付签名随机串，不长于 32 位 package: '${paypackage}', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***） signType: '${paysignType}', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' paySign: '${paySign}', // 支付签名 success: function (res) { alert("支付成功"); // 支付成功后的回调函数 } }); }
然后发布，执行调试。。尼玛。怎么样都支付不了。一会儿报订单信息错误、一会儿报签名错误。。。找了N多资料均不对
后来想啊。大不了用商户平台提供的文档写接口什么的。于是加入了代码
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId" : "${appid}", //公众号名称，由商户传入 "timeStamp":"${paytimestamp}", //时间戳，自1970年以来的秒数 "nonceStr" : "${paynonceStr}", //随机串 "package" : "${paypackage}", "signType" : "${paysignType}", //微信签名方式: "paySign" : "${paySign}" //微信签名 }, function(res){ alert(res.err_msg); // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返 } ); } function pay2(){ 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(); } }
发布调试。。。还是不对。。两个按钮pay（）和pay2（）均不对。pay方法还是一会儿订单信息错误一会儿签名错误。pay2（）方法则一直报签名错误。。。尼玛。吧经历放后台签名。。怎么改都不行。签名明明对的啊。可以获取prepayid的。为毛封装h5参数时就出错了呢。。。折腾啊。。。搞了N久。。就尼玛不对。。。后来一个小错误pay方法js报错了。。结果pay2方法确可以执行了。。。吧pay的js报错去了之后pay2又不能用了。。我擦。。哥有预感。。难道两种方式冲突了？？于是我把config和pay方法删除了再试试。。。尼玛果然可以了。不能加入config和pay。。。果然可以了。。。我擦。折腾的。。微信啃爹啊。第一种方式无法用有没有，误导人啊。。。正确结果就是商品平台的文档使用方法js如下：
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId" : "${appid}", //公众号名称，由商户传入 "timeStamp":"${paytimestamp}", //时间戳，自1970年以来的秒数 "nonceStr" : "${paynonceStr}", //随机串 "package" : "${paypackage}", "signType" : "${paysignType}", //微信签名方式: "paySign" : "${paySign}" //微信签名 }, function(res){ alert(res.err_msg); // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返 } ); } function pay(){ 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(); } }
至此。终于把微信支付搞定了。留着博客。防止后人走弯路（config里面不能加入chooseWXPay方法。。切记）
