jsSdk 微信配置config,调起微信支付

本文介绍如何通过Java后端实现微信JS-SDK支付配置,并提供前端调用示例。涵盖获取票据jsapi_ticket、生成签名signature的过程,及前端如何调用微信支付API。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

话不多说,首先第一步,获取config需要的参数  
appid,noncestr ,timestamp ,url ,signature
1.编写controller

 /**
     * 微信配置获取config
     *
     * @param request
     * @return
     */
    @RequestMapping(value = "/config", method = RequestMethod.POST)
    public MpFFPhoneOrderResponse getWxConfig(HttpServletRequest request) {
        MpFFPhoneOrderResponse response = new MpFFPhoneOrderResponse();//这个只是定义返回的参数,自己根据需要
        String url = request.getRequestURL().toString() + "/";
        try {
            JsSdk sign = Sign.sign(url);
            response.setConfigInfo(JSONObject.toJSONString(sign));
        } catch (Exception e) {
            LOG.info(e.getMessage());
        }
        return success(response);
    }
 jsSdk
public class Sign {
    /**
     * jsSdk 获取微信config
     *
     * @param url
     * @return
     */
    public static JsSdk sign(String url) {
        String jsapi_ticket = JsapiTicketUtil.getJsapiTicket();
        JsSdk jsSdk = new JsSdk();
        jsSdk.setAppid(WXAuthUtil.getAPPID());
        jsSdk.setUrl(url);
        String nonce_str = create_nonce_str();
        jsSdk.setNoncestr(nonce_str);
        String timestamp = create_timestamp();
        jsSdk.setTimestamp(timestamp);
        String signature = "";
        //注意这里参数名必须全部小写,且必须有序
        String string1 = "jsapi_ticket=" + jsapi_ticket +
                "&noncestr=" + nonce_str +
                "×tamp=" + timestamp +
                "&url=" + url;
        try {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
            jsSdk.setSignature(signature);
        } catch (NoSuchAlgorithmException e) {
            jsSdk = null;
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            jsSdk = null;
            e.printStackTrace();
        }
        return jsSdk;
    }

    /**
     * 生成随机数
     *
     * @return
     */
    private static String create_nonce_str() {
        return UUID.randomUUID().toString().substring(0, 20);
    }

    /**
     * 当前日期字符串生成
     *
     * @return
     */
    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }

    /**
     *
     * @param hash
     * @return
     */
    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash) {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }
}
获取票据 jsapi_ticket
public class JsapiTicketUtil {
    public static final Logger LOG = LoggerFactory.getLogger(JsapiTicketUtil.class);

    public static String getJsapiTicket() {
        String requestUrl = "https://api.weixin.qq.com/cgi-bin/token?";
        String params = "grant_type=client_credential&appid=" + WXAuthUtil.APPID + "&secret=" + WXAuthUtil.APPSECRET + "";
        String result = httpGet(requestUrl + params);
        String access_token = JSONObject.parseObject(result).getString("access_token");
        requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?";
        params = "access_token=" + access_token + "&type=jsapi";
        result = httpGet(requestUrl + params);
        String jsapi_ticket = JSONObject.parseObject(result).getString("ticket");
        return jsapi_ticket;
    }

    /**
     * post请求
     * @param url
     * @return
     */
    public static String httpPost(String url) {
        //post请求返回结果
        DefaultHttpClient httpClient = new DefaultHttpClient();
        HttpPost method = new HttpPost(url);
        String str = "";
        try {
            HttpResponse result = httpClient.execute(method);
            url = URLDecoder.decode(url, "UTF-8");
            /**请求发送成功,并得到响应**/
            if (result.getStatusLine().getStatusCode() == 200) {
                try {
                    /**读取服务器返回过来的json字符串数据**/
                    str = EntityUtils.toString(result.getEntity());
                } catch (Exception e) {
                    LOG.error("post请求提交失败:" + url, e);
                }
            }
        } catch (IOException e) {
            LOG.error("post请求提交失败:" + url, e);
        }
        return str;
    }

    /**
     * get 请求、
     * @param url
     * @return
     */
    public static String httpGet(String url) {
        //get请求返回结果
        String strResult = null;
        try {
            DefaultHttpClient client = new DefaultHttpClient();
            //发送get请求
            HttpGet request = new HttpGet(url);
            HttpResponse response = client.execute(request);

            /**请求发送成功,并得到响应**/
            if (response.getStatusLine().getStatusCode() == org.apache.http.HttpStatus.SC_OK) {
                /**读取服务器返回过来的json字符串数据**/
                strResult = EntityUtils.toString(response.getEntity());
            } else {
                LOG.error("get请求提交失败:" + url);
            }
        } catch (IOException e) {
            LOG.error("get请求提交失败:" + url, e);
        }
        return strResult;
    }
}
config需要的javabean
public class JsSdk {

    private String appid;
    //随机数
    private String noncestr;
    //时间戳
    private String timestamp;
    //授权url
    private String url;
    //签名
    private String signature;

    public String getAppid() {
        return appid;
    }

    public void setAppid(String appid) {
        this.appid = appid;
    }

    public String getNoncestr() {
        return noncestr;
    }

    public void setNoncestr(String noncestr) {
        this.noncestr = noncestr;
    }

    public String getTimestamp() {
        return timestamp;
    }

    public void setTimestamp(String timestamp) {
        this.timestamp = timestamp;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getSignature() {
        return signature;
    }

    public void setSignature(String signature) {
        this.signature = signature;
    }

}

到这里后台基本上差不多可以结束了,结合上篇文章,支付所需要的参数,接下来就是前台操作:

1.引用js

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

 wxconfig: function () {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        traditional: true,
                        url: 'xxxx',//config后台路径
                        data: '',
                        success: function (data) {
                            if (data.code == 'ok') {
                                var configInfo = data.configInfo;
                                var configJson = JSON.parse(configInfo);
                                wx.config({
                                    debug: false,
                                    appId: configJson.appid,
                                    timestamp: configJson.timestamp,
                                    nonceStr: configJson.noncestr,
                                    signature: configJson.signature,
                                    jsApiList: ['scanQRCode', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'chooseWXPay']
                                });
                            } else {
                                console.log("验证失败");
                            }
                        }

                    })
                },

2.config成功之后直接调用微信支付

 wxPay: function (paydata) {
                    this.wxconfig();
                    wx.ready(function () {
                        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
                        var dataJson = JSON.parse(paydata);
                        //进行微信支付
                        wx.chooseWXPay({
                            timestamp: dataJson.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: dataJson.nonceStr, // 支付签名随机串,不长于 32 位
                            package: dataJson.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
                            signType: dataJson.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
                            paySign: dataJson.paySign, // 支付签名
                            success: function (res) {
                                // 支付成功后的回调函数
                                if (res.errMsg == "chooseWXPay:ok") {
                                    weui.alert('支付成功');
                                 
                                    // 支付成功
                                    // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。
                                } else {
                                    weui.alert('支付失败');
                                }
                            }
                        });
                    })
                },
到这里基本上就非常nice了,回调支付成功,如果中间有什么问题没有成功可以随时留言,谢谢。不喜勿喷。


评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值