{"id":602,"date":"2026-04-19T19:19:00","date_gmt":"2026-04-19T19:19:00","guid":{"rendered":"https:\/\/demo.webinwp.com\/cod\/?page_id=602"},"modified":"2026-04-19T19:19:43","modified_gmt":"2026-04-19T19:19:43","slug":"checkout","status":"publish","type":"page","link":"https:\/\/demo.webinwp.com\/cod\/checkout\/","title":{"rendered":"checkout"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"602\" class=\"elementor elementor-602\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63456d5 e-flex e-con-boxed e-con e-parent\" data-id=\"63456d5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e8a5939 elementor-widget elementor-widget-shortcode\" data-id=\"e8a5939\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"wcod-checkout-1\" style=\"font-family:'Inter',sans-serif;max-width:960px;margin:0 auto;\" dir=\"ltr\">\n\n    <!-- Empty cart notice (hidden until JS runs) -->\n    <div id=\"wcod-checkout-1-empty\" style=\"display:none;text-align:center;padding:48px 20px;\">\n        <p style=\"font-size:17px;font-weight:700;color:#374151;margin:0 0 12px;\">Your cart is empty.<\/p>\n                <a href=\"https:\/\/demo.webinwp.com\/cod\/cart\/\"\n           style=\"display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:#000000;color:#ffffff;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none;\">\n            Go to Cart        <\/a>\n            <\/div>\n\n    <div id=\"wcod-checkout-1-content\" style=\"display:none;display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start;\">\n\n        <!-- \u2500\u2500 Left: Checkout Form \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        <div style=\"background:#fff;border-radius:12px;box-shadow:0 1px 8px rgba(0,0,0,.07);padding:28px;\">\n            <h2 style=\"font-size:20px;font-weight:800;color:#111827;margin:0 0 20px;\">Your Details<\/h2>\n\n            <form id=\"wcod-checkout-1-form\" method=\"post\">\n                <input type=\"text\" name=\"website\" style=\"display:none;\" tabindex=\"-1\" autocomplete=\"off\" \/>\n\n                                <div style=\"margin-bottom:16px;\">\n                                        <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#374151;\">Full Name<\/label>\n                    \n                                        <input type=\"text\" name=\"full_name\"\n                           placeholder=\"Enter your full name\"\n                           required                           style=\"width:100%;padding:10px 14px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;outline:none;box-sizing:border-box;font-family:'Inter',sans-serif;transition:border-color .15s;\"\n                           onfocus=\"this.style.borderColor='#000000'\" onblur=\"this.style.borderColor='#d1d5db'\" \/>\n                                    <\/div>\n                                <div style=\"margin-bottom:16px;\">\n                                        <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#374151;\">Phone Number<\/label>\n                    \n                                        <input type=\"tel\" name=\"phone\"\n                           placeholder=\"Enter your phone number\"\n                           required                           style=\"width:100%;padding:10px 14px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;outline:none;box-sizing:border-box;font-family:'Inter',sans-serif;transition:border-color .15s;\"\n                           onfocus=\"this.style.borderColor='#000000'\" onblur=\"this.style.borderColor='#d1d5db'\" \/>\n                                    <\/div>\n                                <div style=\"margin-bottom:16px;\">\n                                        <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#374151;\">City<\/label>\n                    \n                                        <input type=\"text\" name=\"city\"\n                           placeholder=\"Enter your city\"\n                                                      style=\"width:100%;padding:10px 14px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;outline:none;box-sizing:border-box;font-family:'Inter',sans-serif;transition:border-color .15s;\"\n                           onfocus=\"this.style.borderColor='#000000'\" onblur=\"this.style.borderColor='#d1d5db'\" \/>\n                                    <\/div>\n                                <div style=\"margin-bottom:16px;\">\n                                        <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#374151;\">Address<\/label>\n                    \n                                        <textarea name=\"address\" rows=\"2\" placeholder=\"Enter your full address\"\n                              style=\"width:100%;padding:10px 14px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;outline:none;box-sizing:border-box;resize:vertical;font-family:'Inter',sans-serif;transition:border-color .15s;\"\n                              onfocus=\"this.style.borderColor='#000000'\" onblur=\"this.style.borderColor='#d1d5db'\"><\/textarea>\n\n                                    <\/div>\n                                <div style=\"margin-bottom:16px;\">\n                                        <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#374151;\">Coupon Code<\/label>\n                    \n                                        <div style=\"display:flex;gap:8px;\">\n                        <input type=\"text\" name=\"coupon_code\" id=\"wcod-checkout-1-coupon\"\n                               placeholder=\"Enter coupon code\"\n                               style=\"flex:1;padding:10px 14px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;outline:none;font-family:'Inter',sans-serif;transition:border-color .15s;\"\n                               onfocus=\"this.style.borderColor='#000000'\" onblur=\"this.style.borderColor='#d1d5db'\" \/>\n                        <button type=\"button\" id=\"wcod-checkout-1-apply-coupon\"\n                                style=\"padding:10px 16px;background:#000000;color:#ffffff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;\">\n                            Apply                        <\/button>\n                    <\/div>\n                    <div id=\"wcod-checkout-1-coupon-msg\" style=\"margin-top:6px;font-size:12px;\"><\/div>\n\n                                    <\/div>\n                \n                <!-- Status message -->\n                <div id=\"wcod-checkout-1-msg\" style=\"display:none;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:600;margin-bottom:16px;\"><\/div>\n\n                <!-- Submit -->\n                <button type=\"submit\" id=\"wcod-checkout-1-submit\"\n                        style=\"width:100%;padding:15px;background:#000000;color:#ffffff;border:none;border-radius:8px;font-size:16px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity .15s;\"\n                        onmouseover=\"this.style.opacity='.88'\" onmouseout=\"this.style.opacity='1'\">\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                    Place Order (Cash on Delivery)                <\/button>\n            <\/form>\n        <\/div>\n\n        <!-- \u2500\u2500 Right: Order Summary \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        <div style=\"background:#fff;border-radius:12px;box-shadow:0 1px 8px rgba(0,0,0,.07);padding:24px;position:sticky;top:80px;\">\n            <h3 style=\"font-size:15px;font-weight:700;color:#111827;margin:0 0 16px;\">Order Summary<\/h3>\n            <div id=\"wcod-checkout-1-order-items\" style=\"margin-bottom:16px;\"><\/div>\n            <div style=\"border-top:1px solid #f3f4f6;padding-top:12px;\">\n                <div style=\"display:flex;justify-content:space-between;font-size:13px;color:#6b7280;margin-bottom:8px;\">\n                    <span>Subtotal<\/span>\n                    <span id=\"wcod-checkout-1-subtotal\">\u2014<\/span>\n                <\/div>\n                <div style=\"display:flex;justify-content:space-between;font-size:13px;color:#6b7280;margin-bottom:8px;\" id=\"wcod-checkout-1-discount-row\" style=\"display:none;\">\n                    <span>Discount<\/span>\n                    <span id=\"wcod-checkout-1-discount\" style=\"color:#10b981;font-weight:700;\"><\/span>\n                <\/div>\n                <div style=\"display:flex;justify-content:space-between;font-size:13px;color:#6b7280;margin-bottom:8px;\">\n                    <span>Shipping<\/span>\n                    <span id=\"wcod-checkout-1-shipping\">Free<\/span>\n                <\/div>\n                <div style=\"display:flex;justify-content:space-between;font-size:17px;font-weight:800;color:#111827;margin-top:4px;\">\n                    <span>Total<\/span>\n                    <span id=\"wcod-checkout-1-total\" style=\"color:#000000;\"><\/span>\n                <\/div>\n            <\/div>\n                        <a href=\"https:\/\/demo.webinwp.com\/cod\/cart\/\"\n               style=\"display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-size:13px;color:#000000;text-decoration:none;\">\n                <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n                Edit Cart            <\/a>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function($){\n    var uid      = 'wcod-checkout-1';\n    var primary  = '#000000';\n    var radius   = 8;\n    var currency = '$';\n    var curPos   = 'before';\n    var flatRate = 0;\n    var discount = 0;\n\n    function fmt(v){ v = parseFloat(v).toFixed(2); return curPos === 'before' ? currency + v : v + currency; }\n    function getCart(){ try{ return JSON.parse(localStorage.getItem('wcod_cart')||'[]'); }catch(e){ return []; } }\n    function escHtml(s){ var d=document.createElement('div'); d.appendChild(document.createTextNode(String(s||''))); return d.innerHTML; }\n\n    function cartSubtotal(cart){\n        return cart.reduce(function(s,i){ return s + parseFloat(i.price) * parseInt(i.qty||1); }, 0);\n    }\n\n    function renderSummary(disc) {\n        discount = disc || 0;\n        var cart     = getCart();\n        var sub      = cartSubtotal(cart);\n        var total    = Math.max(0, sub - discount + flatRate);\n        var itemsEl  = document.getElementById(uid + '-order-items');\n        var subEl    = document.getElementById(uid + '-subtotal');\n        var totEl    = document.getElementById(uid + '-total');\n        var discRow  = document.getElementById(uid + '-discount-row');\n        var discEl   = document.getElementById(uid + '-discount');\n\n        if (itemsEl) {\n            var html = '';\n            cart.forEach(function(item){\n                var attrsHtml = '';\n                if (item.attrs && Object.keys(item.attrs).length) {\n                    Object.keys(item.attrs).forEach(function(k){\n                        attrsHtml += '<span style=\"font-size:11px;color:#9ca3af;margin-left:4px;\">' + escHtml(item.attrs[k]) + '<\/span>';\n                    });\n                }\n                html += '<div style=\"display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f3f4f6;\">'\n                      + '<div style=\"width:44px;height:44px;border-radius:' + radius + 'px;overflow:hidden;background:#f3f4f6;flex-shrink:0;\">'\n                      + (item.image ? '<img decoding=\"async\" src=\"' + escHtml(item.image) + '\" style=\"width:100%;height:100%;object-fit:cover;\" \/>' : '')\n                      + '<\/div>'\n                      + '<div style=\"flex:1;min-width:0;\"><div style=\"font-size:13px;font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' + escHtml(item.title) + attrsHtml + '<\/div>'\n                      + '<div style=\"font-size:12px;color:#9ca3af;\">\u00d7' + parseInt(item.qty||1) + '<\/div><\/div>'\n                      + '<div style=\"font-size:14px;font-weight:700;color:' + primary + ';flex-shrink:0;\">' + fmt(parseFloat(item.price)*parseInt(item.qty||1)) + '<\/div>'\n                      + '<\/div>';\n            });\n            itemsEl.innerHTML = html;\n        }\n\n        if (subEl) subEl.textContent = fmt(sub);\n        if (totEl) totEl.textContent = fmt(total);\n        if (discRow && discEl) {\n            if (discount > 0) {\n                discRow.style.display = 'flex';\n                discEl.textContent    = '-' + fmt(discount);\n            } else {\n                discRow.style.display = 'none';\n            }\n        }\n    }\n\n    function init() {\n        var cart    = getCart();\n        var empty   = document.getElementById(uid + '-empty');\n        var content = document.getElementById(uid + '-content');\n\n        if (!cart.length) {\n            if (empty)   empty.style.display   = 'block';\n            if (content) content.style.display = 'none';\n            return;\n        }\n        if (empty)   empty.style.display   = 'none';\n        if (content) content.style.display = 'grid';\n        renderSummary(0);\n    }\n\n    \/\/ Coupon\n    $('#' + uid + '-apply-coupon').on('click', function(){\n        var code = $('#' + uid + '-coupon').val().trim();\n        if (!code) return;\n        var cart    = getCart();\n        var sub     = cartSubtotal(cart);\n        var $btn    = $(this);\n        var $msg    = $('#' + uid + '-coupon-msg');\n        $btn.prop('disabled', true).text('Applying...');\n\n        $.post(typeof wcod_vars !== 'undefined' ? wcod_vars.ajax_url : 'https:\/\/demo.webinwp.com\/cod\/wp-admin\/admin-ajax.php', {\n            action: 'wcod_validate_coupon',\n            nonce: typeof wcod_vars !== 'undefined' ? wcod_vars.nonce : '',\n            coupon_code: code,\n            subtotal: sub,\n            quantity: 1\n        }, function(resp){\n            if (resp.success) {\n                discount = parseFloat(resp.data.discount_amount);\n                $msg.html('<span style=\"color:#10b981;\">' + resp.data.message + '<\/span>');\n            } else {\n                discount = 0;\n                $msg.html('<span style=\"color:#ef4444;\">' + resp.data.message + '<\/span>');\n            }\n            renderSummary(discount);\n            $btn.prop('disabled', false).text('Apply');\n        });\n    });\n\n    \/\/ Form submit\n    $('#' + uid + '-form').on('submit', function(e){\n        e.preventDefault();\n        var cart = getCart();\n        if (!cart.length) {\n            alert('Your cart is empty.');\n            return;\n        }\n        var $btn  = $('#' + uid + '-submit');\n        var $msg  = $('#' + uid + '-msg');\n        $btn.prop('disabled', true).text('Placing your order...');\n        $msg.hide();\n\n        var formData = $(this).serialize();\n        formData += '&action=wcod_cart_submit_order';\n        formData += '&nonce=' + (typeof wcod_vars !== 'undefined' ? wcod_vars.nonce : '');\n        formData += '&cart_items=' + encodeURIComponent(JSON.stringify(cart));\n        formData += '&coupon_code=' + encodeURIComponent($('#' + uid + '-coupon').val() || '');\n\n        $.post(typeof wcod_vars !== 'undefined' ? wcod_vars.ajax_url : 'https:\/\/demo.webinwp.com\/cod\/wp-admin\/admin-ajax.php', formData, function(resp){\n            if (resp.success) {\n                $msg.css({'background':'#d1fae5','color':'#065f46','display':'block'}).text(resp.data.message || 'Your order has been placed successfully!');\n                \/\/ Clear cart\n                localStorage.removeItem('wcod_cart');\n                window.dispatchEvent(new Event('wcod_cart_updated'));\n                if (resp.data.redirect_url) {\n                    setTimeout(function(){ window.location.href = resp.data.redirect_url; }, 1500);\n                }\n            } else {\n                $msg.css({'background':'#fee2e2','color':'#991b1b','display':'block'}).text(resp.data.message || 'Something went wrong. Please try again.');\n                $btn.prop('disabled', false).text('Place Order (Cash on Delivery)');\n            }\n        }).fail(function(){\n            $msg.css({'background':'#fee2e2','color':'#991b1b','display':'block'}).text('Something went wrong. Please try again.');\n            $btn.prop('disabled', false).text('Place Order (Cash on Delivery)');\n        });\n    });\n\n    init();\n    window.addEventListener('wcod_cart_updated', init);\n})(jQuery);\n<\/script>\n\n<style>\n@media (max-width: 640px) {\n    #wcod-checkout-1-content { grid-template-columns: 1fr !important; }\n    #wcod-checkout-1-content > div:last-child { position: static !important; }\n}\n<\/style>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-602","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.webinwp.com\/cod\/wp-json\/wp\/v2\/pages\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.webinwp.com\/cod\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.webinwp.com\/cod\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.webinwp.com\/cod\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.webinwp.com\/cod\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":4,"href":"https:\/\/demo.webinwp.com\/cod\/wp-json\/wp\/v2\/pages\/602\/revisions"}],"predecessor-version":[{"id":606,"href":"https:\/\/demo.webinwp.com\/cod\/wp-json\/wp\/v2\/pages\/602\/revisions\/606"}],"wp:attachment":[{"href":"https:\/\/demo.webinwp.com\/cod\/wp-json\/wp\/v2\/media?parent=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}