Html+css+jsでWeChatとAlipayのスキャンコード決済フロントエンドを実現

プログラミング 2023-07-12 07:37:06 訪問数: null

この章のチュートリアルでは、主に html+css+js テクノロジーを使用して、WeChat と Alipay のスキャン コード支払いのフロントエンド ページを実現します。

目次

1.エフェクトマップのプレビュー 

(1) Alipayスキャンコード決済

(2) WeChatスキャンコード決済

2. プロジェクトの一部のソース コード ファイル

(1) ディレクトリ構造

（2）happy.html

（3）wxpay.html

3. プロジェクトの完全なソース コードをダウンロードします。

1.エフェクトマップのプレビュー 

(1) Alipayスキャンコード決済

(2) WeChatスキャンコード決済

2. プロジェクトの一部のソース コード ファイル

(1) ディレクトリ構造

（2）happy.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-cn">
<meta name="renderer" content="webkit">
<title>支付宝扫码支付</title>
<link href="/assets/css/wechat_pay.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="body">
<h1 class="mod-title">
<span class="ico-alipay"></span><span class="text">支付宝扫码支付</span>
</h1>
<div class="mod-ct">
<div class="order">
</div>
<div class="amount">￥25.00</div>
<div class="qr-image" id="qrcode">
</div>
 
<div class="detail" id="orderDetail">
<dl class="detail-ct" style="display: none;">
<dt>商家</dt>
<dd id="storeName"></dd>
<dt>购买物品</dt>
<dd id="productName">RABDTZKDSJLHWCKA</dd>
<dt>商户订单号</dt>
<dd id="billId">2023021612225999274</dd>
<dt>创建时间</dt>
<dd id="createTime">2023-02-16 12:22:59</dd>
</dl>
<a href="javascript:void(0)" class="arrow"><i class="ico-arrow-alipay"></i></a>
</div>
<div class="tip">
<span class="dec dec-left"></span>
<span class="dec dec-right"></span>
<div class="ico-scan-alipay"></div>
<div class="tip-text">
<p>请使用支付宝扫一扫</p>
<p>扫描二维码完成支付</p>
</div>
</div>
<div class="tip-text">
</div>
</div>
<div class="foot">
<div class="inner">
<p>手机用户可保存上方二维码到手机中</p>
<p>在支付宝扫一扫中选择“相册”即可</p>
</div>
</div>
</div>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/layer.min.js"></script>
<script src="/assets/js/jquery.qrcode.min.js"></script>
<script>
    var code_url = "https:\/\/qr.alipay.com\/bax02441nyt9fkwfuvms2505";
        var order_num = "230216125131683802";
        var url_scheme = 'alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(code_url);
        $('#qrcode').qrcode({
            text: code_url,
            width: 230,
            height: 230,
            foreground: "#000000",
            background: "#ffffff",
            typeNumber: -1
        });
        // 订单详情
        $('#orderDetail .arrow').click(function (event) {
            if ($('#orderDetail').hasClass('detail-open')) {
                $('#orderDetail .detail-ct').slideUp(500, function () {
                    $('#orderDetail').removeClass('detail-open');
                });
            } else {
                $('#orderDetail .detail-ct').slideDown(500, function () {
                    $('#orderDetail').addClass('detail-open');
                });
            }
        });


        function checkresult() {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/community/alipay/query",
                timeout: 10000, //ajax请求超时时间10s
                data: {"out_trade_no": order_num},
                success: function (data) {
                    //从服务器得到数据，显示数据并继续查询
                    if (data.code == 0) {
                        layer.msg('支付成功，正在跳转中...', {icon: 16, shade: 0.1, time: 5000});
                    } else {
                        setTimeout("checkresult()", 2000);
                    }
                },
                //Ajax请求超时，继续查询
                error: function (XMLHttpRequest, textStatus) {
                    if (textStatus == "timeout") {
                        setTimeout("checkresult()", 1000);
                    } else { //异常
                        setTimeout("checkresult()", 1000);
                    }
                }
            });
        }

        var isMobile = function () {
            var ua = navigator.userAgent;
            var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
                isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
                isAndroid = ua.match(/(Android)\s+([\d.]+)/);
            return isIphone || isAndroid;
        }

        function openAlipay() {
            window.location.href = url_scheme;
            layer.msg('正在打开支付宝...', {shade: 0, time: 1000});
        }

        window.onload = function () {
            if (isMobile()) {
                $('.open_app').show();
                window.location.href = url_scheme;
            }
            setTimeout("checkresult()", 2000);
        }
</script>
</body>
</html>

（3）wxpay.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-cn">
<meta name="renderer" content="webkit">
<title>微信扫码支付</title>
<link href="/assets/css/wechat_pay.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="body">
<h1 class="mod-title">
<span class="ico-wechat"></span><span class="text">微信扫码支付</span>
</h1>
<div class="mod-ct">
<div class="order">
</div>
<div class="amount">￥25.00</div>
<div class="qr-image" id="qrcode">
</div>
 
<div class="detail" id="orderDetail">
<dl class="detail-ct" style="display: none;">
<dt>商家</dt>
<dd id="storeName"></dd>
<dt>购买物品</dt>
<dd id="productName">RABDTZKDSJLHWCKA</dd>
<dt>商户订单号</dt>
<dd id="billId">2023021612225999274</dd>
<dt>创建时间</dt>
<dd id="createTime">2023-02-16 12:22:59</dd>
</dl>
<a href="javascript:void(0)" class="arrow"><i class="ico-arrow-wechat"></i></a>
</div>
<div class="tip">
<span class="dec dec-left"></span>
<span class="dec dec-right"></span>
<div class="ico-scan-wechat"></div>
<div class="tip-text">
<p>请使用微信扫一扫</p>
<p>扫描二维码完成支付</p>
</div>
</div>
<div class="tip-text">
</div>
</div>
<div class="foot">
<div class="inner">
<p>手机用户可保存上方二维码到手机中</p>
<p>在微信扫一扫中选择“相册”即可</p>
</div>
</div>
</div>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/layer.min.js"></script>
<script src="/assets/js/jquery.qrcode.min.js"></script>
<script>
    $('#qrcode').qrcode({
        text: "https://mnxxkj.com/pay/wxpay/jspay/2023021612225999274/",
        width: 230,
        height: 230,
        foreground: "#000000",
        background: "#ffffff",
        typeNumber: -1
    });
    // 订单详情
    $('#orderDetail .arrow').click(function (event) {
        if ($('#orderDetail').hasClass('detail-open')) {
            $('#orderDetail .detail-ct').slideUp(500, function () {
                $('#orderDetail').removeClass('detail-open');
            });
        } else {
            $('#orderDetail .detail-ct').slideDown(500, function () {
                $('#orderDetail').addClass('detail-open');
            });
        }
    });
    // 检查是否支付完成
    function loadmsg() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/getshop.php",
            timeout: 10000, //ajax请求超时时间10s
            data: {type: "wxpay", trade_no: "2023021612225999274"}, //post数据
            success: function (data, textStatus) {
                //从服务器得到数据，显示数据并继续查询
                if (data.code == 1) {
					layer.msg('支付成功，正在跳转中...', {icon: 16,shade: 0.1,time: 15000});
                    window.location.href=data.backurl;
                }else{
                    setTimeout("loadmsg()", 3000);
                }
            },
            //Ajax请求超时，继续查询
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == "timeout") {
                    setTimeout("loadmsg()", 1000);
                } else { //异常
                    setTimeout("loadmsg()", 4000);
                }
            }
        });
    }
    window.onload = loadmsg();
</script>
</body>
</html>

3. プロジェクトの完全なソース コードをダウンロードします。

アリババクラウドディスク: https://www.aliyundrive.com/s/xPiAGoTrsjF

おすすめ

転載: blog.csdn.net/qq_19309473/article/details/129059219
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com