{"id":8610,"date":"2024-12-09T10:34:03","date_gmt":"2024-12-09T10:34:03","guid":{"rendered":"https:\/\/amdetailing.ca\/?page_id=8610"},"modified":"2025-01-10T15:25:47","modified_gmt":"2025-01-10T15:25:47","slug":"gift-certificate","status":"publish","type":"page","link":"https:\/\/amdetailing.ca\/index.php\/gift-certificate\/","title":{"rendered":"Gift Certificate"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8610\" class=\"elementor elementor-8610\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28be38e e-flex e-con-boxed e-con e-parent\" data-id=\"28be38e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7a478cb e-con-full e-flex e-con e-child\" data-id=\"7a478cb\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc7e5f7 elementor-widget__width-inherit elementor-widget-tablet__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"cc7e5f7\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <form id=\"payment-form\" style=\"max-width: 600px; margin: 10px auto; padding: 25px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\">\n            <h2 style=\"text-align: center; margin-bottom: 20px; color: #263788; font-size: 35px; font-weight: 600;\">Request a Gift Certificate<\/h2>\n            \n            <label for=\"user-name\" style=\"font-weight: bold;\">Name:<\/label>\n            <input type=\"text\" id=\"user-name\" name=\"name\" required placeholder=\"Enter your full name\" style=\"width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px;\">\n\n            <label for=\"user-email\" style=\"font-weight: bold;\">Email:<\/label>\n            <input type=\"email\" id=\"user-email\" name=\"email\" required placeholder=\"Enter your email address\" style=\"width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px;\">\n\n            <label for=\"category-selection\" style=\"font-weight: bold;\">Choose a Category:<\/label>\n            <select id=\"category-selection\" name=\"category\" required style=\"width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px;\">\n                <option value=\"175\" data-description=\"This is for sedan.\">Sedan ($175)<\/option>\n                <option value=\"250\" data-description=\"This is for a pickup truck.\">7-Seater Van\/Pickup Truck($250)<\/option>\n            <\/select>\n\n            <p id=\"category-description\" style=\"color: #555; text-transform: uppercase; font-weight: 700;\n  font-size: 16px;\">complete interior detailing & <br> complementary exterior wax<\/p>\n            <!-- <p style=\"font-size: 16px; font-weight: bold;\">Total Amount: $<span id=\"total-amount\">200<\/span><\/p> -->\n\n            <button type=\"button\" id=\"submit-payment\" style=\"width: 100%; padding: 12px; background-color: #263788; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 10px; transition: background-color 0.3s;\">\n                Buy Now\n            <\/button>\n        <\/form>\n        <script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\n        <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                const stripe = Stripe('pk_live_51PtFsl08UOiveYAhbpoF8re79RJH5NC6n72UQvsorwYX8VvGCIV40SCwrCJ77EoB5BIYYXySzGz4G4dMhi4Vtiqj00PrxhPbTW');\n                const categorySelect = document.getElementById('category-selection');\n                const categoryDescription = document.getElementById('category-description');\n                const totalAmountSpan = document.getElementById('total-amount');\n                const submitButton = document.getElementById('submit-payment');\n                const emailInput = document.getElementById('user-email');\n                const nameInput = document.getElementById('user-name');\n\n                \/\/ Update description and total amount based on category selection\n                categorySelect.addEventListener('change', function () {\n                    const selectedOption = categorySelect.options[categorySelect.selectedIndex];\n                    categoryDescription.textContent = selectedOption.dataset.description;\n                    totalAmountSpan.textContent = selectedOption.value;\n                });\n\n                \/\/ Form submission handler\n                submitButton.addEventListener('click', async function (event) {\n                    event.preventDefault(); \/\/ Prevent form submission\n\n                    \/\/ Get form values\n                    const name = nameInput.value.trim();\n                    const email = emailInput.value.trim();\n                    const categoryValue = categorySelect.value;\n                    const categoryText = categorySelect.options[categorySelect.selectedIndex].text;\n\n                    \/\/ Validation: Check if name and email are provided\n                    if (!name || !email) {\n                        alert('Please fill in both name and email!');\n                        return;\n                    }\n\n                    \/\/ Validate email format\n                    const emailRegex = \/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,6}$\/;\n                    if (!emailRegex.test(email)) {\n                        alert('Invalid email format.');\n                        return;\n                    }\n\n                    \/\/ Create form data to send to the server\n                    const formData = {\n                        name: name,\n                        email: email,\n                        amount: categoryValue,\n                        category: categoryText,\n                    };\n\n                    try {\n                        \/\/ Send data to the server\n                        const response = await fetch('https:\/\/amdetailing.ca\/index.php\/wp-json\/custom-payment\/v1\/process', {\n                            method: 'POST',\n                            body: JSON.stringify(formData),\n                            headers: { 'Content-Type': 'application\/json' },\n                        });\n\n                        const result = await response.json();\n                        if (response.ok) {\n                            \/\/ Call email function if payment is successful\n                            sendPaymentEmails(formData);\n\n                            stripe.redirectToCheckout({ sessionId: result.session_id });\n                        } else {\n                            alert('Error: ' + result.message || 'An unexpected error occurred.');\n                        }\n                    } catch (error) {\n                        console.error('Error:', error);\n                        alert('There was an error processing your payment.');\n                    }\n                });\n\n                \/\/ Function to send email to both admin and user\n                function sendPaymentEmails(formData) {\n                    const adminEmail = 'admin@example.com';  \/\/ Set admin email here\n                    const subjectAdmin = 'New Payment Received';\n                    const subjectUser = 'Payment Confirmation';\n\n                    \/\/ Admin Email Body\n                    const adminBody = `\n                        <h2>A new payment has been received<\/h2>\n                        <p><strong>Name:<\/strong> ${formData.name}<\/p>\n                        <p><strong>Email:<\/strong> ${formData.email}<\/p>\n                        <p><strong>Amount:<\/strong> $${formData.amount}<\/p>\n                        <p><strong>Category:<\/strong> ${formData.category}<\/p>\n                    `;\n\n                    \/\/ User Email Body\n                    const userBody = `\n                        <h2>Thank you for your payment<\/h2>\n                        <p>Hello ${formData.name},<\/p>\n                        <p>Thank you for your payment of $${formData.amount}. Your payment has been successfully processed.<\/p>\n                    `;\n\n                    \/\/ Send emails (can be customized as needed)\n                    fetch('https:\/\/amdetailing.ca\/index.php\/wp-json\/custom-payment\/v1\/send-emails', {\n                        method: 'POST',\n                        body: JSON.stringify({\n                            userEmail: formData.email,\n                            adminEmail: adminEmail,\n                            adminSubject: subjectAdmin,\n                            userSubject: subjectUser,\n                            adminBody: adminBody,\n                            userBody: userBody,\n                        }),\n                        headers: {\n                            'Content-Type': 'application\/json',\n                        },\n                    });\n                }\n            });\n        <\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c8088b elementor-widget__width-initial elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"4c8088b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2048\" height=\"2048\" src=\"https:\/\/amdetailing.ca\/wp-content\/uploads\/2024\/12\/C-_Users_RIO_Downloads_Image_s701gs701gs701gs.jpg\" class=\"elementor-animation-wobble-horizontal attachment-full size-full wp-image-8647\" alt=\"\" srcset=\"https:\/\/amdetailing.ca\/wp-content\/uploads\/2024\/12\/C-_Users_RIO_Downloads_Image_s701gs701gs701gs.jpg 2048w, https:\/\/amdetailing.ca\/wp-content\/uploads\/2024\/12\/C-_Users_RIO_Downloads_Image_s701gs701gs701gs-300x300.jpg 300w, https:\/\/amdetailing.ca\/wp-content\/uploads\/2024\/12\/C-_Users_RIO_Downloads_Image_s701gs701gs701gs-1024x1024.jpg 1024w, https:\/\/amdetailing.ca\/wp-content\/uploads\/2024\/12\/C-_Users_RIO_Downloads_Image_s701gs701gs701gs-150x150.jpg 150w, https:\/\/amdetailing.ca\/wp-content\/uploads\/2024\/12\/C-_Users_RIO_Downloads_Image_s701gs701gs701gs-768x768.jpg 768w, https:\/\/amdetailing.ca\/wp-content\/uploads\/2024\/12\/C-_Users_RIO_Downloads_Image_s701gs701gs701gs-1536x1536.jpg 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8610","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/amdetailing.ca\/index.php\/wp-json\/wp\/v2\/pages\/8610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amdetailing.ca\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/amdetailing.ca\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/amdetailing.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amdetailing.ca\/index.php\/wp-json\/wp\/v2\/comments?post=8610"}],"version-history":[{"count":0,"href":"https:\/\/amdetailing.ca\/index.php\/wp-json\/wp\/v2\/pages\/8610\/revisions"}],"wp:attachment":[{"href":"https:\/\/amdetailing.ca\/index.php\/wp-json\/wp\/v2\/media?parent=8610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}