微信支付jssdk

岁月如歌_

已于 2022-05-10 16:06:52 修改

阅读量1.2k

点赞数

于 2022-05-10 15:40:40 首次发布

本文链接：https://blog.csdn.net/namechenfl/article/details/124690017

版权

微信支付分 H5 JSSDK 接口调用支付流程

关键词由CSDN通过智能技术生成

地址：h5对接微信支付分jssdk支付分并调用开启支付分页面 - 王洪洪 - 博客园

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.5.0.js"></script>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="vconsole.min.js"></script>
    <script type="text/javascript">
        var vConsole = new VConsole();
        window.vConsole = new window.VConsole();
        var appidG = "";
        var timestampG = "";
        var nonceStrG = "";
        var signatureG = "";

        $(function() {
            var signUrl = window.location.href.split('#')[0];
            console.log("signUrl:" + signUrl);
            $.ajax({
                url: "/index/test",
                method: "post",
                data: {
                    signUrl: signUrl
                },
                success: function(data) {
                    console.log("data:" + data);
                    var dataJson = JSON.parse(data);
                    // console.log("dataJson.appid:"+dataJson.appid);
                    console.log("wx.config() ---> 接收后台返回的参数");
                    appidG = dataJson.appid;
                    timestampG = dataJson.timestamp;
                    nonceStrG = dataJson.nonceStr;
                    signatureG = dataJson.signature;
                    wx.config({
                        debug: true,
                        appId: dataJson.appid,
                        timestamp: dataJson.timestamp,
                        nonceStr: dataJson.nonceStr,
                        signature: dataJson.signature,
                        jsApiList: ['onMenuShareAppMessage', 'openBusinessView']
                    })
                }
            });
        });

        /**
         * 跳转微信支付
         */
        function goToWXScore() {
            var signUrl = window.location.href.split('#')[0];
            console.log("appidG:" + appidG);
            console.log("timestampG:" + timestampG);
            console.log("nonceStrG:" + nonceStrG);
            console.log("signatureG:" + signatureG);
            $.ajax({
                url: "/index/generateSignature",
                method: "post",
                data: {
                    timestamp: timestampG,
                    nonce_str: nonceStrG
                },
                success: function(sign) {
                    console.log("sign:" + sign);
                    wx.ready(function() {
                        wx.checkJsApi({
                            jsApiList: ['openBusinessView'], // 需要检测的JS接口列表
                            success: function(res) {
                                // 以键值对的形式返回，可用的api值true，不可用为false
                                // 如：{"checkResult":{"openBusinessView":true},"errMsg":"checkJsApi:ok"}
                                if (res.checkResult.openBusinessView) {
                                    wx.invoke(
                                        'openBusinessView', {
                                            businessType: 'wxpayScoreEnable',
                                            queryString: "mch_id=1518750531&service_id=00004000000000704283351234894845&out_request_no=1234323JKHDFE1243259&timestamp=" + timestampG + "" +
                                                "&nonce_str=" + nonceStrG + "&sign_type=HMAC-SHA256&sign=" + sign + ""
                                        },
                                        function(res) {
                                            // 从微信侧小程序返回时会执行这个回调函数
                                            if (parseInt(res.err_code) === 0) {
                                                //跳转支付成功展示页面
		    	  window.location.href = path +"/page/goPaymentSuccess";
                                                // 返回成功
                                            } else {
                                                // 返回失败
                                            }
                                        });
                                }
                            }
                        });
                    });
                }
            });


        }
    </script>
</head>

<body>
    <div>
        <button id="pay" onclick="goToWXScore()" value="支付">支付</button>
    </div>
</body>

</html>