fix stripe payment flow

web/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

web/app/cart/page.js

@@ -11,12 +11,14 @@ import {
   useStripe,
   useElements,
 } from "@stripe/react-stripe-js";
+import { apiCompleteCheckout } from "@/lib/cartApi";
 
 const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "");
 
 function PaymentForm({ clientSecret, totalAmount, onSuccess, onCancel }) {
   const stripe = useStripe();
   const elements = useElements();
+  const { token } = useAuth();
   const [paying, setPaying] = useState(false);
   const [payError, setPayError] = useState(null);
 
@@ -34,9 +36,14 @@ function PaymentForm({ clientSecret, totalAmount, onSuccess, onCancel }) {
     if (error) {
       setPayError(error.message);
       setPaying(false);
-    } 
-    
+    }
+
     else {
+      const paymentIntentId = clientSecret.split("_secret_")[0];
+      try {
+        await apiCompleteCheckout(token, paymentIntentId);
+      } catch {
+      }
       onSuccess();
     }
   }
@@ -159,7 +166,7 @@ export default function CartPage() {
     setCheckoutLoading(true);
     setCheckoutError(null);
     try {
-      const result = await checkout("pm_card_visa");
+      const result = await checkout();
       if (result?.clientSecret) {
         setClientSecret(result.clientSecret);
         setCheckoutTotal(result.totalAmount);

web/context/CartContext.js

@@ -124,16 +124,10 @@ export function CartProvider({ children }) {
   );
 
   const checkout = useCallback(
-    async (paymentMethodId) => {
+    async () => {
       if (!token || !selectedStoreId) throw new Error("Select a store first");
-      const result = await apiCheckout(token, {
-        storeId: selectedStoreId,
-        paymentMethodId,
-      });
-      if (result?.status === "succeeded") {
-        setCart(null);
-      }
-      
+      const result = await apiCheckout(token, { storeId: selectedStoreId });
+
       return result;
     },
     [token, selectedStoreId]

web/lib/cartApi.js

@@ -73,12 +73,21 @@ export async function apiApplyCoupon(token, storeId, couponCode) {
   return handleResponse(res);
 }
 
-export async function apiCheckout(token, { storeId, paymentMethodId }) {
+export async function apiCheckout(token, { storeId }) {
   const res = await fetch(`${BASE}/checkout`, {
     method: "POST",
     headers: authHeaders(token),
-    body: JSON.stringify({ storeId, paymentMethodId }),
+    body: JSON.stringify({ storeId }),
   });
-  
+
+  return handleResponse(res);
+}
+
+export async function apiCompleteCheckout(token, paymentIntentId) {
+  const res = await fetch(`${BASE}/checkout/complete?paymentIntentId=${encodeURIComponent(paymentIntentId)}`, {
+    method: "POST",
+    headers: authHeaders(token),
+  });
+
   return handleResponse(res);
 }