• apps/backend/src/app/api/latest/payments/purchases/create-purchase-url/route.ts
• apps/backend/src/app/api/latest/payments/purchases/purchase-session/route.tsx
• apps/backend/src/app/api/latest/payments/purchases/validate-code/route.ts
• apps/backend/src/app/api/latest/payments/purchases/verification-code-handler.tsx
• apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx
• apps/dashboard/src/components/payments/checkout.tsx
• apps/e2e/tests/backend/endpoints/api/v1/payments/before-offer-to-product-rename/outdated--validate-code.test.ts
• apps/e2e/tests/backend/endpoints/api/v1/payments/validate-code.test.ts

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx (1)

1569-1572: Consider adding loading state for better UX.

The removal of the loading state creates two concerns:

1. Users lack visual feedback during the update operation
2. Multiple rapid clicks could trigger concurrent update requests

Consider restoring the loading state:

+const [isUpdatingTestMode, setIsUpdatingTestMode] = useState(false);
+
 const handleToggleTestMode = async (enabled: boolean) => {
+  if (isUpdatingTestMode) return;
+  setIsUpdatingTestMode(true);
   try {
     await project.updateConfig({ "payments.testMode": enabled });
     toast({ title: enabled ? "Test mode enabled" : "Test mode disabled" });
   } catch (error) {
     toast({ 
       title: "Failed to update test mode", 
       description: error instanceof Error ? error.message : "An error occurred",
       variant: "destructive" 
     });
+  } finally {
+    setIsUpdatingTestMode(false);
   }
 };

Then update the Switch component:

 <Switch
   id={testModeSwitchId}
   checked={paymentsConfig.testMode === true}
   onCheckedChange={(checked) => handleToggleTestMode(checked)}
+  disabled={isUpdatingTestMode}
 />

apps/dashboard/src/components/payments/checkout.tsx (2)

101-112: Consider using Alert component for blocking error states.

The guard UI correctly prevents checkout when charges are disabled, but per the coding guidelines for this directory pattern, blocking alerts and errors should use Alert components rather than Typography with variant styling.

As per coding guidelines.

Apply this diff to use the Alert component:

+import { Alert, AlertDescription, AlertTitle, Button, Typography } from "@stackframe/stack-ui";
-import { Button, Typography } from "@stackframe/stack-ui";

   if (!chargesEnabled) {
     return (
       <div className="flex flex-col gap-4 max-w-md w-full p-6 rounded-md bg-background">
-        <div className="space-y-1">
-          <Typography type="h3" variant="destructive">Payments not enabled</Typography>
-          <p className="text-sm text-muted-foreground">
-            This project does not have payments enabled yet. Please contact the app developer to finish setting up payments.
-          </p>
-        </div>
+        <Alert variant="destructive">
+          <AlertTitle>Payments not enabled</AlertTitle>
+          <AlertDescription>
+            This project does not have payments enabled yet. Please contact the app developer to finish setting up payments.
+          </AlertDescription>
+        </Alert>
       </div>
     );
   }

---

118-118: Remove redundant disabled condition.

The !chargesEnabled check in the Submit button's disabled condition is unreachable because of the early return guard at lines 101-112. When !chargesEnabled is true, the component returns early and never renders this button.

Apply this diff to remove the redundant check:

       <Button
-        disabled={!stripe || !elements || disabled || !chargesEnabled}
+        disabled={!stripe || !elements || disabled}
         onClick={handleSubmit}
       >

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro