微信公眾號支付（三）：頁面調用微信支付JS并完成支付

2019-11-14 15:38:06

字體：大中小

來源：轉載

供稿：網友

一、調用微信的JS文件

1.首先要綁定【JS接口安全域名】，“公眾號設置”的“功能設置”中

2.引入JS文件

　備注：支持使用 AMD/CMD 標準模塊加載方法加載

1 <script type="text/javascript" src="http://res.wx.QQ.com/open/js/jweixin-1.0.0.js"></script>

3.通過config接口注入權限驗證配置

1 wx.config({2     debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。3     appId: '', // 必填，公眾號的唯一標識4     timestamp: , // 必填，生成簽名的時間戳5     nonceStr: '', // 必填，生成簽名的隨機串6     signature: '',// 必填，簽名，見附錄17     jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，這里只寫支付的8 });

4.通過ready接口處理成功驗證

1 wx.ready(function(){2     wx.hideOptionMenu();//隱藏右邊的一些菜單3 });

二、wx.config中的簽名

1.首先要獲取到 access token：公眾號的全局唯一票據。然后根據access token獲取到jsapi_ticket：公眾號用于調用微信JS接口的臨時票據。再用jsapi_ticket獲取到簽名。

2.獲取access token：文檔：url:http://mp.weixin.qq.com/wiki/15/54ce45d8d30b6bf6758f68d2e95bc627.html

 1 　　public static Token getToken(String appid, String appsecret) { 2         Token token = null; 3         String requestUrl = Constants.token_url.replace("APPID", appid).replace("APPSECRET", appsecret); 4         // 發起GET請求獲取憑證 5         JSONObject jsonObject = CommonUtil.httpsRequestToJsonObject(requestUrl, "GET", null); 6  7         if (null != jsonObject) { 8             try { 9                 token = new Token();10                 token.setAccessToken(jsonObject.getString("access_token"));11                 token.setExpiresIn(jsonObject.getInt("expires_in"));12             } catch (JSONException e) {13                 token = null;14                 // 獲取token失敗15                 log.error("獲取token失敗 "+jsonObject.getInt("errcode")+"，"+jsonObject.getString("errmsg"));16             }17         }18         return token;19     }

有些方法在前兩篇中。

3.獲取jsapi_ticket

 1 　　public static Ticket getTicket() { 2         //Constants.ticket_url = https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 3         String requestUrl = Constants.ticket_url.replace("ACCESS_TOKEN", TokenThread.accessToken.getAccessToken()); 4         // 發起GET請求獲取憑證 5         JSONObject jsonObject = CommonUtil.httpsRequestToJsonObject(requestUrl, "GET", null); 6         Ticket ticket = null; 7         String jsapi_ticket = ""; 8         int expires_in = 0; 9         if (null != jsonObject) {10             try {11                 jsapi_ticket = jsonObject.getString("ticket");12                 expires_in = jsonObject.getInt("expires_in");13                 ticket = new Ticket();14                 ticket.setTicket(jsapi_ticket);15                 ticket.setExpiresIn(expires_in);16             } catch (JSONException e) {17                 // 獲取失敗18                 log.error("獲取jsapi_ticket失敗"+jsonObject.getInt("errcode")+"，"+jsonObject.getString("errmsg"));19             }20         }21         return ticket;22     }

注意：jsapi_ticket和access token為7200的有效時間。7200后要重新獲取，我是放在線程里面死循環的。

4.算簽名

 1 /** 2  * 簽名實體類 3  * @author rory.wu 4  * 5  */ 6 public class Signature implements Serializable { 7     PRivate static final long serialVersionUID = -7799030247222127708L; 8      9     private String url;10     private String jsapi_ticket;11     private String nonceStr;12     private String timestamp;13     private String signature;14        15    //下面是getset方法       16 }

 1    /** 2      * 算出簽名 3      * @param jsapi_ticket  4      * @param url 業務中調用微信js的地址 5      * @return 6      */ 7     public static Signature sign(String jsapi_ticket, String url) { 8         String nonce_str = CommonUtil.create_nonce_str(); 9         String timestamp = CommonUtil.create_timestamp();10         String string1;11         String signature = "";12 13         //注意這里參數名必須全部小寫，且必須有序14         string1 = "jsapi_ticket=" + jsapi_ticket +15                   "&noncestr=" + nonce_str +16                   "&timestamp=" + timestamp +17                   "&url=" + url;18         try19         {20             MessageDigest crypt = MessageDigest.getInstance("SHA-1");21             crypt.reset();22             crypt.update(string1.getBytes("UTF-8"));23             signature = CommonUtil.byteToStr(crypt.digest());24         }25         catch (NoSuchAlgorithmException e)26         {27             e.printStackTrace();28         }29         catch (UnsupportedEncodingException e)30         {31             e.printStackTrace();32         }33         34         Signature result = new Signature();35         result.setUrl(url);36         result.setJsapi_ticket(jsapi_ticket);37         result.setNonceStr(nonce_str);38         result.setTimestamp(timestamp);39         result.setSignature(signature);40 41         return result;42     }

注意：有些方法在前兩篇中

這樣就算出簽名了。

5.傳遞到前端頁面

把隨機字符串：nonce_str，timestamp時間戳，appId，簽名，包裝為prepay_id=prepay_id的預支付ID傳遞到前端。

1 wx.config({2     appId: '${appId}', // 必填，公眾號的唯一標識3     timestamp: ${timestamp}, // 必填，生成簽名的時間戳4     nonceStr: '${nonceStr}', // 必填，生成簽名的隨機串5     signature: '${signature}',// 必填，簽名，見附錄16     jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄27 });

6.現在就可以使用微信JS了。

三、調用微信支付

在前一篇中已經獲取到了預支付訂單的ID，prepay_id，

 1 /** 2  * 微信支付對象 3  * @author rory.wu 4  * 5  */ 6 public class WxPay implements Serializable { 7     private static final long serialVersionUID = 3843862351717555525L; 8     private String paySign; 9     private String prepay_id;10     private String nonce_str;11     private String timeStamp;12     13     //get，set方法14 }

 1    /** 2      * 獲取頁面上weixin支付JS所需的參數 3      * @param map 4      * @return 5      */ 6     private WxPay getWxPayInfo(String prepay_id) { 7         String nonce = CommonUtil.create_nonce_str().replace("-", ""); 8         String timeStamp = CommonUtil.create_timestamp(); 9         //再算簽名10         String newPrepay_id = "prepay_id="+prepay_id;11         String args = "appId="+Constants.appid12                       +"&nonceStr="+nonce13                       +"&package="+newPrepay_id14                       +"&signType=md5"15                       +"&timeStamp="+timeStamp16                       +"&key="+key;17         String paySign = SignUtil.getSign(args, "MD5");18         WxPay wxPay = new WxPay();19         wxPay.setNonce_str(nonce);20         wxPay.setPaySign(paySign);21         wxPay.setPrepay_id(newPrepay_id);22         wxPay.setTimeStamp(timeStamp);23         return wxPay;24     }25

注意：有些方法在前2篇中。

微信支付的最后一步：js調用

 1 wx.chooseWXPay({ 2     timestamp: json.timeStamp, 3     nonceStr: json.nonce_str,  4     package: json.prepay_id, 5     signType: 'MD5', 6     paySign: json.paySign,  7     success: function (res) { 8         alert("支付成功"); 9     }10 });