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

時間 2019-11-26

原文原文鏈接

1、調用微信的JS文件javascript

1.首先要綁定【JS接口安全域名】，「公衆號設置」的「功能設置」中html

2.引入JS文件前端

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

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

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

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

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

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

2、wx.config中的簽名安全

1.首先要獲取到access token：公衆號的全局惟一票據。而後根據access token獲取到jsapi_ticket：公衆號用於調用微信JS接口的臨時票據。再用jsapi_ticket獲取到簽名。微信

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

 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     }

有些方法在前兩篇中。ide

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         try
19         {
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}',// 必填，簽名，見附錄1
6     jsApiList: ['chooseWXPay'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
7 });

6.如今就能夠使用微信JS了。

3、調用微信支付

在前一篇中已經獲取到了預支付訂單的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.appid
12                       +"&nonceStr="+nonce
13                       +"&package="+newPrepay_id
14                       +"&signType=MD5"
15                       +"&timeStamp="+timeStamp
16                       +"&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 });