{"id":218,"date":"2023-07-28T06:12:29","date_gmt":"2023-07-28T06:12:29","guid":{"rendered":"https:\/\/projectos-imum.org\/?page_id=218"},"modified":"2023-08-10T12:35:13","modified_gmt":"2023-08-10T12:35:13","slug":"donate","status":"publish","type":"page","link":"https:\/\/projectos-imum.org\/en\/donate\/","title":{"rendered":"Donate"},"content":{"rendered":"\n    <div class=\"contact-block\">\n        <div class=\"donation-form\">\n            <form action=\"\" method=\"post\" id=\"form\">\n                <div class=\"row\">\n                    <div class=\"col-12\">\n                        <div class=\"form-group\">\n                            <!-- Donation Details -->\n                            <input type=\"hidden\" name=\"cmd\" value=\"_donations\">\n                            <input type=\"hidden\" class=\"form-control\" name=\"item_name\" value=\"Donation for Donate\">\n                        <\/div>\n                    <\/div>\n                    <!-- Custom Fields -->\n                    <input type=\"hidden\" name=\"custom\" value=\"218\">\n                    <input type=\"hidden\" name=\"post_type\" value=\"page\">\n\n                    <!-- Payment Options -->\n                    <div class=\"col-12\">\n                        <div class=\"form-group\">\n                                                            <label>Payment Method<span class=\"text-red\">*<\/span><\/label>\n                            \n                                                            <div class=\"radio-group\">\n                                    <label><input type=\"radio\" name=\"payment_method\" value=\"mpesa\" checked> M-Pesa<\/label>\n                                    <label><input type=\"radio\" name=\"payment_method\" value=\"bank\"> Bank Deposit<\/label>\n                                <\/div>\n\n                            \n                        <\/div>\n                    <\/div>\n                    <!-- Donor Information -->\n                                            <div class=\"col-md-6\">\n                            <div class=\"form-group\">\n                                <label>First Name<span class=\"text-red\">*<\/span><\/label>\n                                <input type=\"text\" class=\"form-control\" name=\"first_name\" placeholder=\"First Name\" required>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-6\">\n                            <div class=\"form-group\">\n                                <label>Last Name<\/label>\n                                <input type=\"text\" class=\"form-control\" name=\"last_name\" placeholder=\"Last Name\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-6\">\n                            <div class=\"form-group\">\n                                <label>Email<\/label>\n                                <input type=\"email\" class=\"form-control\" name=\"email\" placeholder=\"Email\">\n                            <\/div>\n                        <\/div>\n                        <!-- Donation Amount -->\n                        <div class=\"col-md-6\">\n                            <div class=\"form-group\">\n                                <label>Donation Amount<span class=\"text-red\">*<\/span><\/label>\n                                <input type=\"text\" class=\"form-control\" name=\"amount\" placeholder=\"Donation Amount\" required>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-12\">\n                            <div class=\"form-group\">\n                                <label>Comment<\/label>\n                                <textarea placeholder=\"Comment\" class=\"form-control\" name=\"comment\"><\/textarea>\n                            <\/div>\n                        <\/div>\n\n                        <!-- M-Pesa Phone Number (Initially Hidden) -->\n                        <div class=\"col-12\" id=\"mpesaPhoneNumberField\">\n                            <div class=\"form-group\">\n                                <label>M-Pesa Phone Number<span class=\"text-red\">*<\/span><\/label>\n                                <input type=\"tel\" class=\"form-control\" name=\"mpesa_phone_number\" placeholder=\"M-Pesa Phone Number\">\n                            <\/div>\n                        <\/div>\n                        <input type=\"hidden\" name=\"currency_code\" value=\"USD\">\n                        <!-- PayPal Button -->\n                        <div class=\"col-md-6\">\n                            <div class=\"submit-btn\">\n                                <input type=\"submit\" class=\"common-btn\" value=\"Donate\">\n                                <div id=\"loader\" style=\"display: none;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/12\/loader.gif\" width=\"60px\" height=\"60px\" \/>Loading...<\/div>\n\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Toggle M-Pesa Phone Number Field based on selected payment method\n        const paymentMethodRadio = document.querySelectorAll('input[name=\"payment_method\"]');\n        const mpesaPhoneNumberField = document.getElementById('mpesaPhoneNumberField');\n\n        paymentMethodRadio.forEach(radio => {\n            radio.addEventListener('change', () => {\n                if (radio.value === 'mpesa') {\n                    mpesaPhoneNumberField.style.display = 'block';\n                } else {\n                    mpesaPhoneNumberField.style.display = 'none';\n                }\n            });\n        });\n    <\/script>\n\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const form = document.getElementById('form');\n            const submitBtn = document.getElementById('donation-submit-btn');\n            const loader = document.getElementById('loader');\n\n            form.addEventListener('submit', async function(event) {\n                \/\/ Show loader\n                loader.style.display = 'block';\n\n                \/\/ Disable the button to prevent multiple submissions\n                submitBtn.disabled = true;\n\n                \/\/ Prevent the form from submitting immediately\n                event.preventDefault();\n\n                try {\n                    \/\/ Perform your form submission logic here\n\n                    \/\/ For demonstration purposes, simulating an asynchronous call\n                    await new Promise(resolve => setTimeout(resolve, 2000));\n\n                    \/\/ Assuming your response is a success (HTTP status code 200)\n                    \/\/ Hide the loader and do other necessary actions\n                    loader.style.display = 'none';\n                } catch (error) {\n                    \/\/ On error, hide the loader and enable the submit button\n                    loader.style.display = 'none';\n                    submitBtn.disabled = false;\n                }\n            });\n        });\n    <\/script>\n\n\n<div style=\"padding-bottom:20px; padding-top:10px;\" class=\"hupso-share-buttons\"><!-- Hupso Share Buttons - https:\/\/www.hupso.com\/share\/ --><a class=\"hupso_toolbar\" href=\"https:\/\/www.hupso.com\/share\/\"><img decoding=\"async\" src=\"https:\/\/static.hupso.com\/share\/buttons\/share-medium.png\" style=\"border:0px; padding-top: 5px; float:left;\" alt=\"Share Button\"\/><\/a><script type=\"text\/javascript\">var hupso_services_t=new Array(\"Twitter\",\"Facebook\");var hupso_background_t=\"#EAF4FF\";var hupso_border_t=\"#66CCFF\";var hupso_toolbar_size_t=\"medium\";var hupso_image_folder_url = \"\";var hupso_url_t=\"\";var hupso_title_t=\"Donate\";<\/script><script type=\"text\/javascript\" src=\"https:\/\/static.hupso.com\/share\/js\/share_toolbar.js\"><\/script><!-- Hupso Share Buttons --><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/donate.php","meta":{"footnotes":""},"class_list":["post-218","page","type-page","status-publish","hentry"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/projectos-imum.org\/en\/wp-json\/wp\/v2\/pages\/218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projectos-imum.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projectos-imum.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projectos-imum.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projectos-imum.org\/en\/wp-json\/wp\/v2\/comments?post=218"}],"version-history":[{"count":11,"href":"https:\/\/projectos-imum.org\/en\/wp-json\/wp\/v2\/pages\/218\/revisions"}],"predecessor-version":[{"id":671,"href":"https:\/\/projectos-imum.org\/en\/wp-json\/wp\/v2\/pages\/218\/revisions\/671"}],"wp:attachment":[{"href":"https:\/\/projectos-imum.org\/en\/wp-json\/wp\/v2\/media?parent=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}