{"id":725,"date":"2021-03-31T16:22:22","date_gmt":"2021-03-31T09:22:22","guid":{"rendered":"https:\/\/www.vgadz.com\/confirm-payment\/"},"modified":"2026-07-02T11:53:04","modified_gmt":"2026-07-02T04:53:04","slug":"confirm-payment","status":"publish","type":"page","link":"https:\/\/www.vgadz.com\/en\/confirm-payment\/","title":{"rendered":"Payment"},"content":{"rendered":"\n\t<section class=\"section\" id=\"section_1356554241\">\n\t\t<div class=\"section-bg fill\" >\n\t\t\t\t\t\t\t\t\t\n\t\t\t\n\n\t\t<\/div>\n\n\t\t\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n<div class=\"row\" style=\"max-width:800px\" id=\"row-1583180233\">\n\n\t<div id=\"col-1894184722\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h1 style=\"text-align: center;\">\u0e41\u0e08\u0e49\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/h1>\n<style>\n\/* Modern UI Reset & Wrapper *\/\n.wcpnm-wrapper {\n    background: #ffffff;\n    border: 1px solid #e5e7eb;\n    border-radius: 12px;\n    padding: 40px;\n    max-width: 750px;\n    margin: 40px auto;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n    color: #374151;\n}\n.wcpnm-header {\n    text-align: center;\n    margin-bottom: 40px;\n}\n.wcpnm-header h2 {\n    display: inline-block;\n    margin: 0;\n    padding-bottom: 12px;\n    font-size: 26px;\n    font-weight: 800;\n    color: #111827;\n    position: relative;\n    letter-spacing: -0.02em;\n}\n.wcpnm-header h2::after {\n    content: \"\";\n    position: absolute;\n    width: 60px;\n    height: 4px;\n    background-color: #0d9488;\n    bottom: 0;\n    left: calc(50% - 30px);\n    border-radius: 2px;\n}\n\n\/* Form Layout *\/\n.wcpnm-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    margin-bottom: 24px;\n}\n.wcpnm-col {\n    flex: 1;\n    min-width: 260px;\n}\n\n.wcpnm-wrapper label {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 700;\n    color: #374151;\n    font-size: 14px;\n}\n.wcpnm-wrapper input[type=\"text\"],\n.wcpnm-wrapper input[type=\"number\"],\n.wcpnm-wrapper input[type=\"date\"],\n.wcpnm-wrapper input[type=\"time\"],\n.wcpnm-wrapper select {\n    width: 100% !important;\n    padding: 12px 16px !important;\n    height: auto !important;\n    min-height: 48px !important; \n    line-height: 1.5 !important;  \n    border: 1px solid #d1d5db !important;\n    border-radius: 8px !important;\n    box-sizing: border-box !important;\n    font-size: 15px !important;\n    color: #111827 !important;\n    background-color: #f9fafb !important;\n    transition: all 0.2s ease-in-out !important;\n}\n.wcpnm-wrapper select {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background-image: url(\"data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%22%20fill%3D%22none%22%20stroke%3D%22%236b7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E\") !important;\n    background-repeat: no-repeat !important;\n    background-position: right 16px center !important;\n    background-size: 16px auto !important;\n    padding-right: 48px !important;\n}\n.wcpnm-wrapper input:focus, \n.wcpnm-wrapper select:focus {\n    border-color: #0d9488 !important;\n    outline: none !important;\n    background-color: #ffffff !important;\n    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1) !important;\n}\n\n\/* Advanced Bank Cards *\/\n.wcpnm-bank-section {\n    margin-bottom: 30px;\n}\n.wcpnm-bank-card {\n    display: flex;\n    flex-direction: column;\n    background: #fdfdfd;\n    border: 1px solid #e5e7eb;\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 16px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    position: relative;\n}\n.wcpnm-bank-card:hover {\n    border-color: #0d9488;\n    background: #ffffff;\n    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.05);\n}\n\n.wcpnm-bank-card-header {\n    display: flex;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.wcpnm-bank-card input[type=\"radio\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    width: 24px;\n    height: 24px;\n    border: 2px solid #0d9488;\n    border-radius: 50%;\n    margin: 0 16px 0 0;\n    position: relative;\n    outline: none;\n    cursor: pointer;\n    flex-shrink: 0;\n    background: transparent;\n}\n.wcpnm-bank-card input[type=\"radio\"]:checked {\n    border-color: #0d9488;\n}\n.wcpnm-bank-card input[type=\"radio\"]:checked::after {\n    content: \"\";\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    width: 12px;\n    height: 12px;\n    background: #0d9488;\n    border-radius: 50%;\n}\n\n.wcpnm-bank-img-logo {\n    height: 38px;\n    width: 38px;\n    object-fit: contain;\n    border-radius: 8px;\n}\n\n.wcpnm-bank-fallback-logo {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n    background-color: #0d9488;\n    color: #fff;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    font-weight: 800;\n    text-transform: uppercase;\n}\n\n.wcpnm-bank-card-body {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding-left: 40px;\n}\n.wcpnm-bank-name {\n    flex: 0 0 160px;\n    font-weight: 700;\n    font-size: 16px;\n    color: #111827;\n    line-height: 1.4;\n}\n.wcpnm-bank-acc {\n    flex: 0 0 140px;\n    font-weight: 700;\n    font-size: 16px;\n    color: #374151;\n}\n.wcpnm-bank-owner {\n    flex: 1 1 auto;\n    font-size: 15px;\n    color: #6b7280;\n    padding-top: 1px;\n}\n\n\/* Selected state using modern CSS *\/\n.wcpnm-bank-card:has(input[type=\"radio\"]:checked) {\n    border-color: #0d9488;\n    background: #ffffff;\n    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.08);\n}\n\n\/* File Input *\/\n.wcpnm-file-upload input[type=\"file\"] {\n    background: none !important;\n    border: none !important;\n    padding: 0 !important;\n    box-shadow: none !important;\n    color: #4b5563 !important;\n}\n.wcpnm-file-upload input[type=\"file\"]::file-selector-button {\n    background-color: #f3f4f6;\n    border: 1px solid #d1d5db;\n    border-radius: 6px;\n    padding: 8px 16px;\n    color: #374151;\n    font-weight: 600;\n    cursor: pointer;\n    margin-right: 12px;\n    transition: background 0.2s;\n}\n.wcpnm-file-upload input[type=\"file\"]::file-selector-button:hover {\n    background-color: #e5e7eb;\n}\n\n\/* Button *\/\n.wcpnm-submit-btn {\n    padding: 16px 40px;\n    font-size: 18px;\n    background-color: #0d9488;\n    color: #ffffff;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n    font-weight: 700;\n    transition: all 0.2s;\n    width: 100%;\n    max-width: 300px;\n}\n.wcpnm-submit-btn:hover { \n    background-color: #0f766e; \n}\n\n@media (max-width: 640px) {\n    .wcpnm-wrapper { padding: 20px; }\n    .wcpnm-bank-card-body {\n        flex-direction: column;\n        gap: 8px;\n        padding-left: 0;\n    }\n    .wcpnm-bank-name, .wcpnm-bank-acc, .wcpnm-bank-owner {\n        flex: auto;\n    }\n}\n<\/style>\n\n<div class=\"wcpnm-wrapper\">\n    <div class=\"wcpnm-header\">\n        <h2>Payment Notify<\/h2>\n    <\/div>\n\n    \n    <form method=\"post\" action=\"\" enctype=\"multipart\/form-data\">\n        <input type=\"hidden\" id=\"wcpnm_nonce\" name=\"wcpnm_nonce\" value=\"0504e785aa\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/725\" \/>\n        <div class=\"wcpnm-row\">\n            <div class=\"wcpnm-col\">\n                <label>\u0e0a\u0e37\u0e48\u0e2d<\/label>\n                <input type=\"text\" name=\"wcpnm_name\" value=\"\" required>\n            <\/div>\n            <div class=\"wcpnm-col\">\n                <label>\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/label>\n                <input type=\"text\" name=\"wcpnm_phone\" value=\"\" required>\n            <\/div>\n        <\/div>\n\n        <div class=\"wcpnm-row\">\n            <div class=\"wcpnm-col\">\n                <label>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e31\u0e48\u0e07\u0e0b\u0e37\u0e49\u0e2d<\/label>\n                                    <input type=\"text\" name=\"wcpnm_order_id\" value=\"\"  placeholder=\"\u0e40\u0e0a\u0e48\u0e19 520\" required>\n                            <\/div>\n            <div class=\"wcpnm-col\">\n                <label>\u0e22\u0e2d\u0e14\u0e42\u0e2d\u0e19<\/label>\n                <input type=\"number\" step=\"0.01\" name=\"wcpnm_amount\" id=\"wcpnm_amount_input\" value=\"\" required>\n            <\/div>\n        <\/div>\n\n        <div class=\"wcpnm-bank-section\">\n            <label>\u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e17\u0e35\u0e48\u0e42\u0e2d\u0e19<\/label>\n            <div class=\"wcpnm-bank-list\">\n                                <label class=\"wcpnm-bank-card\">\n                    <div class=\"wcpnm-bank-card-header\">\n                        <input type=\"radio\" name=\"wcpnm_bank\" value=\"KBank \u0e01\u0e2a\u0e34\u0e01\u0e23\u0e44\u0e17\u0e22 748-2-49024-1\"  checked='checked' required>\n                                                    <img decoding=\"async\" src=\"https:\/\/promotions.co.th\/wp-content\/uploads\/2019\/03\/kbank-logo.png\" class=\"wcpnm-bank-img-logo\" alt=\"KBank \u0e01\u0e2a\u0e34\u0e01\u0e23\u0e44\u0e17\u0e22\" onerror=\"this.style.display=&#039;none&#039;; this.nextElementSibling.style.display=&#039;inline-flex&#039;;\" title=\"\">\n                            <span class=\"wcpnm-bank-fallback-logo\" style=\"display:none;\">KBa<\/span>\n                                            <\/div>\n                    <div class=\"wcpnm-bank-card-body\">\n                        <div class=\"wcpnm-bank-name\">KBank \u0e01\u0e2a\u0e34\u0e01\u0e23\u0e44\u0e17\u0e22<\/div>\n                        <div class=\"wcpnm-bank-acc\">748-2-49024-1<\/div>\n                        <div class=\"wcpnm-bank-owner\">\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e27\u0e35\u0e41\u0e01\u0e14\u0e0b\u0e4c \u0e04\u0e2d\u0e23\u0e4c\u0e1b\u0e2d\u0e40\u0e23\u0e0a\u0e31\u0e48\u0e19 \u0e08\u0e33\u0e01\u0e31\u0e14<\/div>\n                    <\/div>\n                <\/label>\n                            <\/div>\n        <\/div>\n\n        <div class=\"wcpnm-row\">\n            <div class=\"wcpnm-col\">\n                <label>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e42\u0e2d\u0e19<\/label>\n                <input type=\"date\" name=\"wcpnm_date\" value=\"2026-07-08\" max=\"2026-07-08\" required>\n            <\/div>\n            <div class=\"wcpnm-col\">\n                <label>\u0e40\u0e27\u0e25\u0e32<\/label>\n                <input type=\"time\" name=\"wcpnm_time\" value=\"22:55\" required>\n            <\/div>\n        <\/div>\n\n        <div class=\"wcpnm-row\">\n            <div class=\"wcpnm-col wcpnm-file-upload\">\n                <label>\u0e2b\u0e25\u0e31\u0e01\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2d\u0e19<\/label>\n                <input type=\"file\" name=\"wcpnm_slip\" accept=\"image\/*\" required>\n            <\/div>\n        <\/div>\n\n        <div style=\"text-align: center; margin-top: 20px;\">\n            <button type=\"submit\" name=\"wcpnm_submit\" class=\"wcpnm-submit-btn\">\u0e41\u0e08\u0e49\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/button>\n        <\/div>\n    <\/form>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    var orderDropdown = document.getElementById('wcpnm_order_dropdown');\n    var amountInput = document.getElementById('wcpnm_amount_input');\n    \n    if(orderDropdown && amountInput) {\n        orderDropdown.addEventListener('change', function() {\n            var selectedOption = this.options[this.selectedIndex];\n            var newAmount = selectedOption.getAttribute('data-amt');\n            if(newAmount) {\n                amountInput.value = newAmount;\n            }\n        });\n    }\n});\n<\/script>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n\t\t<\/div>\n\n\t\t\n<style>\n#section_1356554241 {\n  padding-top: 30px;\n  padding-bottom: 30px;\n  background-color: rgb(243, 243, 243);\n}\n<\/style>\n\t<\/section>\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-725","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.vgadz.com\/en\/wp-json\/wp\/v2\/pages\/725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vgadz.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vgadz.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vgadz.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vgadz.com\/en\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":1,"href":"https:\/\/www.vgadz.com\/en\/wp-json\/wp\/v2\/pages\/725\/revisions"}],"predecessor-version":[{"id":743012,"href":"https:\/\/www.vgadz.com\/en\/wp-json\/wp\/v2\/pages\/725\/revisions\/743012"}],"wp:attachment":[{"href":"https:\/\/www.vgadz.com\/en\/wp-json\/wp\/v2\/media?parent=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}