stripe setup

.env.sample

@@ -1,2 +1,3 @@
 VITE_BASE_URL=""
-VITE_DOMAIN=""
+VITE_DOMAIN=""
+VITE_STRIPE_PUBLISHABLE_KEY=""

.vscode/settings.json

@@ -2,7 +2,7 @@
   "biome.enabled": true,
 
   "editor.defaultFormatter": "biomejs.biome",
-  "editor.formatOnSave": true,
+
   "editor.codeActionsOnSave": {
     "source.organizeImports.biome": "explicit"
   },
@@ -39,5 +39,7 @@
   },
   "[css]": {
     "editor.defaultFormatter": "biomejs.biome"
-  }
+  },
+  "editor.fontSize": 16,
+  "workbench.colorTheme": "Gruvbox Dark Hard"
 }

package.json

@@ -25,6 +25,8 @@
     "@hookform/resolvers": "^5.2.2",
     "@react-three/drei": "^9.114.3",
     "@react-three/fiber": "^8.17.10",
+    "@stripe/react-stripe-js": "^5.4.1",
+    "@stripe/stripe-js": "^8.5.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.19",

pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+onlyBuiltDependencies:
+  - '@swc/core'
+  - esbuild
+  - msw
+  - sharp
+  - workerd

src/App.tsx

@@ -9,6 +9,8 @@ import { ColorProvider } from "./context/ColorContext";
 // Lazy load pages for code-splitting
 const Cart = lazy(() => import("./pages/Cart"));
 const Checkout = lazy(() => import("./pages/Checkout"));
+const Payment = lazy(() => import("./pages/Payment"));
+const OrderComplete = lazy(() => import("./pages/OrderComplete"));
 const ProductPage = lazy(() => import("./pages/Product"));
 const ProductList = lazy(() => import("./pages/ProductList"));
 const Profile = lazy(() => import("./pages/Profile"));
@@ -38,6 +40,8 @@ function App() {
                 <Route path="profile" element={<Profile />} />
                 <Route path="/cart" element={<Cart />} />
                 <Route path="/checkout" element={<Checkout />} />
+                <Route path="/payment" element={<Payment />} />
+                <Route path="/order/complete" element={<OrderComplete />} />
 
                 {/* Route to ProductPage with a dynamic product ID */}
                 <Route path="product/:id" element={<ProductPage />} />

src/context/CartContext.tsx

@@ -176,6 +176,7 @@ export function CartProvider({ children }: { children: React.ReactNode }) {
         return;
       }
       const cartId = await ensureCartId();
+
       const previous = optimisticAdd(item);
       try {
         const colorValue = item.color.startsWith("#")

src/pages/Checkout.tsx

@@ -43,6 +43,37 @@ interface ShippingCostResponse {
   shippingCost: number;
 }
 
+interface PaymentIntentResponse {
+  checkout_url?: string;
+  // API returns `clientSecret` (camelCase); accept `client_secret` as well for compatibility
+  clientSecret?: string;
+  client_secret?: string;
+  amount?: number;
+  currency?: string;
+  orderId?: string | number;
+}
+
+function isObject(val: unknown): val is Record<string, unknown> {
+  return typeof val === "object" && val !== null;
+}
+
+function parsePaymentIntentResponse(obj: unknown): PaymentIntentResponse | null {
+  if (!isObject(obj)) return null;
+  const record = obj as Record<string, unknown>;
+  const checkout_url = typeof record.checkout_url === "string" ? record.checkout_url : undefined;
+  const clientSecret = typeof record.clientSecret === "string" ? record.clientSecret : undefined;
+  const client_secret = typeof record.client_secret === "string" ? record.client_secret : undefined;
+  const amount = typeof record.amount === "number" ? record.amount : undefined;
+  const currency = typeof record.currency === "string" ? record.currency : undefined;
+  const orderId =
+    typeof record.orderId === "string" || typeof record.orderId === "number"
+      ? (record.orderId as string | number)
+      : undefined;
+  if (checkout_url || clientSecret || client_secret || amount || currency || orderId)
+    return { checkout_url, clientSecret, client_secret, amount, currency, orderId };
+  return null;
+}
+
 export default function Checkout() {
   const navigate = useNavigate();
   const [profile, setProfile] = useState<Profile | undefined>(undefined);
@@ -169,7 +200,52 @@ export default function Checkout() {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log("handleSubmit called", profile);
+    const cartId = localStorage.getItem("cartId");
+    if (!cartId) {
+      setCartError("No cartId found");
+      return;
+    }
+    setCartLoading(true);
+    setCartError(null);
+    try {
+      const res = await fetch(`${BASE_URL}/cart/${cartId}/payment-intent`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ shippingInfo, profile }),
+      });
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(`Payment intent request failed (${res.status}): ${text}`);
+      }
+      const dataJson: unknown = await res.json();
+      const data = parsePaymentIntentResponse(dataJson);
+
+      if (!data) {
+        console.warn("Unexpected payment intent response:", dataJson);
+        throw new Error("Invalid payment intent response");
+      }
+      // If backend provides a checkout URL, redirect there
+      if (data.checkout_url) {
+        navigate(data.checkout_url);
+        return;
+      }
+      // If backend returned a Stripe client secret, navigate to a route that can handle it
+      const clientSecret = data.clientSecret ?? data.client_secret;
+      if (clientSecret) {
+        // Navigate to the payment page which loads Stripe Elements and completes confirmation
+        navigate(`/payment?client_secret=${encodeURIComponent(clientSecret)}`);
+        return;
+      }
+      // Fallback: optionally navigate if order id provided
+      if (data.orderId) {
+        navigate(`/order/${data.orderId}`);
+      }
+    } catch (err: unknown) {
+      setCartError(err instanceof Error ? err.message : "Payment intent failed");
+    } finally {
+      setCartLoading(false);
+    }
   };
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: useEventEffect in 19

src/pages/OrderComplete.tsx

@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom";
+import { useEffect } from "react";
+
+export default function OrderComplete() {
+  useEffect(() => {
+    try {
+      localStorage.removeItem("cartId");
+    } catch (e) {
+      // ignore localStorage errors in some environments
+      console.log('Could not clear cartId from localStorage', e);
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12">
+      <div className="max-w-xl w-full bg-white shadow rounded-lg p-8 text-center">
+        <h1 className="text-2xl font-semibold mb-4">Thank you — your order is complete</h1>
+        <p className="text-gray-600 mb-6">
+          We received your payment. You will receive an email confirmation shortly.
+        </p>
+        <div className="flex justify-center gap-4">
+          <Link to="/" className="rounded-md bg-indigo-600 text-white px-4 py-2">
+            Back to shop
+          </Link>
+          <Link to="/profile" className="rounded-md border px-4 py-2">
+            View account
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Payment.tsx

@@ -0,0 +1,97 @@
+import { useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { loadStripe, type PaymentIntentResult } from "@stripe/stripe-js";
+import {
+  Elements,
+  PaymentElement,
+  useStripe,
+  useElements,
+} from "@stripe/react-stripe-js";
+
+const publishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY as string;
+const stripePromise = loadStripe(publishableKey);
+
+function PaymentForm() {
+  const stripe = useStripe();
+  const elements = useElements();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const result: PaymentIntentResult = await stripe.confirmPayment({
+        elements,
+        confirmParams: {
+          // You can change return_url to an order confirmation route
+          return_url: window.location.origin + "/order/complete",
+        },
+        redirect: "if_required",
+      });
+
+      if (result?.error) {
+        setError(result.error.message || "Payment confirmation failed");
+      } else if (result?.paymentIntent) {
+        // If payment succeeded or requires action handled by Stripe, navigate to a success page
+        navigate("/order/complete");
+      } else {
+        // Unknown result — navigate to a generic page or reload
+        navigate("/order/complete");
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Payment failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="max-w-lg mx-auto p-4">
+      <PaymentElement />
+      {error && <div className="text-red-600 mt-2">{error}</div>}
+      <button
+        type="submit"
+        disabled={!stripe || loading}
+        className="mt-4 w-full rounded bg-indigo-600 text-white py-2">
+        {loading ? "Processing…" : "Pay"}
+      </button>
+    </form>
+  );
+}
+
+export default function PaymentPage() {
+  const loc = useLocation();
+  const q = useMemo(() => new URLSearchParams(loc.search), [loc.search]);
+  const clientSecret = q.get("client_secret");
+
+  if (!publishableKey) {
+    return (
+      <div className="p-8 text-center text-red-600">
+        Missing Stripe publishable key. Set `VITE_STRIPE_PUBLISHABLE_KEY`.
+      </div>
+    );
+  }
+
+  if (!clientSecret) {
+    return (
+      <div className="p-8 text-center">No payment session available.</div>
+    );
+  }
+
+  const options = useMemo(() => ({ clientSecret }), [clientSecret]);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="mx-auto max-w-2xl px-4">
+        <h2 className="text-lg font-medium mb-6">Complete payment</h2>
+        <Elements stripe={stripePromise} options={options}>
+          <PaymentForm />
+        </Elements>
+      </div>
+    </div>
+  );
+}