Skip to content

J
jiedao-api-boot-master
Switch branch/tag
Find file
Normal viewHistoryPermalink
pay_wx_pub.html 4.27 KB
Newer Older
lanbaoming's avatar
2024-04-08
1397b2a1
 
lanbaoming committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>支付测试页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<div>点击如下按钮，发起支付的测试</div>
<div>
    <button id="wx_pub">微信公众号</button>
</div>
</body>
<script>
    let shopOrderId = undefined;
    let payOrderId = undefined;
    // let server = 'http://127.0.0.1:48080';
    let server = 'http://niubi.natapp1.cc';
    // TODO openid
    let openid = "ockUAwIZ-0OeMZl9ogcZ4ILrGba0";
    $(function() {
        // 获得 JsapiTicket
        // 参考 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 文档
        $.ajax({
            url: server + "/app-api/wx/mp/create-jsapi-signature?url=" + document.location.href,
            method: 'POST',
            success: function( result ) {
                if (result.code !== 0) {
                    alert('获取 JsapiTicket 失败，原因：' + result.msg)
                    return;
                }
                var jsapiTicket = result.data;
                jsapiTicket.jsApiList = ['chooseWXPay'];
                jsapiTicket.debug = false;

                // 初始化 JS
                wx.config(jsapiTicket);
            }
        });

        // 自动发起商城订单编号
        $.ajax({
            url: server + "/app-api/shop/order/create",
            method: 'POST',
            success: function( result ) {
                if (result.code !== 0) {
                    alert('创建商城订单失败，原因：' + result.msg)
                    return;
                }
                shopOrderId = result.data.id;
                payOrderId = result.data.payOrderId;
                console.log("商城订单：" + shopOrderId)
                console.log("支付订单：" + payOrderId)
            }
        })
    })

    // 微信公众号
    $( "#wx_pub").on( "click", function() {
        if (typeof WeixinJSBridge == "undefined") {
            // if (document.addEventListener) {
            //     document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            // } else if (document.attachEvent) {
            //     document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            //     document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            // }
            alert('微信支付，只支持在微信客户端中使用！');
            return;
        }
        if (navigator.userAgent.indexOf('wechatdevtools') >= 0) {
            alert('微信支付，无法在微信开发者工具中使用！请使用微信客户端！');
            return;
        }

        // 提交支付
        // 参考 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 文档
        // 参考 https://segmentfault.com/a/1190000020704650 文档
        $.ajax({
            url: server + "/app-api/pay/order/submit",
            method: 'POST',
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({
                "id": payOrderId,
                "channelCode": 'wx_pub',
                "channelExtras": {
                    "openid": openid
                }
            }),
            success: function( result ) {
                if (result.code !== 0) {
                    alert('提交支付订单失败，原因：' + result.msg)
                    return;
                }
                alert('点击确定，开始微信支付');
                // 开始调用微信支付
                let data = result.data.invokeResponse;
                wx.chooseWXPay({
                    timestamp: data.timeStamp,
                    nonceStr: data.nonceStr,
                    package: data.packageValue,
                    signType: data.signType,
                    paySign: data.paySign,
                    success: function (res) {
                        alert(JSON.stringify(res));
                    },
                    error: function(e) {
                        alert(JSON.stringify(e));
                    }
                });
            }
        })
    });
</script>
</html>