微信支付-公众号支付H5调用支付详解

Posted jpfss

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信支付-公众号支付H5调用支付详解相关的知识，希望对你有一定的参考价值。

微信公众号支付

最近项目需要微信支付，然后看了下微信公众号支付，，虽然不难，但是细节还是需要注意的，用了大半天时间写了个demo，并且完整的测试了一下支付流程，下面分享一下微信公众号支付的经验。


一、配置公众号微信支付  

   需要我们配置微信公众号支付地址和测试白名单。

  技术分享图片

     比如：支付JS页面的地址为 http://www.xxx.com/shop/pay/

            那此处配置www.xxx.com/shop/pay/


  二、开发流程

     借用微信公众号支付api(地址 http://pay.weixin.qq.com/wiki/doc/api/index.php?chapter=7_4)，我们需要开发的为红色标记出的。如下：

    技术分享图片

 

三、向微信服务器端下订单

             调用统一下单接口，这样就能获取微信支付的prepay_id（http://pay.weixin.qq.com/wiki/doc/api/index.php?chapter=9_1）。

     在调用该接口前有几个字段是H5支付必须填写的openid

    3.1 获取openid

         可以通过网页授权形式（http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html）

       在微信中发送如下链接

      

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=要跳转的下订单的url&response_type=code&scope=snsapi_base&state=123#wechat_redirect


   3.2 后台支付

    代码如下，包含预处理订单，支付订单等接口。

  1. package org.andy.controller;
  2.  
  3. import java.io.ByteArrayInputStream;
  4. import java.io.IOException;
  5. import java.io.InputStream;
  6. import java.io.UnsupportedEncodingException;
  7. import java.util.Date;
  8. import java.util.HashMap;
  9. import java.util.Iterator;
  10. import java.util.Map;
  11. import java.util.Map.Entry;
  12. import java.util.Random;
  13.  
  14. import javax.servlet.ServletInputStream;
  15. import javax.servlet.http.HttpServletRequest;
  16. import javax.servlet.http.HttpServletResponse;
  17.  
  18. import org.apache.commons.codec.digest.DigestUtils;
  19. import org.springframework.stereotype.Controller;
  20. import org.springframework.web.bind.annotation.RequestMapping;
  21. import org.xmlpull.v1.XmlPullParser;
  22. import org.xmlpull.v1.XmlPullParserException;
  23. import org.xmlpull.v1.XmlPullParserFactory;
  24.  
  25. import com.fasterxml.jackson.databind.JsonNode;
  26. import com.gson.oauth.Oauth;
  27. import com.gson.oauth.Pay;
  28. import com.gson.util.HttpKit;
  29. import com.gson.util.Tools;
  30. import org.andy.util.DatetimeUtil;
  31. import org.andy.util.JsonUtil;
  32. import org.andy.util.SessionUtil;
  33. import org.andy.util.WebUtil;
  34.  
  35. @Controller
  36. @RequestMapping("/pay")
  37. public class WXPayController {
  38.  
  39.   @RequestMapping(value = "wxprepay")
  40.  public void jspay(HttpServletRequest request, HttpServletResponse response, String callback) throws Exception {
  41.        // 获取openid
  42.        String openId = SessionUtil.getAtt(request, "openId");
  43.      if (openId == null) {
  44.            openId = getUserOpenId(request);
  45.         }
  46.  
  47.       String appid = "wx16691fcb0523c1a4";
  48.        String partnerid = "22223670";
  49.      String paternerKey = "fjfjfjfjf1234567FFFFFFFFF1234567";
  50.  
  51.       String out_trade_no = getTradeNo();
  52.      Map<String, String> paraMap = new HashMap<String, String>();
  53.       paraMap.put("appid", appid);
  54.        paraMap.put("attach", "测试支付");
  55.         paraMap.put("body", "测试购买Beacon支付");
  56.       paraMap.put("mch_id", partnerid);
  57.       paraMap.put("nonce_str", create_nonce_str());
  58.       paraMap.put("openid", openId);
  59.      paraMap.put("out_trade_no", out_trade_no);
  60.      paraMap.put("spbill_create_ip", getAddrIp(request));
  61.        paraMap.put("total_fee", "1");
  62.         paraMap.put("trade_type", "JSAPI");
  63.        paraMap.put("notify_url", "http://www.xxx.co/wxpay/pay/appPay_notify.shtml");
  64.      String sign = getSign(paraMap, paternerKey);
  65.         paraMap.put("sign", sign);
  66.  
  67.         // 统一下单 https://api.mch.weixin.qq.com/pay/unifiedorder
  68.         String url = "https://api.mch.weixin.qq.com/pay/unifiedorder";
  69.  
  70.         String xml = ArrayToXml(paraMap, false);
  71.  
  72.      String xmlStr = HttpKit.post(url, xml);
  73.  
  74.         // 预付商品id
  75.      String prepay_id = "";
  76.  
  77.         if (xmlStr.indexOf("SUCCESS") != -1) {
  78.           Map<String, String> map = doXMLParse(xmlStr);
  79.          prepay_id = (String) map.get("prepay_id");
  80.      }
  81.  
  82.       Map<String, String> payMap = new HashMap<String, String>();
  83.        payMap.put("appId", appid);
  84.         payMap.put("timeStamp", create_timestamp());
  85.        payMap.put("nonceStr", create_nonce_str());
  86.         payMap.put("signType", "MD5");
  87.         payMap.put("package", "prepay_id=" + prepay_id);
  88.       String paySign = getSign(payMap, paternerKey);
  89.  
  90.      payMap.put("pg", prepay_id);
  91.        payMap.put("paySign", paySign);
  92.  
  93.        WebUtil.response(response, WebUtil.packJsonp(callback,
  94.               JsonUtil.warpJsonNodeResponse(JsonUtil.objectToJsonNode(payMap)).toString()));
  95.   }
  96.  
  97.   @RequestMapping(value = "appPay")
  98.    public void appPay(HttpServletRequest request, HttpServletResponse response, String body, String detail,
  99.          String total_fee, String spbill_create_ip, String notify_url, String trade_type, String callback)
  100.            throws Exception {
  101.  
  102.      String appid = "wx16691fcb0523c1a4";
  103.       String partnerid = "22223670";
  104.         String paternerKey = "fjfjfjfjf1234567FFFFFFFFF1234567";
  105.  
  106.         String out_trade_no = getTradeNo();
  107.         Map<String, String> paraMap = new HashMap<String, String>();
  108.      paraMap.put("appid", appid);
  109.       paraMap.put("body", body);
  110.         paraMap.put("mch_id", partnerid);
  111.      paraMap.put("nonce_str", create_nonce_str());
  112.      paraMap.put("out_trade_no", out_trade_no);
  113.         paraMap.put("spbill_create_ip", spbill_create_ip);
  114.         paraMap.put("total_fee", total_fee);
  115.       paraMap.put("trade_type", trade_type);
  116.         paraMap.put("notify_url", notify_url);
  117.         String sign = getSign(paraMap, paternerKey);
  118.        paraMap.put("sign", sign);
  119.  
  120.       // 统一下单 https://api.mch.weixin.qq.com/pay/unifiedorder
  121.        String url = "https://api.mch.weixin.qq.com/pay/unifiedorder";
  122.  
  123.       String xml = ArrayToXml(paraMap, false);
  124.  
  125.        String xmlStr = HttpKit.post(url, xml);
  126.  
  127.       // 预付商品id
  128.         String prepay_id = "";
  129.  
  130.       Map<String, String> map = doXMLParse(xmlStr);
  131.         if (xmlStr.indexOf("SUCCESS") != -1) {
  132.          prepay_id = (String) map.get("prepay_id");
  133.         }
  134.  
  135.         String result_code = map.get("result_code");
  136.       String err_code_des = map.get("err_code_des");
  137.         Map<String, String> payMap = new HashMap<String, String>();
  138.       payMap.put("appid", appid);
  139.        payMap.put("partnerid", partnerid);
  140.        payMap.put("prepayid", prepay_id);
  141.         payMap.put("package", "Sign=WXPay");
  142.      payMap.put("noncestr", create_nonce_str());
  143.        payMap.put("timestamp", create_timestamp());
  144.       String paySign = getSign(payMap, paternerKey);
  145.  
  146.        payMap.put("sign", paySign);
  147.       payMap.put("result_code", result_code);
  148.        payMap.put("err_code_des", err_code_des);
  149.  
  150.        WebUtil.response(response, WebUtil.packJsonp(callback,
  151.              JsonUtil.warpJsonNodeResponse(JsonUtil.objectToJsonNode(payMap)).toString()));
  152.  }
  153.  
  154.     @RequestMapping("/appPay_notify")
  155.   public void appPayNotify(HttpServletRequest request, HttpServletResponse response) throws Exception {
  156.         // String xml =
  157.       // "<xml><appid><![CDATA[wxb4dc385f953b356e]]></appid><bank_type><![CDATA[CCB_CREDIT]]></bank_type><cash_fee><![CDATA[1]]></cash_fee><fee_type><![CDATA[CNY]]></fee_type><is_subscribe><![CDATA[Y]]></is_subscribe><mch_id><![CDATA[1228442802]]></mch_id><nonce_str><![CDATA[1002477130]]></nonce_str><openid><![CDATA[o-HREuJzRr3moMvv990VdfnQ8x4k]]></openid><out_trade_no><![CDATA[1000000000051249]]></out_trade_no><result_code><![CDATA[SUCCESS]]></result_code><return_code><![CDATA[SUCCESS]]></return_code><sign><![CDATA[1269E03E43F2B8C388A414EDAE185CEE]]></sign><time_end><![CDATA[20150324100405]]></time_end><total_fee>1</total_fee><trade_type><![CDATA[JSAPI]]></trade_type><transaction_id><![CDATA[1009530574201503240036299496]]></transaction_id></xml>";
  158.        response.setCharacterEncoding("UTF-8");
  159.        response.setContentType("text/xml");
  160.       ServletInputStream in = request.getInputStream();
  161.       String xmlMsg = Tools.inputStream2String(in);
  162.  
  163.         Map<String, String> map = doXMLParse(xmlMsg);
  164.         String return_code = map.get("return_code");
  165.       String return_msg = map.get("return_msg");
  166.  
  167.       map = new HashMap<String, String>();
  168.        map.put("return_code", return_code);
  169.       map.put("return_msg", return_msg);
  170.  
  171.       // 响应xml
  172.      String resXml = ArrayToXml(map, true);
  173.        response.getWriter().write(resXml);
  174.     }
  175.  
  176.     @RequestMapping("/orderquery")
  177.  public void orderquery(HttpServletRequest request, HttpServletResponse response, String transaction_id,
  178.          String out_trade_no, String callback) throws Exception {
  179.  
  180.         String url = "https://api.mch.weixin.qq.com/pay/orderquery";
  181.  
  182.         String appid = "wx16691fcb0523c1a4";
  183.       String partnerid = "22223670";
  184.         String paternerKey = "fjfjfjfjf1234567FFFFFFFFF1234567";
  185.  
  186.         Map<String, String> map = new HashMap<String, String>();
  187.      map.put("appid", appid);
  188.       map.put("mch_id", partnerid);
  189.      if (transaction_id != null && !transaction_id.equals("")) {
  190.            map.put("transaction_id", transaction_id);
  191.         } else {
  192.          map.put("out_trade_no", out_trade_no);
  193.         }
  194.       map.put("nonce_str", create_nonce_str());
  195.      String paySign = getSign(map, paternerKey);
  196.         map.put("sign", paySign);
  197.  
  198.        String xml = ArrayToXml(map, false);
  199.      String xmlStr = HttpKit.post(url, xml);
  200.  
  201.       Map<String, String> orderMap = doXMLParse(xmlStr);
  202.  
  203.      WebUtil.response(response, WebUtil.packJsonp(callback,
  204.              JsonUtil.warpJsonNodeResponse(JsonUtil.objectToJsonNode(orderMap)).toString()));
  205.    }
  206.  
  207.     /**
  208.   * map转成xml
  209.    * 
  210.    * @param arr
  211.     * @return
  212.    */
  213.  public String ArrayToXml(Map<String, String> parm, boolean isAddCDATA) {
  214.      StringBuffer strbuff = new StringBuffer("<xml>");
  215.      if (parm != null && !parm.isEmpty()) {
  216.          for (Entry<String, String> entry : parm.entrySet()) {
  217.               strbuff.append("<").append(entry.getKey()).append(">");
  218.                 if (isAddCDATA) {
  219.                     strbuff.append("<![CDATA[");
  220.                    if (StringUtil.isNotEmpty(entry.getValue())) {
  221.                        strbuff.append(entry.getValue());
  222.                       }
  223.                   strbuff.append("]]>");
  224.              } else {
  225.                  if (StringUtil.isNotEmpty(entry.getValue())) {
  226.                        strbuff.append(entry.getValue());
  227.                       }
  228.                   }
  229.               strbuff.append("</").append(entry.getKey()).append(">");
  230.            }
  231.       }
  232.       return strbuff.append("</xml>").toString();
  233.    }
  234.  
  235.     // 获取openId
  236.   private String getUserOpenId(HttpServletRequest request) throws Exception {
  237.         String code = request.getParameter("code");
  238.        if (code == null) {
  239.             String openId = request.getParameter("openId");
  240.            return openId;
  241.        }
  242.       Oauth o = new Oauth();
  243.        String token = o.getToken(code);
  244.        JsonNode node = JsonUtil.StringToJsonNode(token);
  245.       String openId = node.get("openid").asText();
  246.       return openId;
  247.    }
  248.  
  249.     private String create_nonce_str() {
  250.       String chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  251.       String res = "";
  252.       for (int i = 0; i < 16; i++) {
  253.             Random rd = new Random();
  254.             res += chars.charAt(rd.nextInt(chars.length() - 1));
  255.       }
  256.       return res;
  257.   }
  258.  
  259.     private String getAddrIp(HttpServletRequest request) {
  260.        return request.getRemoteAddr();
  261.   }
  262.  
  263.     private String create_timestamp() {
  264.       return Long.toString(System.currentTimeMillis() / 1000);
  265.     }
  266.  
  267.     private String getTradeNo() {
  268.         String timestamp = DatetimeUtil.formatDate(new Date(), DatetimeUtil.DATETIME_PATTERN);
  269.        return "HZNO" + timestamp;
  270.   }
  271.  
  272.     private String getSign(Map<String, String> params, String paternerKey) throws UnsupportedEncodingException {
  273.      String string1 = Pay.createSign(params, false);
  274.       String stringSignTemp = string1 + "&key=" + paternerKey;
  275.       String signValue = DigestUtils.md5Hex(stringSignTemp).toUpperCase();
  276.        return signValue;
  277.     }
  278.  
  279.     private Map<String, String> doXMLParse(String xml) throws XmlPullParserException, IOException {
  280.  
  281.         InputStream inputStream = new ByteArrayInputStream(xml.getBytes());
  282.  
  283.         Map<String, String> map = null;
  284.  
  285.       XmlPullParser pullParser = XmlPullParserFactory.newInstance().newPullParser();
  286.  
  287.        pullParser.setInput(inputStream, "UTF-8"); // 为xml设置要解析的xml数据
  288.  
  289.      int eventType = pullParser.getEventType();
  290.  
  291.      while (eventType != XmlPullParser.END_DOCUMENT) {
  292.             switch (eventType) {
  293.          case XmlPullParser.START_DOCUMENT:
  294.                map = new HashMap<String, String>();
  295.                break;
  296.  
  297.          case XmlPullParser.START_TAG:
  298.                 String key = pullParser.getName();
  299.              if (key.equals("xml"))
  300.                   break;
  301.  
  302.              String value = pullParser.nextText();
  303.               map.put(key, value);
  304.  
  305.              break;
  306.  
  307.          case XmlPullParser.END_TAG:
  308.               break;
  309.  
  310.          }
  311.  
  312.             eventType = pullParser.next();
  313.  
  314.        }
  315.  
  316.         return map;
  317.   }
  318.  
  319. }

  




  wxprepay.shtm接口是预处理订单接口向微信服务器下订单。


  appPay.shtml接口是支付接口。


  appPay_notify.shtml接口是微信支付后异步通知结果接口。


  orderquery.shtml接口是订单查询接口




3.3、涉及到的工具类


    SessionUtil.java工具类




  1. package org.andy.util;
  2.  
  3. import javax.servlet.http.HttpServletRequest;
  4.  
  5.  
  6. public class SessionUtil {
  7.    public static void addAtt(HttpServletRequest request, String key, Object value){
  8.        request.getSession().setAttribute(key, value);
  9.    }
  10.    
  11.     public static void removeAtt(HttpServletRequest request, String key){
  12.      request.getSession().removeAttribute(key);
  13.   }
  14.    
  15.     public static String getAtt(HttpServletRequest request, String key){
  16.         return (String)request.getSession().getAttribute(key);
  17.     }
  18.    
  19.     public static Object getAttObj(HttpServletRequest request, String key){
  20.      return request.getSession().getAttribute(key);
  21.     }
  22.    
  23.     public static String optAtt(HttpServletRequest request, String key, String value){
  24.       String r = (String)request.getSession().getAttribute(key);
  25.       if (r == null){
  26.          r = value;
  27.       }
  28.        return r;
  29.  }
  30.     
  31. }



HttpKit 网络请求工具类




  1. /**
  2.  * https 请求 微信为https的请求
  3.  *
  4.  * @author andy
  5.  * @date 2015-10-9 下午2:40:19
  6.  */ 
  7. public class HttpKit {
  8.   private static final String DEFAULT_CHARSET = "UTF-8";
  9.     /**
  10.      * @return 返回类型:
  11.      * @throws IOException
  12.      * @throws UnsupportedEncodingException
  13.      * @throws NoSuchProviderException
  14.      * @throws NoSuchAlgorithmException
  15.      * @throws KeyManagementException
  16.      * @description 功能描述: get 请求
  17.      */
  18.     public static String get(String url, Map<String, String> params, Map<String, String> headers) throws IOException, ExecutionException, InterruptedException {
  19.         AsyncHttpClient http = new AsyncHttpClient();
  20.         AsyncHttpClient.BoundRequestBuilder builder = http.prepareGet(url);
  21.         builder.setBodyEncoding(DEFAULT_CHARSET);
  22.         if (params != null && !params.isEmpty()) {
  23.             Set<String> keys = params.keySet();
  24.             for (String key : keys) {
  25.                 builder.addQueryParameter(key, params.get(key));
  26.             }
  27.         }
  28.  
  29.         if (headers != null && !headers.isEmpty()) {
  30.             Set<String> keys = headers.keySet();
  31.             for (String key : keys) {
  32.                 builder.addHeader(key, params.get(key));
  33.             }
  34.         }
  35.         Future<Response> f = builder.execute();
  36.         String body = f.get().getResponseBody(DEFAULT_CHARSET);
  37.         http.close();
  38.         return body;
  39.     }
  40.  
  41.     /**
  42.      * @return 返回类型:
  43.      * @throws IOException
  44.      * @throws UnsupportedEncodingException
  45.      * @throws NoSuchProviderException
  46.      * @throws NoSuchAlgorithmException
  47.      * @throws KeyManagementException
  48.      * @description 功能描述: get 请求
  49.      */
  50.     public static String get(String url) throws KeyManagementException, NoSuchAlgorithmException, NoSuchProviderException, UnsupportedEncodingException, IOException, ExecutionException, InterruptedException {
  51.         return get(url, null);
  52.     }
  53.  
  54.     /**
  55.      * @return 返回类型:
  56.      * @throws IOException
  57.      * @throws NoSuchProviderException
  58.      * @throws NoSuchAlgorithmException
  59.      * @throws KeyManagementException
  60.      * @throws UnsupportedEncodingException
  61.      * @description 功能描述: get 请求
  62.      */
  63.     public static String get(String url, Map<String, String> params) throws KeyManagementException, NoSuchAlgorithmException, NoSuchProviderException, UnsupportedEncodingException, IOException, ExecutionException, InterruptedException {
  64.         return get(url, params, null);
  65.     }
  66.  
  67.     /**
  68.      * @return 返回类型:
  69.      * @throws IOException
  70.      * @throws NoSuchProviderException
  71.      * @throws NoSuchAlgorithmException
  72.      * @throws KeyManagementException
  73.      * @description 功能描述: POST 请求
  74.      */
  75.     public static String post(String url, Map<String, String> params) throws IOException, ExecutionException, InterruptedException {
  76.         AsyncHttpClient http = new AsyncHttpClient();
  77.         AsyncHttpClient.BoundRequestBuilder builder = http.preparePost(url);
  78.         builder.setBodyEncoding(DEFAULT_CHARSET);
  79.         if (params != null && !params.isEmpty()) {
  80.             Set<String> keys = params.keySet();
  81.             for (String key : keys) {
  82.                 builder.addParameter(key, params.get(key));
  83.             }
  84.         }
  85.         Future<Response> f = builder.execute();
  86.         String body = f.get().getResponseBody(DEFAULT_CHARSET);
  87.         http.close();
  88.         return body;
  89.     }
  90.  
  91.     public static String post(String url, String s) throws IOException, ExecutionException, InterruptedException {
  92.         AsyncHttpClient http = new AsyncHttpClient();
  93.         AsyncHttpClient.BoundRequestBuilder builder = http.preparePost(url);
  94.         builder.setBodyEncoding(DEFAULT_CHARSET);
  95.         builder.setBody(s);
  96.         Future<Response> f = builder.execute();
  97.         String body = f.get().getResponseBody(DEFAULT_CHARSET);
  98.         http.close();
  99.         return body;
  100.     }
  101.     
  102. }


支付工具类pay.java





  1. /**
  2.  * 支付相关方法
  3.  * @author andy
  4.  *
  5.  */
  6. public class Pay {
  7.  
  8.     // 发货通知接口
  9.     private static final String DELIVERNOTIFY_URL = "https://api.weixin.qq.com/pay/delivernotify?access_token=";
  10.  
  11.     /**
  12.      * 参与 paySign 签名的字段包括：appid、timestamp、noncestr、package 以及 appkey。
  13.      * 这里 signType 并不参与签名微信的Package参数
  14.      * @param params
  15.      * @return
  16.      * @throws UnsupportedEncodingException 
  17.      */
  18.     public static String getPackage(Map<String, String> params) throws UnsupportedEncodingException {
  19.         String partnerKey = ConfKit.get("partnerKey");
  20.         String partnerId = ConfKit.get("partnerId");
  21.         String notifyUrl = ConfKit.get("notify_url");
  22.         // 公共参数
  23.         params.put("bank_type", "WX");
  24.         params.put("attach", "yongle");
  25.         params.put("partner", partnerId);
  26.         params.put("notify_url", notifyUrl);
  27.         params.put("input_charset", "UTF-8");
  28.         return packageSign(params, partnerKey);
  29.     }
  30.  
  31.     /**
  32.      * 构造签名
  33.      * @param params
  34.      * @param encode
  35.      * @return
  36.      * @throws UnsupportedEncodingException 
  37.      */
  38.     public static String createSign(Map<String, String> params, boolean encode) throws UnsupportedEncodingException {
  39.         Set<String> keysSet = params.keySet();
  40.         Object[] keys = keysSet.toArray();
  41.         Arrays.sort(keys);
  42.         StringBuffer temp = new StringBuffer();
  43.         boolean first = true;
  44.         for (Object key : keys) {
  45.             if (key == null || StringUtil.isEmpty(params.get(key))) // 参数为空参与签名
  46.                continue;
  47.             if (first) {
  48.                 first = false;
  49.             } else {
  50.                 temp.append("&");
  51.             }
  52.             temp.append(key).append("=");
  53.             Object value = params.get(key);
  54.             String valueString = "";
  55.             if (null != value) {
  56.                 valueString = value.toString();
  57.             }
  58.             if (encode) {
  59.                 temp.append(URLEncoder.encode(valueString, "UTF-8"));
  60.             } else {
  61.                 temp.append(valueString);
  62.             }
  63.         }
  64.         return temp.toString();
  65.     }
  66.  
  67.     /**
  68.      * @param params
  69.      * @param paternerKey
  70.      * @return
  71.      * @throws UnsupportedEncodingException 
  72.      */
  73.     private static String packageSign(Map<String, String> params, String paternerKey) throws UnsupportedEncodingException {
  74.         String string1 = createSign(params, false);
  75.         String stringSignTemp = string1 + "&key=" + paternerKey;
  76.         String signValue = DigestUtils.md5Hex(stringSignTemp).toUpperCase();
  77.         String string2 = createSign(params, true);
  78.         return string2 + "&sign=" + signValue;
  79.     }
  80.  
  81.     /**
  82.      * 支付签名
  83.      * @param timestamp
  84.      * @param noncestr
  85.      * @param packages
  86.      * @return
  87.      * @throws UnsupportedEncodingException 
  88.      */
  89.     public static String paySign(String timestamp, String noncestr,String packages) throws UnsupportedEncodingException {
  90.         Map<String, String> paras = new HashMap<String, String>();
  91.         paras.put("appid", ConfKit.get("AppId"));
  92.         paras.put("timestamp", timestamp);
  93.         paras.put("noncestr", noncestr);
  94.         paras.put("package", packages);
  95.         paras.put("appkey", ConfKit.get("paySignKey"));
  96.         // appid、timestamp、noncestr、package 以及 appkey。
  97.         String string1 = createSign(paras, false);
  98.         String paySign = DigestUtils.shaHex(string1);
  99.         return paySign;
  100.     }
  101.     
  102.     /**
  103.      * 支付回调校验签名
  104.      * @param timestamp
  105.      * @param noncestr
  106.      * @param openid
  107.      * @param issubscribe
  108.      * @param appsignature
  109.      * @return
  110.      * @throws UnsupportedEncodingException 
  111.      */
  112.     public static boolean verifySign(long timestamp,
  113.             String noncestr, String openid, int issubscribe, String appsignature) throws UnsupportedEncodingException {
  114.         Map<String, String> paras = new HashMap<String, String>();
  115.         paras.put("appid", ConfKit.get("AppId"));
  116.         paras.put("appkey", ConfKit.get("paySignKey"));
  117.         paras.put("timestamp", String.valueOf(timestamp));
  118.         paras.put("noncestr", noncestr);
  119.         paras.put("openid", openid);
  120.         paras.put("issubscribe", String.valueOf(issubscribe));
  121.         // appid、appkey、productid、timestamp、noncestr、openid、issubscribe
  122.         String string1 = createSign(paras, false);
  123.         String paySign = DigestUtils.shaHex(string1);
  124.         return paySign.equalsIgnoreCase(appsignature);
  125.     }
  126.     
  127.     /**
  128.      * 发货通知签名
  129.      * @param paras
  130.      * @return
  131.      * @throws UnsupportedEncodingException
  132.      * 
  133.      * @参数 appid、appkey、openid、transid、out_trade_no、deliver_timestamp、deliver_status、deliver_msg；
  134.      */
  135.     private static String deliverSign(Map<String, String> paras) throws UnsupportedEncodingException {
  136.         paras.put("appkey", ConfKit.get("paySignKey"));
  137.         String string1 = createSign(paras, false);
  138.         String paySign = DigestUtils.shaHex(string1);
  139.         return paySign;
  140.     }
  141.     
  142.     
  143.     /**
  144.      * 发货通知
  145.      * @param access_token
  146.      * @param openid
  147.      * @param transid
  148.      * @param out_trade_no
  149.      * @return
  150.      * @throws IOException 
  151.      * @throws NoSuchProviderException 
  152.      * @throws NoSuchAlgorithmException 
  153.      * @throws KeyManagementException 
  154.      * @throws InterruptedException 
  155.      * @throws ExecutionException 
  156.      */
  157.  
  158.     public static boolean delivernotify(String access_token, String openid, String transid, String out_trade_no) throws IOException, ExecutionException, InterruptedException {
  159.         Map<String, String> paras = new HashMap<String, String>();
  160.         paras.put("appid", ConfKit.get("AppId"));
  161.         paras.put("openid", openid);
  162.         paras.put("transid", transid);
  163.         paras.put("out_trade_no", out_trade_no);
  164.         paras.put("deliver_timestamp", (System.currentTimeMillis() / 1000) + "");
  165.         paras.put("deliver_status", "1");
  166.         paras.put("deliver_msg", "ok");
  167.         // 签名
  168.         String app_signature = deliverSign(paras);
  169.         paras.put("app_signature", app_signature);
  170.         paras.put("sign_method", "sha1");
  171.         String json = HttpKit.post(DELIVERNOTIFY_URL.concat(access_token), JSONObject.toJSONString(paras));
  172.         if (StringUtils.isNotBlank(json)) {
  173.             JSONObject object = JSONObject.parseObject(json);
  174.             if (object.containsKey("errcode")) {
  175.                 int errcode = object.getIntValue("errcode");
  176.                 return errcode == 0;
  177.             }
  178.         }
  179.         return false;
  180.     }
  181. }


流转化Tools.java工具类




  1. public final class Tools {
  2.  
  3.     public static final String inputStream2String(InputStream in) throws UnsupportedEncodingException, IOException{
  4.         if(in == null)
  5.             return "";
  6.         
  7.         StringBuffer out = new StringBuffer();
  8.         byte[] b = new byte[4096];
  9.         for (int n; (n = in.read(b)) != -1;) {
  10.             out.append(new String(b, 0, n, "UTF-8"));
  11.         }
  12.         return out.toString();
  13.     }
  14.     
  15.     public static final boolean checkSignature(String token,String signature,String timestamp,String nonce){
  16.         List<String> params = new ArrayList<String>();
  17.         params.add(token);
  18.         params.add(timestamp);
  19.         params.add(nonce);
  20.         Collections.sort(params,new Comparator<String>() {
  21.             @Override
  22.             public int compare(String o1, String o2) {
  23.                 return o1.compareTo(o2);
  24.             }
  25.         });
  26.         String temp = params.get(0)+params.get(1)+params.get(2);
  27.         return SHA1.encode(temp).equals(signature);
  28.     }
  29. }


相应前端数据工具WebUtil.java工具类





  1. public class WebUtil {
  2.  
  3.     public static Object getSessionAttribute(HttpServletRequest req, String key) {
  4.         Object ret = null;
  5.  
  6.         try {
  7.             ret = req.getSession(false).getAttribute(key);
  8.         } catch (Exception e) {
  9.         }
  10.         return ret;
  11.     }
  12.  
  13.     public static void response(HttpServletResponse response, String result) {
  14.        try {
  15.          response.setContentType("application/json;charset=utf-8");
  16.          response.getWriter().write(result);
  17.      } catch (IOException e) {
  18.          e.printStackTrace();
  19.         }
  20.        
  21.     }
  22.     
  23.     public static void response(HttpServletResponse response, ResponseMessage result) {
  24.         try {
  25.             response.setContentType("application/json;charset=utf-8");
  26.             response.getWriter().write(JsonUtil.objectToJsonNode(result).toString()); 
  27.         } catch (Exception e) {
  28.             e.printStackTrace();
  29.         } 
  30.     }
  31.  
  32.     public static String packJsonp(String callback, String json) {
  33.         if (json == null) {
  34.             json = "";
  35.         }
  36.         if (callback == null || callback.isEmpty()) {
  37.             return json;
  38.         }
  39.  
  40.         return callback + "&&" + callback + ‘(‘ + json + ‘)‘;
  41.     }
  42.     
  43.     public static String packJsonp(String callback, ResponseMessage response) {
  44.         String json = null;
  45.         if (response == null) {
  46.             json = "";
  47.         } else {
  48.             json = JsonUtil.objectToJsonNode(response).toString();
  49.         }
  50.         if (callback == null || callback.isEmpty()) {
  51.             return json;
  52.         }
  53.  
  54.         return callback + "&&" + callback + ‘(‘ + json + ‘)‘;
  55.     }
  56. }


Json转换工具JsonUtil.java





  1. public class JsonUtil {
  2.  
  3.    public static ObjectNode warpJsonNodeResponse(JsonNode obj){
  4.         ObjectNode objectNode=createObjectNode();
  5.         objectNode.put("code", 1);
  6.         objectNode.put("response", obj);
  7.         return objectNode;
  8.     }
  9.    
  10.     public static JsonNode objectToJsonNode(Object obj){
  11.         try {
  12.          ObjectMapper objectMapper = new ObjectMapper();
  13.            String objJson=objectMapper.writeValueAsString(obj);
  14.             JsonNode jsonNode = objectMapper.readTree(objJson);
  15.          return jsonNode;
  16.       } catch (JsonProcessingException e) {
  17.          e.printStackTrace();
  18.         } catch (IOException e) {
  19.          // TODO Auto-generated catch block
  20.             e.printStackTrace();
  21.         }
  22.        return null;
  23.     }
  24.    
  25. }
  26.  
  27.  







四、微信H5调起支付


 这个url需要后台实现，其实现功能如下：


         1、接受微信服务器端发送的支付结果。


         2、向微信服务器发送支付结果


         具体 参考微信aip(http://pay.weixin.qq.com/wiki/doc/api/index.php?chapter=9_7)


       


      具体代码如下：


4.1、授权向后台发起生成统一下订单页面


wxrepay.jsp




  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
  3. <%
  4.     String path = request.getContextPath();
  5.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  6.     long t = System.currentTimeMillis();
  7. %>
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  9. <html>
  10. <head>
  11. <meta charset="utf-8" />
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  13. <meta name="apple-mobile-web-app-capable" content="yes" />
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  15. <meta name="format-detection" content="telephone=no" />
  16. <title>微信公众号支付</title>
  17. <link href="../css/css.css?t=<%=t%>" rel="stylesheet" type="text/css">
  18. </head>
  19.  
  20. <body>
  21.    <div class="index_box">
  22.         <div class="apply_name">商品</div>
  23.      
  24.           
  25.       <div class="branch_con">
  26.            <ul>
  27.               <li><span class="name">beacon 1分钱 1只</span></li>
  28.                <li><span class="name">测试支付信息</span></li>
  29.             </ul>
  30.          <p class="cz_btn"><a href="javascript:reppay();" class="btn_1">确定购买</a></p>
  31.       </div>
  32.     </div>
  33.  
  34.    <script type="text/javascript" src="../js/common.js?t=<%=t%>"></script>
  35.  <script type="text/javascript" >
  36.  
  37.          var code = urlparameter("code");
  38.        
  39.         function reppay(){
  40.           
  41.             ajaxUtil({}, mainpath+"/pay/wxprepay.shtml?code=" + code, repay);
  42.       
  43.         }
  44.        
  45.          function repay(response){
  46.            var info = response;
  47.             var url = "wxpay?appId=" + info.appId + "&timeStamp=" +info.timeStamp + "&nonceStr=" + info.nonceStr +
  48.                      "&pg=" +info.pg + "&signType=" +info.signType + "&paySign=" +info.paySign;
  49.              
  50.             window.location.href= url + "&showwxpaytitle=1"; 
  51.           }
  52.  
  53.     
  54.     
  55.     </script>
  56. </body>
  57. </html>



首先是请求服务端wxprepay.shml接口，后台向微信支付平台获取支付订单信息，返回前台，wxpay.jsp页面




4.2、确认支付页面


  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
  3. <%
  4.     String path = request.getContextPath();
  5.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  6.     long t = System.currentTimeMillis();
  7. %>
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  9. <html>
  10. <head>
  11. <meta charset="utf-8" />
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  13. <meta name="apple-mobile-web-app-capable" content="yes" />
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  15. <meta name="format-detection" content="telephone=no" />
  16. <title>微信公众号支付</title>
  17. <link href="../css/css.css?t=<%=t%>" rel="stylesheet" type="text/css">
  18. </head>
  19.  
  20. <body>
  21.    <div class="index_box">
  22.         <div class="apply_name">微信js支付测试</div>
  23.        
  24.         
  25.         <div class="branch_con">
  26.            <ul>
  27.               <li><span class="name">测试支付信息</span></li>
  28.             </ul>
  29.          <p class="cz_btn"><a href="javascript:pay();" class="btn_1">立即支付</a></p>
  30.      </div>
  31.     </div>
  32.  
  33.    <script type="text/javascript" src="../js/common.js?t=<%=t%>"></script>
  34.  <script type="text/javascript">
  35.    
  36.    var appId = urlparameter("appId");
  37.  var timeStamp = urlparameter("timeStamp");
  38.  var nonceStr = urlparameter("nonceStr");
  39.    var pg = urlparameter("pg");
  40.    var signType = urlparameter("signType");
  41.    var paySign = urlparameter("paySign");
  42.  
  43.     
  44.       function onBridgeReady(){
  45.       
  46.           WeixinJSBridge.invoke(
  47.               ‘getBrandWCPayRequest‘, {
  48.                   "appId" : appId,     //公众号名称，由商户传入     
  49.                   "timeStamp": timeStamp,         //时间戳，自1970年以来的秒数     
  50.                    "nonceStr" : nonceStr, //随机串     
  51.                 "package" : "prepay_id=" + pg,     
  52.                    "signType" : signType,         //微信签名方式:     
  53.                 "paySign" : paySign    //微信签名 
  54.                },
  55.               
  56.             function(res){     
  57.                  if(res.err_msg == "get_brand_wcpay_request:ok" ) {
  58.                        
  59.                     alert("支付成功");
  60.                  }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
  61.               }
  62.            ); 
  63.       }
  64.      
  65.     
  66.       function pay(){
  67.          
  68.             if (typeof WeixinJSBridge == "undefined"){
  69.               if( document.addEventListener ){
  70.                   document.addEventListener(‘WeixinJSBridgeReady‘, onBridgeReady, false);
  71.               }else if (document.attachEvent){
  72.                 document.attachEvent(‘WeixinJSBridgeReady‘, onBridgeReady); 
  73.                    document.attachEvent(‘onWeixinJSBridgeReady‘, onBridgeReady);
  74.               }
  75.             }else{
  76.                onBridgeReady();
  77.          } 
  78.           
  79.         }
  80.    </script>
  81. </body>
  82. </html>




4.2、前台涉及到的工具类


javascript工具类common.js，样式css.css就不贴了没意义。




  1. var path="wxpay";
  2. var mainpath = "/wxpay";
  3. var appid = "wx16691fcb0523c1a4";
  4. var urlpre = "http://www.xxx.com/wxpay/page";
  5. var urlhost = "http://www.xxx.com/";
  6.  
  7. $(document).ready(function(){
  8.     $(".refresher").click(function(){
  9.      refresh();
  10.   });
  11.  $("#goback").click(function(){
  12.        goback();
  13.    });
  14. });
  15. function popupMsg(msg){
  16.  alert(msg);
  17. }
  18. function printUtilViaGet(panel, requestdata, ajaxurl, printfunction){
  19.  $.ajax({
  20.         type: ‘GET‘,
  21.         url: ajaxurl,
  22.         data: requestdata,
  23.        cache:false,
  24.        dataType:"json",
  25.         async: false,
  26.         success: function(response) {
  27.             if (response.code){
  28.                if (panel != null && panel.length > 0){
  29.                  $(panel).html("");
  30.                  if (printfunction != null)
  31.                       $(panel).html(printfunction(response.response));
  32.                 }
  33.                return true;
  34.             } else {
  35.               //alert(response.reason);
  36.          }
  37.         },
  38.         error: function(x, e) {
  39.          //alert("error", x);
  40.         },
  41.         complete: function(x) {
  42.             //alert("call complete");
  43.         }
  44.     });
  45.  return false;
  46. }
  47.  
  48. function ajaxUtilViaGet(requestdata, ajaxurl, succFunction, failFunction){
  49.  $.ajax({
  50.         url: ajaxurl,
  51.         type: "GET",
  52.         dataType: "json",
  53.         cache:false,
  54.         data: requestdata,
  55.         async: false,
  56.         success: function(response) {
  57.          if (response.code){
  58.                if (succFunction != null)
  59.                    succFunction(response.response);
  60.             } else {
  61.               if (failFunction != null)
  62.                    failFunction(response.response);
  63.             }
  64.         },
  65.         error: function(x, e) {
  66.          //alert("error", x);
  67.         },
  68.         complete: function(x) {
  69.         }
  70.    });
  71.  return false;
  72. }
  73. function printUtil(panel, requestdata, ajaxurl, printfunction, ajaxasync) {
  74.  if (isEmpty(ajaxasync)) {
  75.      ajaxasync = false;
  76.     }
  77.    $.ajax({
  78.         type : ‘POST‘,
  79.       url : ajaxurl,
  80.        data : requestdata,
  81.       cache : false,
  82.      dataType : "json",
  83.       async : ajaxasync,
  84.        success : function(response) {
  85.          if (response.code) {
  86.               if (panel != null && panel.length > 0) {
  87.                     $(panel).html("");
  88.                  if (printfunction != null)
  89.                       $(panel).html(printfunction(response.response));
  90.                 }
  91.                return true;
  92.             } else {
  93.               // alert(response.reason);
  94.             }
  95.        },
  96.       error : function(x, e) {
  97.            // alert("error", x);
  98.      },
  99.       complete : function(x) {
  100.           // alert("call complete");
  101.        }
  102.   });
  103.     return false;
  104. }
  105. function appendUtil(panel, requestdata, ajaxurl, printfunction, ajaxasync) {
  106.  if (isEmpty(ajaxasync)) {
  107.         ajaxasync = false;
  108.    }
  109.   $.ajax({
  110.        type : ‘POST‘,
  111.      url : ajaxurl,
  112.       data : requestdata,
  113.      cache : false,
  114.         dataType : "json",
  115.      async : ajaxasync,
  116.       success : function(response) {
  117.             if (response.code) {
  118.              if (panel != null && panel.length > 0) {
  119.                    if (printfunction != null)
  120.                      $(panel).append(printfunction(response.response));
  121.              }
  122.               return true;
  123.            } else {
  124.              // alert(response.reason);
  125.            }
  126.       },
  127.      error : function(x, e) {
  128.           // alert("error", x);
  129.         },
  130.      complete : function(x) {
  131.           // alert("call complete");
  132.        }
  133.   });
  134.     return false;
  135. }
  136.  
  137. function ajaxUtilAsync(requestdata, ajaxurl, succFunction, failFunction) {
  138.  $.ajax({
  139.        url : ajaxurl,
  140.       type : "POST",
  141.      dataType : "json",
  142.      cache : false,
  143.         data : requestdata,
  144.      async : true,
  145.      success : function(response) {
  146.             if (typeof response.code == "number") {
  147.                if (response.code > 0) {
  148.                  if (succFunction != null)
  149.                       succFunction(response.response);
  150.                } else {
  151.                  if (failFunction != null)
  152.                       failFunction(response.response);
  153.                }
  154.           } else {
  155.              if (response.result) {
  156.                    if (succFunction != null)
  157.                       succFunction(response.response);
  158.                } else {
  159.                  if (failFunction != null)
  160.                       failFunction(response.response);
  161.                }
  162.           }
  163.       },
  164.      error : function(x, e) {
  165.           // alert("error", x);
  166.         },
  167.      complete : function(x) {
  168.       }
  169.   });
  170.     return false;
  171. }
  172.  
  173. function ajaxUtil(requestdata, ajaxurl, succFunction, failFunction){
  174.    $.ajax({
  175.         url: ajaxurl,
  176.         type: "POST",
  177.         dataType: "json",
  178.         cache:false,
  179.         data: requestdata,
  180.         async: false,
  181.         success: function(response) {
  182.             if (typeof response.code == "number"){
  183.                 if (response.code > 0){
  184.                   if (succFunction != null)
  185.                       succFunction(response.response);
  186.                } else {
  187.                  if (failFunction != null)
  188.                       failFunction(response.response);
  189.                }
  190.           } else {
  191.              if (response.result){
  192.                     if (succFunction != null)
  193.                       succFunction(response.response);
  194.                } else {
  195.                  if (failFunction != null)
  196.                       failFunction(response.response);
  197.                }
  198.           }
  199.         },
  200.         error: function(x, e) {
  201.           //alert("error", x);
  202.         },
  203.         complete: function(x) {
  204.         }
  205.    });
  206.     return false;
  207. }
  208. function loadSelection(panel, requestdata, ajaxurl, itemName){
  209.    ajaxUtil(requestdata, ajaxurl, function(response){
  210.        var list = response.list;
  211.         for (var i = 0;i<list.length;i++){
  212.          $(panel).append("<option value=‘"+list[i][itemName]+"‘>"+list[i][itemName]+"</option>");
  213.         }
  214.   }, null);
  215. }
  216. function ajaxSubmitRefresh(formId) {
  217.     var hideForm = $(formId);
  218.     var options = {
  219.         dataType : "json",
  220.         beforeSubmit : function() {
  221.         },
  222.         success : function(result) {
  223.             if (result.result){
  224.               showMsg("提交成功");
  225.           } else {
  226.              alert("提交失败！");
  227.            }
  228.         },
  229.         error : function(result) {
  230.            alert("提交失败！");
  231.         }
  232.     };
  233.     hideForm.ajaxSubmit(options);
  234. }
  235. function ajaxSubmitWithJump(formId, nextPage) {
  236.     var hideForm = $(formId);
  237.     var options = {
  238.         dataType : "json",
  239.         beforeSubmit : function() {
  240.         },
  241.         success : function(result) {
  242.          if (result.result){
  243.               alert("提交成功");
  244.                 window.location.href = nextPage;
  245.             } else {
  246.              alert("提交失败！");
  247.            }
  248.         },
  249.         error : function(result) {
  250.            alert("提交失败！");
  251.         }
  252.     };
  253.     hideForm.ajaxSubmit(options);
  254. }
  255. function refresh(){
  256.     window.location.href = window.location.href;
  257. }
  258. function goback(){
  259.   history.go(-1);
  260. }
  261. function urlparameter(paras){
  262.  var url = location.href;
  263.  var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");
  264.  var paraObj = {};
  265.     for (var i=0; j=paraString[i]; i++){
  266.       paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);
  267.  }
  268.   var returnValue = paraObj[paras.toLowerCase()];
  269.   if(typeof(returnValue)=="undefined"){
  270.      return "";
  271.   }else{
  272.        return returnValue;
  273.   }
  274. }
  275. String.prototype.endWith=function(str){
  276.   if(str==null||str==""||this.length==0||str.length>this.length)
  277.      return false;
  278.   if(this.substring(this.length-str.length)==str)
  279.      return true;
  280.   else
  281.      return false;
  282.   return true;
  283.  };
  284.  
  285.  String.prototype.startWith=function(str){
  286.   if(str==null||str==""||this.length==0||str.length>this.length)
  287.    return false;
  288.   if(this.substr(0,str.length)==str)
  289.      return true;
  290.   else
  291.      return false;
  292.   return true;
  293.  };
  294.  
  295.  
  296. function getFileUrl(sourceId) {
  297.    var url = "";
  298.    if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
  299.    url = document.getElementById(sourceId).value;
  300.   } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
  301.     url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
  302.   } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
  303.   url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
  304.   }
  305.   return url;
  306. }
  307.  
  308. function preImg(sourceId, targetId) {
  309.   var url = getFileUrl(sourceId);
  310.   var imgPre = document.getElementById(targetId);
  311.    imgPre.src = url;
  312. }
  313.  
  314. function initWX(){
  315.  $.ajax({
  316.        url:mainpath+‘/wechatjs.do‘,
  317.        type:‘POST‘,
  318.        dataType:‘json‘,
  319.        async: false,
  320.      data: {url:location.href.split(‘#‘)[0]},
  321.        success:function(result){
  322.          console.log(result);
  323.             var data=result[‘response‘][‘map‘];
  324.             if(result[‘code‘]==1){
  325.              wx.config({
  326.                     debug: false,
  327.                  appId:data[‘appId‘], 
  328.                   timestamp:data[‘timestamp‘], 
  329.                   nonceStr:data[‘nonceStr‘], 
  330.                     signature:data[‘signature‘],
  331.                    jsApiList: [‘onMenuShareTimeline‘,‘onMenuShareAppMessage‘,‘getLocation‘, ‘onMenuShareQQ‘, ‘onMenuShareWeibo‘]
  332.               });
  333.             }else{
  334.                alert("fail to get code");
  335.                 window.alert(‘fail‘);
  336.           };
  337.      }
  338.   });
  339. }
  340. var EARTH_RADIUS = 6378137.0;    //单位M
  341. var PI = Math.PI;
  342.  
  343. function getRad(d){
  344.     return d*PI/180.0;
  345. }
  346. function getGreatCircleDistance(lat1,lng1,lat2,lng2){
  347.     var radLat1 = getRad(lat1);
  348.     var radLat2 = getRad(lat2);
  349.     
  350.     var a = radLat1 - radLat2;
  351.     var b = getRad(lng1) - getRad(lng2);
  352.     
  353.     var s = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
  354.     s = s*EARTH_RADIUS;
  355.     s = Math.round(s*10000)/10000.0;
  356.     s = Math.round(s);
  357.     return s;
  358. }
  359. //对Date的扩展，将 Date 转化为指定格式的String   
  360. //月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
  361. //年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
  362. //例子：   
  363. //(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
  364. //(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18   
  365. Date.prototype.format = function(fmt)   
  366. { //author: meizz   
  367. var o = {   
  368.   "M+" : this.getMonth()+1,                 //月份   
  369.   "d+" : this.getDate(),                    //日   
  370.   "h+" : this.getHours(),                   //小时   
  371.   "m+" : this.getMinutes(),                 //分   
  372.   "s+" : this.getSeconds(),                 //秒   
  373.   "q+" : Math.floor((this.getMonth()+3)/3), //季度   
  374.   "S"  : this.getMilliseconds()             //毫秒   
  375. };   
  376. if(/(y+)/.test(fmt))   
  377.   fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
  378. for(var k in o)   
  379.   if(new RegExp("("+ k +")").test(fmt))   
  380. fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
  381. return fmt;   
  382. };  
  383.  
  384. //判断为空
  385. function isEmpty(src){
  386.    if(("undefined" == typeof src)  || (src == null) || ($.trim(src) == "") ){
  387.      return true;
  388.    }
  389.   return false;
  390. }
  391.  
  392. //判断不为空
  393. function notEmpty(src){
  394.   return !isEmpty(src);
  395. }
  396.  
  397. //微信页面授权 snsapi_base方式
  398. function wecharauto2burl(url) {
  399.  return "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid
  400.  + "&redirect_uri=" + encodeURIComponent(url)
  401.    + "&response_type=code&scope=snsapi_base&state=xybank#wechat_redirect";
  402. }
  403.  
  404. //页面授权针对snsapi_base方式授权的url
  405. function wecharauto2baseurl(url) {
  406.     return wecharauto2burl(urlpre+url);
  407. }
  408.  
  409. //页面授权针对snsapi_userinfo方式授权的url
  410. function wecharauto2userinfourl(url) {
  411.    return "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid
  412.  + "&redirect_uri=" + encodeURIComponent(urlpre+url)
  413.     + "&response_type=code&scope=snsapi_userinfo&state=xybank#wechat_redirect";
  414. }
  415.  
  416.  
  417. //微信分享  此方法需放在wx.ready中
  418. function shareWeChat(title, link, imgUrl, desc){
  419.     wx.onMenuShareTimeline({
  420.        title: title, // 分享标题
  421.      link: link, // 分享链接
  422.       imgUrl: imgUrl, // 分享图标
  423.       success: function () { 
  424.           // 用户确认分享后执行的回调函数
  425.         },
  426.      cancel: function () { 
  427.             // 用户取消分享后执行的回调函数
  428.         }
  429.   });
  430.  
  431.   //分享给朋友
  432.   wx.onMenuShareAppMessage({
  433.      title: title, // 分享标题
  434.      desc: desc, // 分享描述
  435.       link: link, // 分享链接
  436.       imgUrl: imgUrl, // 分享图标
  437.       type: ‘link‘, // 分享类型,music、video或link，不填默认为link
  438.         dataUrl: ‘‘, // 如果type是music或video，则要提供数据链接，默认为空
  439.         success: function () { 
  440.           // 用户确认分享后执行的回调函数
  441.         },
  442.      cancel: function () { 
  443.             // 用户取消分享后执行的回调函数
  444.         }
  445.   });
  446.  
  447.   //分享到QQ
  448.   wx.onMenuShareQQ({
  449.      title: title, // 分享标题
  450.      desc: desc, // 分享描述
  451.       link: link, // 分享链接
  452.       imgUrl: imgUrl, // 分享图标
  453.       success: function () { 
  454.          // 用户确认分享后执行的回调函数
  455.      },
  456.      cancel: function () { 
  457.            // 用户取消分享后执行的回调函数
  458.      }
  459.   });
  460.  
  461.   //分享到腾讯微博
  462.     wx.onMenuShareWeibo({
  463.       title: title, // 分享标题
  464.      desc: desc, // 分享描述
  465.       link: link, // 分享链接
  466.       imgUrl: imgUrl, // 分享图标
  467.       success: function () { 
  468.          // 用户确认分享后执行的回调函数
  469.      },
  470.      cancel: function () { 
  471.             // 用户取消分享后执行的回调函数
  472.             
  473.        }
  474.   });
  475. }




五、支付结果


 公众号调起效果如下：


技术分享图片





支付成功后，微信服务器得到后台的Notify通知后，会发微信说明支付信息，支付凭证如下：


技术分享图片





后续会全部更新微信app支付，微信支付退款，微信企业向个人付款，支付宝相关支付。而且会上传全部代码到csdn资源下载处。







            

























以上是关于微信支付-公众号支付H5调用支付详解的主要内容，如果未能解决你的问题，请参考以下文章
 

 asp.net core 微信支付工具类（H5支付，扫码支付，公众号支付，app支付）之2-H5支付


 Android通过外部浏览器调用微信H5支付，Android+PHP详解


 微信公众号支付踩坑记


 H5在微信公众号里调用微信支付总结（前端）


 企业号微信支付 公众号支付 H5调起支付API示例代码 JSSDK C# .NET


 H5在微信小程序及公众号中的支付