{"id":867,"date":"2025-05-20T15:40:16","date_gmt":"2025-05-20T14:40:16","guid":{"rendered":"https:\/\/geonovalabs.com\/?page_id=867"},"modified":"2025-06-06T00:40:21","modified_gmt":"2025-06-05T23:40:21","slug":"payment-page","status":"publish","type":"page","link":"https:\/\/geonovalabs.com\/index.php\/payment-page\/","title":{"rendered":"Make Payment"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"867\" class=\"elementor elementor-867\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9190ab0 e-con-full e-flex e-con e-parent\" data-id=\"9190ab0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ce757c elementor-widget elementor-widget-html\" data-id=\"7ce757c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"container py-4\">\r\n  <div class=\"row justify-content-center\">\r\n    <div class=\"col-lg-10 col-xl-12\">\r\n      <div class=\"card shadow-sm\">\r\n        <div class=\"card-body p-4\">\r\n          <form id=\"paymentForm\" class=\"needs-validation\" novalidate>\r\n            <!-- Personal Information -->\r\n            <div class=\"mb-4\">\r\n              <h5 class=\"mb-3\">Personal Details<\/h5>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-md-6\">\r\n                  <label for=\"firstName\" class=\"form-label\">First Name*<\/label>\r\n                  <input type=\"text\" class=\"form-control form-control-lg\" id=\"firstName\" required>\r\n                  <div class=\"invalid-feedback\">\r\n                    Please enter your first name.\r\n                  <\/div>\r\n                <\/div>\r\n                <div class=\"col-md-6\">\r\n                  <label for=\"lastName\" class=\"form-label\">Last Name*<\/label>\r\n                  <input type=\"text\" class=\"form-control form-control-lg\" id=\"lastName\" required>\r\n                  <div class=\"invalid-feedback\">\r\n                    Please enter your last name.\r\n                  <\/div>\r\n                <\/div>\r\n                <div class=\"col-md-6\">\r\n                  <label for=\"email\" class=\"form-label\">Email*<\/label>\r\n                  <input type=\"email\" class=\"form-control form-control-lg\" id=\"email\" required>\r\n                  <div class=\"invalid-feedback\">\r\n                    Please enter a valid email address.\r\n                  <\/div>\r\n                <\/div>\r\n                <div class=\"col-md-6\">\r\n                  <label for=\"phone\" class=\"form-label\">Phone Number*<\/label>\r\n                  <input type=\"tel\" class=\"form-control form-control-lg\" id=\"phone\" required>\r\n                  <div class=\"invalid-feedback\">\r\n                    Please enter your phone number.\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Payment Purpose -->\r\n            <div class=\"mb-4\"> <br>\r\n              <h5 class=\"mb-3\">Payment Details<\/h5>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label for=\"paymentPurpose\" class=\"form-label\">What are you paying for?*<\/label>\r\n                  <select class=\"form-select form-select-lg\" id=\"paymentPurpose\" required>\r\n                    <option value=\"\" selected disabled>Select an option<\/option>\r\n                    <option value=\"website\">Website Development<\/option>\r\n                    <option value=\"webhosting\">Web Hosting<\/option>\r\n                    <option value=\"maintenance\">Website Maintenance<\/option>\r\n                    <option value=\"consulting\">Consulting<\/option>\r\n                    <option value=\"other\">Other Service<\/option>\r\n                  <\/select>\r\n                  <div class=\"invalid-feedback\">\r\n                    Please select what you're paying for.\r\n                  <\/div>\r\n                <\/div>\r\n                <div class=\"col-12\">\r\n                  <label for=\"amount\" class=\"form-label\">Amount (ZMW)*<\/label>\r\n                  <div class=\"input-group\">\r\n                    <span class=\"input-group-text input-group-text-lg\">ZMW<\/span>\r\n                    <input type=\"number\" class=\"form-control form-control-lg\" id=\"amount\" min=\"1\" step=\"0.01\" required>\r\n                  <\/div>\r\n                  <div class=\"invalid-feedback\">\r\n                    Please enter a valid amount.\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <br>\r\n            <!-- Submit Button -->\r\n            <div class=\"d-grid mt-4\">\r\n              <button class=\"btn btn-primary btn-lg py-3\" type=\"button\" id=\"payButton\" style=\"background-color:#0d3950\">Submit & Pay<\/button>\r\n            <\/div>\r\n          <\/form>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Bootstrap Icons -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.10.0\/font\/bootstrap-icons.css\">\r\n\r\n<!-- Bootstrap 5 JS Bundle with Popper -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n\r\n<!-- Lenco Payment Script -->\r\n<script src=\"https:\/\/pay.lenco.co\/js\/v1\/inline.js\"><\/script>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    const paymentForm = document.getElementById('paymentForm');\r\n    const payButton = document.getElementById('payButton');\r\n    \r\n    \/\/ Form validation function\r\n    function validateForm() {\r\n        if (!paymentForm.checkValidity()) {\r\n            paymentForm.classList.add('was-validated');\r\n            return false;\r\n        }\r\n        return true;\r\n    }\r\n    \r\n    function processPayment() {\r\n        if (!validateForm()) {\r\n            return;\r\n        }\r\n        \r\n        \/\/ Disable button and show loading state\r\n        payButton.disabled = true;\r\n        payButton.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"><\/span> Processing...';\r\n        \r\n        \/\/ Get form values\r\n        const firstName = document.getElementById('firstName').value;\r\n        const lastName = document.getElementById('lastName').value;\r\n        const email = document.getElementById('email').value;\r\n        const phone = document.getElementById('phone').value;\r\n        const amount = parseFloat(document.getElementById('amount').value).toFixed(2);\r\n        const paymentPurpose = document.getElementById('paymentPurpose').value;\r\n        \r\n        \/\/ Store form data for later use\r\n        const formData = {\r\n            firstName,\r\n            lastName,\r\n            email,\r\n            phone,\r\n            amount,\r\n            purpose: paymentPurpose\r\n        };\r\n\r\n        LencoPay.getPaid({\r\n            key: 'pub-60f50465be5796832bdb809484fe94f326397ad93ac60ffa',\r\n            reference: 'PAY-' + Date.now(),\r\n            email: email,\r\n            amount: amount,\r\n            currency: \"ZMW\",\r\n            channels: [\"card\", \"mobile-money\"],\r\n            customer: {\r\n                firstName: firstName,\r\n                lastName: lastName,\r\n                phone: phone\r\n            },\r\n            metadata: {\r\n                service_type: paymentPurpose,\r\n                customer_email: email\r\n            },\r\n            onSuccess: function(reference) {\r\n                \/\/ Save payment data to your server\r\n                fetch(\"https:\/\/geonovalabs.com\/api\/save-payment.php\", {\r\n                    method: \"POST\",\r\n                    headers: { \"Content-Type\": \"application\/json\" },\r\n                    body: JSON.stringify(formData)\r\n                })\r\n                .then(response => response.text())\r\n                .then(result => {\r\n                    console.log(\"Server response:\", result);\r\n                    \/\/ Redirect to homepage after successful payment\r\n                    window.location.href = \"https:\/\/geonovalabs.com\";\r\n                })\r\n                .catch(error => {\r\n                    console.error(\"Error saving payment:\", error);\r\n                    \/\/ Still redirect even if save fails (since payment succeeded)\r\n                    window.location.href = \"https:\/\/geonovalabs.com\";\r\n                });\r\n            },\r\n            onClose: function () {\r\n                console.log('Payment window closed');\r\n                \/\/ Reset button state if payment wasn't completed\r\n                payButton.disabled = false;\r\n                payButton.textContent = 'Submit & Pay';\r\n            },\r\n            onError: function (error) {\r\n                console.error('Payment error:', error);\r\n                \/\/ Reset button state\r\n                payButton.disabled = false;\r\n                payButton.textContent = 'Submit & Pay';\r\n                \/\/ Show error message\r\n                alert('Payment failed: ' + (error.message || 'Please try again'));\r\n            }\r\n        });\r\n    }\r\n    \r\n    \/\/ Attach payment handler to button\r\n    payButton.addEventListener('click', processPayment);\r\n    \r\n    \/\/ Form submission handler\r\n    paymentForm.addEventListener('submit', function(event) {\r\n        event.preventDefault();\r\n        processPayment();\r\n    });\r\n});\r\n<\/script>\r\n\r\n<style>\r\n  \/* Enhanced styling for larger form *\/\r\n  .card {\r\n    border-radius: 12px;\r\n    border: none;\r\n  }\r\n  \r\n  .form-control, .form-select, .form-control-lg, .form-select-lg {\r\n    padding: 12px 18px;\r\n    border-radius: 10px;\r\n    font-size: 1.05rem;\r\n  }\r\n  \r\n  .input-group-text {\r\n    padding: 12px 18px;\r\n    font-size: 1.05rem;\r\n  }\r\n  \r\n  .btn-primary {\r\n    background-color: #0d6efd;\r\n    border: none;\r\n    padding: 14px;\r\n    border-radius: 10px;\r\n    font-weight: 500;\r\n    font-size: 1.1rem;\r\n  }\r\n  \r\n  .btn-primary:hover {\r\n    background-color: #0b5ed7;\r\n  }\r\n  \r\n  .invalid-feedback {\r\n    font-size: 0.9rem;\r\n  }\r\n  \r\n  .card-body {\r\n    padding: 2rem 2.5rem !important;\r\n  }\r\n  \r\n  h5 {\r\n    font-size: 1.3rem;\r\n    font-weight: 600;\r\n  }\r\n  \r\n  .form-label {\r\n    font-weight: 500;\r\n    margin-bottom: 8px;\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Personal Details First Name* Please enter your first name. Last Name* Please enter your last name. Email* Please enter a valid email address. Phone Number* Please enter your phone number. Payment Details What are you paying for?* Select an optionWebsite DevelopmentWeb HostingWebsite MaintenanceConsultingOther Service Please select what you&#8217;re paying for. Amount (ZMW)* ZMW Please enter [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width.php","meta":{"_acf_changed":false,"content-type":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-867","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/geonovalabs.com\/index.php\/wp-json\/wp\/v2\/pages\/867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geonovalabs.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/geonovalabs.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/geonovalabs.com\/index.php\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/geonovalabs.com\/index.php\/wp-json\/wp\/v2\/comments?post=867"}],"version-history":[{"count":71,"href":"https:\/\/geonovalabs.com\/index.php\/wp-json\/wp\/v2\/pages\/867\/revisions"}],"predecessor-version":[{"id":973,"href":"https:\/\/geonovalabs.com\/index.php\/wp-json\/wp\/v2\/pages\/867\/revisions\/973"}],"wp:attachment":[{"href":"https:\/\/geonovalabs.com\/index.php\/wp-json\/wp\/v2\/media?parent=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}