JS微信公众号支付开发

于 2017-06-15 17:28:34 发布
阅读量379 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端JS 文章标签： 微信公众号支付-js web前端微信支付
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jason_07/article/details/73294515

微信支付基础方法配置

/**
 * @Desc：wxPay
 * @Usage:  1-发起支付：
 *             modules.wxPay({
                   total_fee: 1,                         //订单总金额(单位：分)
                   body: "唯医骨科线下支付测试",         //订单描述
                   callBack:function(data){
                       if(data.responseStatus){
                          //支付成功的回调
                       }else{
                          //支付失败的回调
                   }
               })
 *           2-查看回调结果：
 *             modules.checkOrder({
                   out_trade_no:localStorage.getItem("orderNumber")  //订单号
               });
 *           3-取消订单：
 *             modules.closeOrder({
                   out_trade_no:localStorage.getItem("orderNumber")  //订单号
               });
 *           4-申请退款：
 *             $('.ev-applyBack').on("click", function () {
                  modules.applyForRefund({
                     out_trade_no: localStorage.getItem("orderNumber"),  //订单号
                     refundSuccess:function() {
                         common.popup({text:"退款成功！"})
                     },
                     refundError:function() {
                         common.popup({text:"退款失败！"})
                     }
                  });
               });
 *           5-查看退款：
 *             modules.checkDrawBack({
                   out_trade_no:localStorage.getItem("orderNumber"),    //订单号
                   out_refund_no:localStorage.getItem("out_refund_no")  //退款号
               });
 * @Notify：支付模式为公众号支付
 * @Depend： http://res.wx.qq.com/open/js/jweixin-1.0.0.js
 *            https://res.wx.qq.com/open/js/jweixin-1.0.0.js
 *
 * Created by JuKun on 2017/4/5.
 */


/**
 *
 * @param: wxPay 基础方法
 */
//wx Ajax
modules.wxPayCommAjax = function (Obj) {
    common.loading.show();
    $.ajax({
        url: Obj.path,
        data: Obj.data,
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            common.loading.hide();
            Obj.callBack(data);
        },
        error: function (data) {
            common.loading.hide();
            console.log(data);
        }
    })
};

//create random
modules.mathRandom = function (Obj) {
    var code = "";
    var codeLength = Obj.numberValue,
        random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    for (var i = 0; i < codeLength; i++) {
        var index = Math.floor(Math.random() * 36);    //取得随机数的索引（0~35）
        code += random[index];
    }
    return code.toLowerCase();
};

//get token
modules.wxGetToken = function (Obj) {
    var _nonceStr = modules.mathRandom({numberValue: 32}),
        _data = {
            "roleId": 2,
            "nonceStr": _nonceStr,     //随机数
            "siteId": 1
        };
    modules.wxPayCommAjax({
        data: {paramJson: $.toJSON(_data)},
        path: '/mcall/base/pay/external/v1/getToken/',
        callBack: function (data) {
            console.log({data: data.responseData.token, nonceStr: _nonceStr});
            localStorage.setItem("validityTime", Math.round(new Date().getTime() / 1000));   //token
            localStorage.setItem("token", data.responseData.token);   //token
            localStorage.setItem("nonceStr", _nonceStr);              //随机数
            Obj.callBack({data: data, nonceStr: _nonceStr});
        }
    });
};

//token check
modules.checkToken = function () {
    var _validityTime = Math.round(new Date().getTime() / 1000),
        _validityLocal = localStorage.getItem("validityTime"),   
        _checkKey = '';
    if (_validityLocal != null) {
        if (_validityTime - _validityLocal < 7200) {
            _checkKey = true;
        } else {
            _checkKey = false;
        }
    } else {
        _checkKey = false;
    }
    return _checkKey;
};
openId校验
//openId check
modules.checkOpenId = function () {
    var _validityTime = Math.round(new Date().getTime() / 1000),
        _validityLocal = localStorage.getItem("openIdValidityTime"),
        _checkKey = '';
    if (_validityLocal != null) {
        if (_validityTime - _validityLocal < 7200) {
            _checkKey = true;
        } else {
            _checkKey = false;
        }
    } else {
        _checkKey = false;
    }
    return _checkKey;
};
获取openId
//get openID
modules.wxGetOpenId = function(){
    var _currentPageUrl = window.location.href,
        _encodeUrl = encodeURIComponent(_currentPageUrl);
    var _url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
        "appid=wxaa5288ad7f627608" +
        "&redirect_uri=" + _encodeUrl +
        "&response_type=code" +
        "&scope=snsapi_userinfo" +
        "&state=STATE" +
        "#wechat_redirect";
    //检测是否有code
    if (common.getpara().code) {
        console.log(common.getpara().code);
        //检测url是否有OpenID
        if (window.location.href.indexOf("openId")===-1){
            window.location.href = "http://m.tocure.cn/mcall/wx/tocure/interact/v1/view/" +
                "?ref="+localStorage.getItem("currentUrl") +
                "&response_type=code" +
                "&scope=snsapi_base" +
                "&state=pay" +
                "&code=" + common.getpara().code +
                "#wechat_redirect";
        }
    } else {
        //检测url是否有OpenID
        if (window.location.href.indexOf("openId")!==-1){
            var count=sessionStorage.getItem("count");
            if (!count){
                sessionStorage.setItem("count",1);
                if(localStorage.getItem("currentUrl") && localStorage.getItem("currentUrl").indexOf("?")!=-1) {
                    window.location.href=localStorage.getItem("currentUrl")+"&openId="+common.getpara().openId;
                } else{
                    window.location.href=localStorage.getItem("currentUrl")+"?openId="+common.getpara().openId;
                }
                localStorage.setItem("openIdValidityTime", Math.round(new Date().getTime() / 1000));   //openId 开始时间戳
                localStorage.setItem("openId",common.getpara().openId);
            }
        }else{
            localStorage.setItem("currentUrl",_currentPageUrl);  //存储页面首次打开URL
            window.location.href = _url;                         //当前连接指向指定链接
        }
    }
};

wxPay基础回调

1 查看回调结果
modules.checkOrder = function (Obj) {
    var _container = {
        op: {},
        init: function () {
            var _t = this;
            _t.op.out_trade_no = Obj.out_trade_no ? Obj.out_trade_no : '';        //订单号
            if (modules.checkToken()) {
                _t.checkOrderRequest({
                    _token: localStorage.getItem("token"),                    //token
                    _nonceStr: localStorage.getItem("nonceStr")               //随机数
                });
            } else {
                modules.wxGetToken({
                    callBack: function (data) {
                        if (data.data.responseStatus) {
                            console.log(data);
                            _t.checkOrderRequest({
                                _token: data.data.responseData.token ? data.data.responseData.token : '',  //token
                                _nonceStr: data.nonceStr ? data.nonceStr : ''                              //随机数
                            });
                        }
                    }
                });
            }
        },
        checkOrderRequest: function (rv) {
            var _t = this,
                _data = {
                    "out_trade_no": _t.op.out_trade_no,   //_out_trade_no
                    "scene": 1,
                    "roleId": 2,
                    "nonceStr": rv._nonceStr,
                    "siteId": 1,
                    "token": rv._token
                };
            modules.wxPayCommAjax({
                data: {paramJson: $.toJSON(_data)},
                path: "/mcall/base/pay/external/v1/getResultBack/",
                callBack: function (data) {
                    console.log(data);
                }
            });
        }
    };
    _container.init(Obj);
};
2 取消订单
modules.closeOrder = function (Obj) {
    var _container = {
        op: {},
        init: function () {
            var _t = this;
            _t.op.out_trade_no = Obj.out_trade_no ? Obj.out_trade_no : '';        //订单号
            if (modules.checkToken()) {
                _t.closeOrderRequest({
                    _token: localStorage.getItem("token"),                    //token
                    _nonceStr: localStorage.getItem("nonceStr")               //随机数
                });
            } else {
                modules.wxGetToken({
                    callBack: function (data) {
                        if (data.data.responseStatus) {
                            console.log(data);
                            _t.closeOrderRequest({
                                _token: data.data.responseData.token ? data.data.responseData.token : '',  //token
                                _nonceStr: data.nonceStr ? data.nonceStr : ''                              //随机数
                            });
                        }
                    }
                });
            }
        },
        closeOrderRequest: function (rv) {
            var _t = this,
                _data = {
                    "out_trade_no": _t.op.out_trade_no,
                    "scene": 1,
                    "roleId": 2,
                    "nonceStr": rv._nonceStr,
                    "siteId": 1,
                    "token": rv._token
                };
            modules.wxPayCommAjax({
                data: {paramJson: $.toJSON(_data)},
                path: "/mcall/base/pay/external/v1/updateCloseOrder/",     //取消订单
                callBack: function (data) {
                    console.log(data);
                    if(data && data.responseObject && data.responseObject.responseStatus){
                        //取消成功
                        Obj.closeOrdersSuccess();
                    }else{
                        //取消失败
                        Obj.closeOrdersError();
                    }
                }
            });
        }
    };
    _container.init(Obj);
};
3 申请退款
modules.applyForRefund = function (Obj) {
    var _container = {
        op: {},
        init: function () {
            var _t = this;
            _t.op.out_trade_no = Obj.out_trade_no ? Obj.out_trade_no : '';        //订单号
            if (modules.checkToken()) {
                _t.applyForRefundRequest({
                    _token: localStorage.getItem("token"),                    //token
                    _nonceStr: localStorage.getItem("nonceStr"),              //随机数
                    _out_trade_no: _t.op.out_trade_no
                });
            } else {
                modules.wxGetToken({
                    callBack: function (data) {
                        if (data.data.responseStatus) {
                            console.log(data);
                            _t.applyForRefundRequest({
                                _token: data.data.responseData.token ? data.data.responseData.token : '',  //token
                                _nonceStr: data.nonceStr ? data.nonceStr : '',                             //随机数
                                _out_trade_no: _t.op.out_trade_no
                            });
                        }
                    }
                });
            }
        },
        applyForRefundRequest: function (rv) {
            var _t = this,
                _data = {
                    "out_trade_no": _t.op.out_trade_no,
                    "scene": 1,
                    "roleId": 2,
                    "total_fee": 1,
                    "refund_fee": 1,
                    "nonceStr": rv._nonceStr,
                    "siteId": 1,
                    "token": rv._token
                };
            modules.wxPayCommAjax({
                data: {paramJson: $.toJSON(_data)},
                path: "/mcall/base/pay/external/v1/createRefundOrder/",        //申请退款
                callBack: function (data) {
                    localStorage.setItem("out_refund_no", data.out_refund_no); //退款单号
                    console.log(data);
                    if(data && data.responseObject && data.responseObject.responseStatus){
                        //取消成功
                        Obj.refundSuccess();
                    }else{
                        //取消失败
                        Obj.refundError();
                    }
                }
            });
        }
    };
    _container.init(Obj);
};
4 查看退款
modules.checkDrawBack = function (Obj) {
    var _container = {
        op: {},
        init: function () {
            var _t = this;
            _t.op.out_trade_no = Obj.out_trade_no ? Obj.out_trade_no : '';         //订单号
            _t.op.out_refund_no = Obj.out_refund_no ? Obj.out_refund_no : '';      //退款号
            if (modules.checkToken()) {
                _t.checkDrawBackRequest({
                    _token: localStorage.getItem("token"),                    //token
                    _nonceStr: localStorage.getItem("nonceStr")               //随机数
                });
            } else {
                modules.wxGetToken({
                    callBack: function (data) {
                        if (data.data.responseStatus) {
                            console.log(data);
                            _t.checkDrawBackRequest({
                                _token: data.data.responseData.token ? data.data.responseData.token : '',  //token
                                _nonceStr: data.nonceStr ? data.nonceStr : ''                              //随机数
                            });
                        }
                    }
                });
            }
        },
        checkDrawBackRequest: function (rv) {
            var _t = this,
                _data = {
                    "out_trade_no": _t.op.out_trade_no,
                    "out_refund_no": _t.op.out_refund_no,
                    "scene": 1,
                    "roleId": 2,
                    "nonceStr": rv._nonceStr,
                    "siteId": 1,
                    "token": rv._token
                };
            modules.wxPayCommAjax({
                data: {paramJson: $.toJSON(_data)},
                path: "/mcall/base/pay/external/v1/queryRefundOrder/",      //查看退款
                callBack: function (data) {
                    console.log(data);
                }
            });
        }
    };
    _container.init();
};
5 支付
modules.wxPay = function (Obj) {
    var container = {
        op: {},
        path: {
            wxBasePath: '', //微信接口配置
            prepayPth: '/mcall/base/pay/external/v1/createPrepaidOrder/'        //预支付订单
        },
        init: function () {
            var _t = this;
            _t.wxReady();
        },
        //ready函数
        wxReady: function () {
            var _t = this;
            if (modules.checkToken()) {
                _t.prepaidOrder({
                    token: localStorage.getItem("token"),
                    nonceStr: localStorage.getItem("nonceStr")
                }); //生成预支付订单
            } else {
                modules.wxGetToken({
                    callBack: function (data) {
                        if (data.data.responseStatus) {
                            console.log(data);
                            _t.op.token = data.data.responseData.token;  //token
                            _t.op.nonceStr = data.nonceStr;              //随机数
                            _t.prepaidOrder({
                                token: _t.op.token,
                                nonceStr: _t.op.nonceStr
                            }); //生成预支付订单
                        }
                    }
                });
            }
        },
        //生成预支付订单
        prepaidOrder: function (pv) {
            console.log("生成预支付订单");
            var _t = this;
            var _data = {
                "total_fee": 1,                  //订单总金额
                "body": Obj.body,                //订单描述
                "trade_type": "JSAPI",           //支付模式 JSAPI--公众号支付、NATIVE--原生扫码支付、APP--app支付
                "scene": 1,                      //支付场景
                "siteId": 1,                     //站点
                "roleId": '2',
                "openid":localStorage.getItem("openId"),
                "nonceStr": pv.nonceStr,         //随机数
                "token": pv.token
            };
            modules.wxPayCommAjax({
                data: {paramJson: $.toJSON(_data)},   //预支付参数
                path: _t.path.prepayPth,              //预支付URL
                callBack: function (data) {
                    console.log(data);
                    console.log("预支付订单号" + data.out_trade_no);
                    _t.op.dataL1 = data;
                    localStorage.setItem("orderNumber", data.out_trade_no);
                    _t.checkWxPay();            //请求支付
                }
            });
        },
        //判断微信支付
        checkWxPay: function (wpv) {
            var _t = this;
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', _t.onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', _t.onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', _t.onBridgeReady);
                }
            } else {
                _t.onBridgeReady();
            }
        },
        //请求支付
        onBridgeReady: function () {
            var _t = this,
                _data = _t.op.dataL1,
                _timeStamp = Math.round(new Date().getTime() / 1000)+"";
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                    "appId": _data.appid,                        //公众号名称，由商户传入
                    "timeStamp": _data.timeStamp,                //时间戳，自1970年以来的秒数
                    "nonceStr":_data.nonceStr,                   //随机串
                    "package": "prepay_id="+ _data.prepay_id,    //支付参数
                    "signType": "MD5",                           //微信签名方式
                    "paySign":_data.sign                         //微信签名
                }, function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        //Obj.callBack({
                        //    responseStatus:"true"
                        //});
                    } else {
                        //Obj.callBack({
                        //    responseStatus:"false"
                        //});
                    }
                    // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                }
            );
        }
    };
    container.init(Obj);
};

方法加载

$(function () {
    if (modules.checkToken()) {
        console.log("token有效")
    } else {
        console.log("token无效")
    }
    if (!modules.checkOpenId()) {
        modules.wxGetOpenId();    //获取openId
    }
    //支付
    $('.ev-pay').on("click", function () {
        modules.wxPay({
            total_fee: 0.01,                    //订单总金额 (单位/元 保留两位小数)
            body: "唯医骨科-线下支付",       //订单描述
            callBack: function (data) {

            }
        })
    });
    //查看支付订单
    $('.ev-viewPay').on("click", function () {
        modules.checkOrder({
            out_trade_no: localStorage.getItem("orderNumber")  //订单号
        });
    });
    //取消订单
    $('.ev-closeOrder').on("click", function () {
        modules.closeOrder({
            out_trade_no: localStorage.getItem("orderNumber"), //订单号
            closeOrdersSuccess:function(){
                common.popup({text:"取消订单成功！"})
            },
            closeOrdersError:function(){
                common.popup({text:"取消订单失败！"})
            }
        });
    });
    //申请退款
    $('.ev-applyBack').on("click", function () {
        modules.applyForRefund({
            out_trade_no: localStorage.getItem("orderNumber"),  //订单号
            refundSuccess:function() {
                common.popup({text:"退款成功！"})
            },
            refundError:function() {
                common.popup({text:"退款失败！"})
            }
        });
    });
    //查看退款
    $('.ev-viewBack').on("click", function () {
        modules.checkDrawBack({
            out_trade_no: localStorage.getItem("orderNumber"),    //订单号
            out_refund_no: localStorage.getItem("out_refund_no")  //退款号
        });
    });
});

前端开发微信公众号支付需要线上环境唤醒微信支付功能，正常的线下开发环境无法模拟微信支付环境，可以通过花瓶等内网穿透工具，通过在线下穿透内网调用微信线上支付，已达到在线下开发正常支付的流程，关于线下调用线上支付详细的解决方案接下来会给大家出一个详细的文档。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值