{"id":747,"date":"2025-07-09T01:29:38","date_gmt":"2025-07-09T01:29:38","guid":{"rendered":"https:\/\/abatablaster.xyz\/?page_id=747"},"modified":"2026-08-23T01:29:31","modified_gmt":"2026-08-23T01:29:31","slug":"wallet","status":"publish","type":"page","link":"https:\/\/abatablaster.xyz\/index.php\/wallet\/","title":{"rendered":"\ud83d\udcb0Wallet AbataBlaster"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ms\">\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>Wallet \u2013 AbataBlaster<\/title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <!-- Meta Pixel Code -->\n    <script>\n        !function (f, b, e, v, n, t, s) {\n            if (f.fbq) return; n = f.fbq = function () {\n                n.callMethod ?\n                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)\n            };\n            if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';\n            n.queue = []; t = b.createElement(e); t.async = !0;\n            t.src = v; s = b.getElementsByTagName(e)[0];\n            s.parentNode.insertBefore(t, s)\n        }(window, document, 'script',\n            'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n\n        fbq('init', '1176955847928094');\n        fbq('track', 'PageView');\n    <\/script>\n    <noscript>\n        <img loading=\"lazy\" decoding=\"async\" height=\"1\" width=\"1\" style=\"display:none\"\n            src=\"https:\/\/www.facebook.com\/tr?id=1176955847928094&#038;ev=PageView&#038;noscript=1\" \/>\n    <\/noscript>\n    <!-- End Meta Pixel Code -->\n\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-app-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-auth-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-firestore-compat.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n\n    <style>\n        \/* Pastikan padding tak buat elemen lebih besar dari skrin *\/\n        *,\n        *::before,\n        *::after {\n            box-sizing: border-box;\n        }\n\n        body {\n            background: #e8f5e9;\n            font-family: 'Poppins', Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n        }\n\n        \/* Card wallet \u2013 sentiasa di tengah, tak lebih 100vw *\/\n        .wallet-container {\n            background: #fff;\n            max-width: 720px;\n            width: 100%;\n            margin: 42px auto 24px;\n            padding: 32px 40px;\n            border-radius: 18px;\n            box-shadow: 0 8px 24px rgba(60, 80, 65, 0.08);\n        }\n\n        \/* Layout mobile \/ tablet \u2013 lebih rapat & teks kecil sikit *\/\n        @media (max-width: 850px) {\n            .wallet-container {\n                margin: 24px auto 16px;\n                padding: 20px 16px;\n            }\n\n            .transaksi-table th,\n            .transaksi-table td {\n                font-size: 13px;\n                padding: 8px 4px;\n            }\n        }\n\n        \/* Sangat kecil (contoh phone 360px) \u2013 benarkan line wrap *\/\n        @media (max-width: 600px) {\n\n            .transaksi-table th,\n            .transaksi-table td {\n                white-space: normal;\n            }\n        }\n\n        .wallet-title {\n            font-size: 2rem;\n            font-weight: 700;\n            color: #388e3c;\n            margin-bottom: 8px;\n            letter-spacing: 1px;\n            text-align: center;\n        }\n\n        .wallet-balance {\n            font-size: 2.6rem;\n            color: #1b5e20;\n            font-weight: 700;\n            text-align: center;\n            margin: 16px 0 20px 0;\n        }\n\n        .wallet-btns {\n            display: flex;\n            justify-content: center;\n            gap: 18px;\n            margin-bottom: 24px;\n        }\n\n        .btn {\n            padding: 12px 28px;\n            background: linear-gradient(90deg, #43a047 60%, #81c784 100%);\n            color: #fff;\n            font-size: 1rem;\n            border: none;\n            border-radius: 10px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: background 0.2s;\n        }\n\n        .btn:hover {\n            background: linear-gradient(90deg, #388e3c 60%, #66bb6a 100%);\n        }\n\n        .transaksi-title {\n            font-size: 1.15rem;\n            font-weight: 600;\n            color: #2e7d32;\n            margin-bottom: 10px;\n        }\n\n        .transaksi-table {\n            width: 100%;\n            border-collapse: collapse;\n            background: #fafafa;\n            border-radius: 12px;\n            overflow: hidden;\n        }\n\n        .transaksi-table th,\n        .transaksi-table td {\n            padding: 10px 16px;\n            text-align: left;\n            font-size: 15px;\n            white-space: nowrap;\n            \/* default: elak pecah, tapi akan override di <600px *\/\n        }\n\n        .transaksi-table th {\n            background: #c8e6c9;\n            color: #2e7d32;\n            font-weight: 600;\n        }\n\n        .transaksi-table tr {\n            border-bottom: 1px solid #e0e0e0;\n        }\n\n        .transaksi-table td.amount.plus {\n            color: #388e3c;\n            font-weight: 600;\n        }\n\n        .transaksi-table td.amount.minus {\n            color: #d84315;\n            font-weight: 600;\n        }\n\n        .transaksi-table td.status-completed {\n            color: #43a047;\n            font-weight: 500;\n        }\n\n        .transaksi-table td.status-pending {\n            color: #f9a825;\n            font-weight: 500;\n        }\n\n        .transaksi-table td.status-failed {\n            color: #e53935;\n            font-weight: 500;\n        }\n\n        @media (max-width: 500px) {\n            .wallet-container {\n                padding: 16px 12px;\n            }\n\n            .wallet-title {\n                font-size: 1.25rem;\n            }\n\n            .wallet-balance {\n                font-size: 1.7rem;\n            }\n        }\n\n        .transaksi-scroll {\n            max-height: 360px;\n            overflow-y: auto;\n            margin-bottom: 4px;\n        }\n\n        .topup-panel {\n            margin: 12px 0 28px;\n            padding: 20px;\n            background: #f8fbf8;\n            border: 1px solid #dcebdd;\n            border-radius: 16px;\n        }\n\n        .topup-panel-title {\n            margin: 0 0 6px;\n            text-align: center;\n            color: #1b5e20;\n            font-size: 1.15rem;\n            font-weight: 700;\n        }\n\n        .topup-panel-subtitle {\n            margin: 0 0 18px;\n            text-align: center;\n            color: #607d8b;\n            font-size: .9rem;\n            line-height: 1.5;\n        }\n\n        .topup-quick {\n            display: flex;\n            justify-content: center;\n            gap: 8px;\n            flex-wrap: wrap;\n            margin-bottom: 12px;\n        }\n\n        .topup-quick-btn {\n            padding: 8px 15px;\n            border: 1px solid #a5d6a7;\n            background: #ffffff;\n            color: #2e7d32;\n            border-radius: 10px;\n            font-weight: 700;\n            cursor: pointer;\n        }\n\n        .topup-quick-btn:hover {\n            background: #e8f5e9;\n        }\n\n        .topup-amount-wrap {\n            max-width: 380px;\n            margin: 0 auto 18px;\n        }\n\n        .topup-amount-label {\n            display: block;\n            margin-bottom: 6px;\n            font-size: .9rem;\n            font-weight: 700;\n            color: #37474f;\n        }\n\n        .topup-amount-input {\n            width: 100%;\n            padding: 13px 14px;\n            border: 1px solid #cfd8dc;\n            border-radius: 10px;\n            font-size: 1rem;\n            outline: none;\n            background: #ffffff;\n        }\n\n        .topup-amount-input:focus {\n            border-color: #66bb6a;\n            box-shadow: 0 0 0 3px rgba(102, 187, 106, .12);\n        }\n\n        .payment-options {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 12px;\n        }\n\n        .payment-option {\n            background: #ffffff;\n            border: 1px solid #dbe5dc;\n            border-radius: 14px;\n            padding: 16px;\n            display: flex;\n            flex-direction: column;\n            min-height: 190px;\n        }\n\n        .payment-option-icon {\n            font-size: 30px;\n            margin-bottom: 8px;\n        }\n\n        .payment-option-title {\n            font-size: 1rem;\n            font-weight: 800;\n            color: #263238;\n            margin-bottom: 5px;\n        }\n\n        .payment-option-fee {\n            font-size: .88rem;\n            color: #546e7a;\n            line-height: 1.45;\n            margin-bottom: 8px;\n        }\n\n        .payment-option-total {\n            min-height: 42px;\n            font-size: .88rem;\n            line-height: 1.45;\n            color: #2e7d32;\n            font-weight: 700;\n            margin-bottom: 12px;\n        }\n\n        .payment-option .btn {\n            width: 100%;\n            margin-top: auto;\n            padding-left: 12px;\n            padding-right: 12px;\n        }\n\n        .payment-provider-note {\n            margin-top: 14px;\n            text-align: center;\n            font-size: 12px;\n            line-height: 1.5;\n            color: #78909c;\n        }\n\n        @media (max-width: 600px) {\n            .topup-panel {\n                padding: 16px 12px;\n            }\n\n            .payment-options {\n                grid-template-columns: 1fr;\n            }\n\n            .payment-option {\n                min-height: auto;\n            }\n        }\n    <\/style>\n<\/head>\n\n<body>\n\n    <div style=\"text-align: center; margin-top: 24px;\">\n        <img decoding=\"async\" style=\"max-width: 180px; width: 100%; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);\"\n            src=\"https:\/\/abatablaster.xyz\/wp-content\/uploads\/2025\/05\/photo_2024-05-16_15-47-59.jpg\"\n            alt=\"Abata Blaster Logo\" \/>\n    <\/div>\n\n    <div class=\"wallet-container\">\n        <div class=\"wallet-title\">\ud83d\udcb0 Wallet AbataBlaster<\/div>\n        <div class=\"wallet-balance\" id=\"walletBalance\">RM --<\/div>\n        <div class=\"topup-panel\">\n\n            <div class=\"topup-panel-title\">\n                \ud83d\udcb3 Topup Wallet\n            <\/div>\n\n            <div class=\"topup-panel-subtitle\">\n                Masukkan amaun topup dan pilih kaedah pembayaran.\n                Minimum topup ialah <b>RM20<\/b>.\n            <\/div>\n\n            <div class=\"topup-quick\">\n                <button\n                    type=\"button\"\n                    class=\"topup-quick-btn\"\n                    onclick=\"setWalletTopupAmount(20)\"\n                >\n                    RM20\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"topup-quick-btn\"\n                    onclick=\"setWalletTopupAmount(50)\"\n                >\n                    RM50\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"topup-quick-btn\"\n                    onclick=\"setWalletTopupAmount(100)\"\n                >\n                    RM100\n                <\/button>\n            <\/div>\n\n            <div class=\"topup-amount-wrap\">\n\n                <label\n                    class=\"topup-amount-label\"\n                    for=\"walletTopupAmount\"\n                >\n                    Amaun Topup (RM)\n                <\/label>\n\n                <input\n                    id=\"walletTopupAmount\"\n                    class=\"topup-amount-input\"\n                    type=\"number\"\n                    min=\"20\"\n                    step=\"0.01\"\n                    placeholder=\"Contoh: 50.00\"\n                    oninput=\"updateWalletPaymentPreview()\"\n                >\n\n            <\/div>\n\n            <div class=\"payment-options\">\n\n                <div class=\"payment-option\">\n\n                    <div class=\"payment-option-icon\">\n                        \ud83d\udcb3\n                    <\/div>\n\n                    <div class=\"payment-option-title\">\n                        FPX Online Banking\n                    <\/div>\n\n                    <div class=\"payment-option-fee\">\n                        Caj transaksi tetap\n                        <b>RM1.00<\/b>\n                        bagi setiap pembayaran.\n                    <\/div>\n\n                    <div\n                        class=\"payment-option-total\"\n                        id=\"fpxPaymentPreview\"\n                    >\n                        Masukkan amaun topup untuk lihat jumlah bayaran.\n                    <\/div>\n\n                    <button\n                        type=\"button\"\n                        class=\"btn\"\n                        onclick=\"startWalletTopup('fpx')\"\n                    >\n                        Bayar Dengan FPX\n                    <\/button>\n\n                <\/div>\n\n                <div class=\"payment-option\">\n\n                    <div class=\"payment-option-icon\">\n                        \ud83d\udcf1\n                    <\/div>\n\n                    <div class=\"payment-option-title\">\n                        DuitNow QR\n                    <\/div>\n\n                    <div class=\"payment-option-fee\">\n                        Caj transaksi\n                        <b>1%<\/b>\n                        daripada nilai topup.\n                    <\/div>\n\n                    <div\n                        class=\"payment-option-total\"\n                        id=\"qrPaymentPreview\"\n                    >\n                        Masukkan amaun topup untuk lihat jumlah bayaran.\n                    <\/div>\n\n                    <button\n                        type=\"button\"\n                        class=\"btn\"\n                        onclick=\"startWalletTopup('qr')\"\n                    >\n                        Bayar Dengan DuitNow QR\n                    <\/button>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"payment-provider-note\">\n                \ud83d\udd12 FPX & DuitNow QR diproses melalui\n                <b>CHIP IN SDN. BHD.<\/b>\n                Wallet akan dikreditkan secara automatik selepas pembayaran disahkan.\n            <\/div>\n\n        <\/div>\n\n        <div class=\"transaksi-title\">Riwayat Transaksi Wallet<\/div>\n        <div class=\"transaksi-scroll\">\n            <table class=\"transaksi-table\" id=\"transaksiTable\">\n                <thead>\n                    <tr>\n                        <th>Tarikh<\/th>\n                        <th>Jenis<\/th>\n                        <th>Amaun<\/th>\n                        <th>Status<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td colspan=\"4\" style=\"text-align:center; color:#888;\">Memuatkan...<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/div>\n        <!-- TOTAL STICKY DI BAWAH, LUAR .transaksi-scroll -->\n        <div id=\"walletTotalsWrap\"\n            style=\"width:100%;max-width:720px;margin:0 auto;font-weight:bold;font-size:1.07em;text-align:right;padding:8px 16px 0 0; background:#e8f5e9;\">\n            <span id=\"walletTotals\"><\/span>\n        <\/div>\n\n    <\/div> <!-- \/wallet-container -->\n\n    <script src=\"\/js\/wallet.js\"><\/script>\n\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Wallet \u2013 AbataBlaster \ud83d\udcb0 Wallet AbataBlaster RM &#8212; \ud83d\udcb3 Topup Wallet Masukkan amaun topup dan pilih kaedah pembayaran. Minimum topup ialah RM20. RM20 RM50 RM100 Amaun Topup (RM) \ud83d\udcb3 FPX Online Banking Caj transaksi tetap RM1.00 bagi setiap pembayaran. Masukkan amaun topup untuk lihat jumlah bayaran. Bayar Dengan FPX \ud83d\udcf1 DuitNow QR Caj transaksi 1% [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-747","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=747"}],"version-history":[{"count":37,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/747\/revisions"}],"predecessor-version":[{"id":1501,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/747\/revisions\/1501"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}