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 @@