diff --git a/assets/js/checkout.js b/assets/js/checkout.js index ffbdc2c..c5d13c5 100644 --- a/assets/js/checkout.js +++ b/assets/js/checkout.js @@ -33,11 +33,53 @@ document.addEventListener("DOMContentLoaded", () => { totalEl.textContent = `₹${total.toFixed(2)}`; // Unlock QR on valid form submit - form.addEventListener("submit", (e) => { + form.addEventListener("submit", async (e) => { e.preventDefault(); if (!form.checkValidity()) return; - qrWrapper.classList.remove("blurred"); + const orderBtn = document.getElementById("btn-order"); + + orderBtn.classList.add("loading"); + orderBtn.disabled = true; + + const formData = new FormData(form); + + const orderPayload = { + first_name: formData.get("first_name"), + last_name: formData.get("last_name"), + email: formData.get("email"), + phone: formData.get("phone"), + address: formData.get("address"), + city: formData.get("city"), + state: formData.get("state"), + post_code: formData.get("post_code"), + order: Cart.getCart(), + }; + + try { + const res = await fetch(".netlify/functions/order", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(orderPayload), + }); + + console.log(res); + + if (!res.ok) throw new Error("Order failed"); + + // unlock payment QR + qrWrapper.classList.remove("blurred"); + + console.log("Order created"); + } catch (err) { + console.error(err); + alert("Unable to place order. Please try again."); + } finally { + orderBtn.classList.remove("loading"); + orderBtn.disabled = false; + } }); }); diff --git a/cart.html b/cart.html index d75e961..e50975f 100644 --- a/cart.html +++ b/cart.html @@ -160,6 +160,38 @@