微信公众号支付（三）：页面调用微信支付JS并完成支付

一、调用微信的JS文件

1.首先要绑定【JS接口安全域名】，“公众号设置”的“功能设置”中

2.引入JS文件

　备注：支持使用 AMD/CMD 标准模块加载方法加载

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

3.通过config接口注入权限验证配置

 wx.config({

     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

     appId: '', // 必填，公众号的唯一标识

     timestamp: , // 必填，生成签名的时间戳

     nonceStr: '', // 必填，生成签名的随机串

     signature: '',// 必填，签名，见附录1

     jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，这里只写支付的

 });

4.通过ready接口处理成功验证

 wx.ready(function(){

     wx.hideOptionMenu();//隐藏右边的一些菜单

 });

二、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

 　　public static Token getToken(String appid, String appsecret) {

         Token token = null;

         String requestUrl = Constants.token_url.replace("APPID", appid).replace("APPSECRET", appsecret);

         // 发起GET请求获取凭证

         JSONObject jsonObject = CommonUtil.httpsRequestToJsonObject(requestUrl, "GET", null);

         if (null != jsonObject) {

             try {

                 token = new Token();

                 token.setAccessToken(jsonObject.getString("access_token"));

                 token.setExpiresIn(jsonObject.getInt("expires_in"));

             } catch (JSONException e) {

                 token = null;

                 // 获取token失败

                 log.error("获取token失败 "+jsonObject.getInt("errcode")+"，"+jsonObject.getString("errmsg"));

             }

         }

         return token;

     }

有些方法在前两篇中。

3.获取jsapi_ticket

 　　public static Ticket getTicket() {

         //Constants.ticket_url = https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

         String requestUrl = Constants.ticket_url.replace("ACCESS_TOKEN", TokenThread.accessToken.getAccessToken());

         // 发起GET请求获取凭证

         JSONObject jsonObject = CommonUtil.httpsRequestToJsonObject(requestUrl, "GET", null);

         Ticket ticket = null;

         String jsapi_ticket = "";

         int expires_in = 0;

         if (null != jsonObject) {

             try {

                 jsapi_ticket = jsonObject.getString("ticket");

                 expires_in = jsonObject.getInt("expires_in");

                 ticket = new Ticket();

                 ticket.setTicket(jsapi_ticket);

                 ticket.setExpiresIn(expires_in);

             } catch (JSONException e) {

                 // 获取失败

                 log.error("获取jsapi_ticket失败"+jsonObject.getInt("errcode")+"，"+jsonObject.getString("errmsg"));

             }

         }

         return ticket;

     }

注意：jsapi_ticket和access token为7200的有效时间。7200后要重新获取，我是放在线程里面死循环的。

4.算签名

 /**

  * 签名实体类

  * @author rory.wu

  *

  */

 public class Signature implements Serializable {

     private static final long serialVersionUID = -7799030247222127708L;

     private String url;

     private String jsapi_ticket;

     private String nonceStr;

     private String timestamp;

     private String signature;

    //下面是getset方法

 }

    /**

      * 算出签名

      * @param jsapi_ticket

      * @param url 业务中调用微信js的地址

      * @return

      */

     public static Signature sign(String jsapi_ticket, String url) {

         String nonce_str = CommonUtil.create_nonce_str();

         String timestamp = CommonUtil.create_timestamp();

         String string1;

         String signature = "";

         //注意这里参数名必须全部小写，且必须有序

         string1 = "jsapi_ticket=" + jsapi_ticket +

                   "&noncestr=" + nonce_str +

                   "&timestamp=" + timestamp +

                   "&url=" + url;

         try

         {

             MessageDigest crypt = MessageDigest.getInstance("SHA-1");

             crypt.reset();

             crypt.update(string1.getBytes("UTF-8"));

             signature = CommonUtil.byteToStr(crypt.digest());

         }

         catch (NoSuchAlgorithmException e)

         {

             e.printStackTrace();

         }

         catch (UnsupportedEncodingException e)

         {

             e.printStackTrace();

         }

         Signature result = new Signature();

         result.setUrl(url);

         result.setJsapi_ticket(jsapi_ticket);

         result.setNonceStr(nonce_str);

         result.setTimestamp(timestamp);

         result.setSignature(signature);

         return result;

     }

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

这样就算出签名了。

5.传递到前端页面

把随机字符串：nonce_str，timestamp时间戳，appId，签名，包装为prepay_id=prepay_id的预支付ID传递到前端。

 wx.config({

     appId: '${appId}', // 必填，公众号的唯一标识

     timestamp: ${timestamp}, // 必填，生成签名的时间戳

     nonceStr: '${nonceStr}', // 必填，生成签名的随机串

     signature: '${signature}',// 必填，签名，见附录1

     jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

 });

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

三、调用微信支付

在前一篇中已经获取到了预支付订单的ID，prepay_id，

 /**

  * 微信支付对象

  * @author rory.wu

  *

  */

 public class WxPay implements Serializable {

     private static final long serialVersionUID = 3843862351717555525L;

     private String paySign;

     private String prepay_id;

     private String nonce_str;

     private String timeStamp;

     //get，set方法

 }

    /**

      * 获取页面上weixin支付JS所需的参数

      * @param map

      * @return

      */

     private WxPay getWxPayInfo(String prepay_id) {

         String nonce = CommonUtil.create_nonce_str().replace("-", "");

         String timeStamp = CommonUtil.create_timestamp();

         //再算签名

         String newPrepay_id = "prepay_id="+prepay_id;

         String args = "appId="+Constants.appid

                       +"&nonceStr="+nonce

                       +"&package="+newPrepay_id

                       +"&signType=MD5"

                       +"&timeStamp="+timeStamp

                       +"&key="+key;

         String paySign = SignUtil.getSign(args, "MD5");

         WxPay wxPay = new WxPay();

         wxPay.setNonce_str(nonce);

         wxPay.setPaySign(paySign);

         wxPay.setPrepay_id(newPrepay_id);

         wxPay.setTimeStamp(timeStamp);

         return wxPay;

     }

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

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

 wx.chooseWXPay({

     timestamp: json.timeStamp,

     nonceStr: json.nonce_str,

     package: json.prepay_id,

     signType: 'MD5',

     paySign: json.paySign,

     success: function (res) {

         alert("支付成功");

     }

 });

结束，微信支付全部结束啦，有问题可以留言找我哦，只会java的，88

巴特西

微信公众号支付（三）：页面调用微信支付JS并完成支付

最新文章

热门文章