From 9272bc219dfffb24baf9b4db8d4e04f19956f1af Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Fri, 12 Dec 2025 17:26:06 -0800
Subject: [PATCH 01/16] payouts tab

---
 .../stripe-widgets/account-session/route.ts      |  9 +++++++++
 .../payments/{products => }/layout.tsx           |  4 ++--
 .../[projectId]/payments/payouts/page-client.tsx | 16 ++++++++++++++++
 .../[projectId]/payments/payouts/page.tsx        |  9 +++++++++
 apps/dashboard/src/lib/apps-frontend.tsx         |  1 +
 5 files changed, 37 insertions(+), 2 deletions(-)
 rename apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/{products => }/layout.tsx (99%)
 create mode 100644 apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/payouts/page-client.tsx
 create mode 100644 apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/payouts/page.tsx

diff --git a/apps/backend/src/app/api/latest/internal/payments/stripe-widgets/account-session/route.ts b/apps/backend/src/app/api/latest/internal/payments/stripe-widgets/account-session/route.ts
index 556ecc4e06..9319766bba 100644
--- a/apps/backend/src/app/api/latest/internal/payments/stripe-widgets/account-session/route.ts
+++ b/apps/backend/src/app/api/latest/internal/payments/stripe-widgets/account-session/route.ts
@@ -48,6 +48,15 @@ export const POST = createSmartRouteHandler({
         notification_banner: {
           enabled: true,
         },
+        payouts: {
+          enabled: true,
+          features: {
+            instant_payouts: true,
+            standard_payouts: true,
+            edit_payout_schedule: true,
+            external_account_collection: true,
+          },
+        },
       },
     });
 
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/layout.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/layout.tsx
similarity index 99%
rename from apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/layout.tsx
rename to apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/layout.tsx
index 143ad86590..60a2a214b9 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/layout.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/layout.tsx
@@ -11,8 +11,8 @@ import { ConnectNotificationBanner } from "@stripe/react-connect-js";
 import { AlertTriangle, ArrowRight, BarChart3, FlaskConical, Repeat, Shield, Wallet, Webhook } from "lucide-react";
 import { useState } from "react";
 import * as yup from "yup";
-import { AppEnabledGuard } from "../../app-enabled-guard";
-import { useAdminApp } from "../../use-admin-app";
+import { AppEnabledGuard } from "../app-enabled-guard";
+import { useAdminApp } from "../use-admin-app";
 
 export default function PaymentsLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/payouts/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/payouts/page-client.tsx
new file mode 100644
index 0000000000..a8af80d387
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/payouts/page-client.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ConnectPayouts } from "@stripe/react-connect-js";
+import { PageLayout } from "../../page-layout";
+import { StripeConnectProvider } from "@/components/payments/stripe-connect-provider";
+
+export default function PageClient() {
+
+  return (
+    <PageLayout title="Payouts">
+      <StripeConnectProvider>
+        <ConnectPayouts />
+      </StripeConnectProvider>
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/payouts/page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/payouts/page.tsx
new file mode 100644
index 0000000000..1be3d9b358
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/payouts/page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import PageClient from "./page-client";
+
+export default function Page() {
+  return (
+    <PageClient />
+  );
+}
diff --git a/apps/dashboard/src/lib/apps-frontend.tsx b/apps/dashboard/src/lib/apps-frontend.tsx
index 7a1e74418e..9a2bbe93a2 100644
--- a/apps/dashboard/src/lib/apps-frontend.tsx
+++ b/apps/dashboard/src/lib/apps-frontend.tsx
@@ -139,6 +139,7 @@ export const ALL_APPS_FRONTEND = {
       { displayName: "Products", href: "./products" },
       { displayName: "Customers", href: "./customers" },
       { displayName: "Transactions", href: "./transactions" },
+      { displayName: "Payouts", href: "./payouts" },
     ],
     screenshots: getScreenshots('payments', 7),
     storeDescription: (

From 17822379cc9bb17242e89a1938aabe4173474316 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Mon, 15 Dec 2025 10:47:42 -0800
Subject: [PATCH 02/16] cancel subscription endpoint

---
 .../[customer_type]/[customer_id]/route.ts    | 124 ++++++++++++++
 .../api/v1/payments/products.test.ts          | 156 +++++++++++++++++-
 apps/e2e/tests/js/payments.test.ts            |  57 +++++++
 .../src/interface/client-interface.ts         |  23 +++
 .../apps/implementations/client-app-impl.ts   |  20 +++
 .../stack-app/apps/interfaces/client-app.ts   |   2 +
 6 files changed, 381 insertions(+), 1 deletion(-)

diff --git a/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts b/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
index b1146fdee4..056f5be722 100644
--- a/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
+++ b/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
@@ -5,6 +5,10 @@ import { adaptSchema, clientOrHigherAuthTypeSchema, inlineProductSchema, serverO
 import { KnownErrors } from "@stackframe/stack-shared";
 import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 import { customerProductsListResponseSchema } from "@stackframe/stack-shared/dist/interface/crud/products";
+import { SubscriptionStatus } from "@prisma/client";
+import { getStripeForAccount } from "@/lib/stripe";
+import { typedToUppercase } from "@stackframe/stack-shared/dist/utils/strings";
+import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
 
 export const GET = createSmartRouteHandler({
   metadata: {
@@ -83,6 +87,7 @@ export const GET = createSmartRouteHandler({
   },
 });
 
+
 export const POST = createSmartRouteHandler({
   metadata: {
     summary: "Grant a product to a customer",
@@ -151,3 +156,122 @@ export const POST = createSmartRouteHandler({
     };
   },
 });
+
+
+export const DELETE = createSmartRouteHandler({
+  metadata: {
+    summary: "Cancel a customer's subscription product",
+    hidden: true,
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: clientOrHigherAuthTypeSchema.defined(),
+      project: adaptSchema.defined(),
+      tenancy: adaptSchema.defined(),
+    }).defined(),
+    params: yupObject({
+      customer_type: yupString().oneOf(["user", "team", "custom"]).defined(),
+      customer_id: yupString().defined(),
+    }).defined(),
+    body: yupObject({
+      product_id: yupString().defined(),
+    }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      success: yupBoolean().oneOf([true]).defined(),
+    }).defined(),
+  }),
+  handler: async ({ auth, params, body }, fullReq) => {
+    if (auth.type === "client") {
+      const currentUser = fullReq.auth?.user;
+      if (!currentUser) {
+        throw new KnownErrors.UserAuthenticationRequired();
+      }
+      if (params.customer_type === "user") {
+        if (params.customer_id !== currentUser.id) {
+          throw new StatusError(StatusError.Forbidden, "Clients can only cancel their own subscriptions.");
+        }
+      } else if (params.customer_type === "team") {
+        const prisma = await getPrismaClientForTenancy(auth.tenancy);
+        await ensureUserTeamPermissionExists(prisma, {
+          tenancy: auth.tenancy,
+          teamId: params.customer_id,
+          userId: currentUser.id,
+          permissionId: "team_admin",
+          errorType: "required",
+          recursive: true,
+        });
+      } else {
+        throw new StatusError(StatusError.Forbidden, "Clients can only cancel user or team subscriptions they control.");
+      }
+    }
+
+    const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const product = await ensureProductIdOrInlineProduct(auth.tenancy, auth.type, body.product_id, undefined);
+    if (params.customer_type !== product.customerType) {
+      throw new KnownErrors.ProductCustomerTypeDoesNotMatch(
+        body.product_id,
+        params.customer_id,
+        product.customerType,
+        params.customer_type,
+      );
+    }
+
+    const ownedProducts = await getOwnedProductsForCustomer({
+      prisma,
+      tenancy: auth.tenancy,
+      customerType: params.customer_type,
+      customerId: params.customer_id,
+    });
+    const ownedProduct = ownedProducts.find((p) => p.id === body.product_id);
+    if (!ownedProduct) {
+      throw new StatusError(400, "Customer does not have this product.");
+    }
+    if (ownedProduct.type === "one_time") {
+      throw new StatusError(400, "This product is a one time purchase and cannot be canceled.");
+    }
+
+    const subscription = await prisma.subscription.findFirst({
+      where: {
+        tenancyId: auth.tenancy.id,
+        customerType: typedToUppercase(params.customer_type),
+        customerId: params.customer_id,
+        productId: body.product_id,
+        status: { in: [SubscriptionStatus.active, SubscriptionStatus.trialing] },
+      },
+      orderBy: { createdAt: "desc" },
+    });
+    if (!subscription) {
+      throw new StatusError(400, "This subscription cannot be canceled.");
+    }
+
+    if (subscription.stripeSubscriptionId) {
+      const stripe = await getStripeForAccount({ tenancy: auth.tenancy });
+      await stripe.subscriptions.cancel(subscription.stripeSubscriptionId);
+    }
+    await prisma.subscription.update({
+      where: {
+        tenancyId_id: {
+          tenancyId: auth.tenancy.id,
+          id: subscription.id,
+        },
+      },
+      data: {
+        status: SubscriptionStatus.canceled,
+        currentPeriodEnd: new Date(),
+        cancelAtPeriodEnd: true,
+      },
+    });
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: {
+        success: true,
+      },
+    };
+  },
+});
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
index 659c17d96a..17a30df945 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
@@ -1,6 +1,6 @@
 import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
 import { it } from "../../../../../helpers";
-import { Auth, niceBackendFetch, Payments, Project, User } from "../../../../backend-helpers";
+import { Auth, niceBackendFetch, Payments, Project, Team, User } from "../../../../backend-helpers";
 
 async function configureProduct(config: any) {
   await Project.updateConfig({
@@ -136,6 +136,160 @@ it("should grant configured subscription product and expose it via listing", asy
   `);
 });
 
+it("should allow a signed-in user to cancel their own subscription product", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "pro-plan": {
+        displayName: "Pro Plan",
+        customerType: "user",
+        serverOnly: false,
+        stackable: false,
+        prices: {
+          monthly: {
+            USD: "1000",
+            interval: [1, "month"],
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId } = await Auth.fastSignUp();
+  await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "pro-plan",
+    },
+  });
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "DELETE",
+    accessType: "client",
+    body: {
+      product_id: "pro-plan",
+    },
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "success": true },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  const listResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    accessType: "client",
+  });
+  expect(listResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "is_paginated": true,
+        "items": [],
+        "pagination": { "next_cursor": null },
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should reject canceling a one-time purchase product", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "one-time": {
+        displayName: "One Time",
+        customerType: "user",
+        serverOnly: false,
+        stackable: false,
+        prices: {
+          once: {
+            USD: "1000",
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId } = await Auth.fastSignUp();
+  await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "one-time",
+    },
+  });
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "DELETE",
+    accessType: "client",
+    body: {
+      product_id: "one-time",
+    },
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "This product is a one time purchase and cannot be canceled.",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should allow a team admin to cancel a team's subscription product", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "team-pro-plan": {
+        displayName: "Team Pro Plan",
+        customerType: "team",
+        serverOnly: false,
+        stackable: false,
+        prices: {
+          monthly: {
+            USD: "1000",
+            interval: [1, "month"],
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId } = await Auth.fastSignUp();
+  const { teamId } = await Team.create({ accessType: "server", creatorUserId: userId });
+
+  await niceBackendFetch(`/api/v1/payments/products/team/${teamId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "team-pro-plan",
+    },
+  });
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/team/${teamId}`, {
+    method: "DELETE",
+    accessType: "client",
+    body: {
+      product_id: "team-pro-plan",
+    },
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "success": true },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
 it("should hide server-only products from clients while exposing them to servers", async ({ expect }) => {
   await Project.createAndSwitch();
   await Payments.setup();
diff --git a/apps/e2e/tests/js/payments.test.ts b/apps/e2e/tests/js/payments.test.ts
index cdf80b5edf..d12e45651f 100644
--- a/apps/e2e/tests/js/payments.test.ts
+++ b/apps/e2e/tests/js/payments.test.ts
@@ -206,6 +206,63 @@ it("cannot decrease team item quantity below zero", async ({ expect }) => {
   expect(still.quantity).toBe(0);
 }, { timeout: 40_000 });
 
+it("client can cancel their own subscription", async ({ expect }) => {
+  const { clientApp, serverApp, adminApp } = await createApp({ config: {} });
+  const project = await adminApp.getProject();
+  await adminApp.setupPayments();
+  await project.updateConfig({
+    "payments.offers.pro-sub": {
+      displayName: "Pro Subscription",
+      customerType: "user",
+      serverOnly: false,
+      stackable: false,
+      prices: { monthly: { USD: "1000", interval: [1, "month"] } },
+      includedItems: {},
+    },
+  });
+
+  await clientApp.signUpWithCredential({ email: "cancel-sub@test.com", password: "password", verificationCallbackUrl: "http://localhost:3000" });
+  await clientApp.signInWithCredential({ email: "cancel-sub@test.com", password: "password" });
+  const user = await clientApp.getUser({ or: "throw" });
+
+  await serverApp.grantProduct({ userId: user.id, productId: "pro-sub" });
+  const before = await user.listProducts();
+  expect(before.some((p) => p.id === "pro-sub")).toBe(true);
+
+  await clientApp.cancelSubscription({ productId: "pro-sub" });
+  const after = await user.listProducts();
+  expect(after.some((p) => p.id === "pro-sub")).toBe(false);
+}, { timeout: 60_000 });
+
+it("team admin can cancel a team's subscription", async ({ expect }) => {
+  const { clientApp, serverApp, adminApp } = await createApp({ config: { clientTeamCreationEnabled: true } });
+  const project = await adminApp.getProject();
+  await adminApp.setupPayments();
+  await project.updateConfig({
+    "payments.offers.team-sub": {
+      displayName: "Team Subscription",
+      customerType: "team",
+      serverOnly: false,
+      stackable: false,
+      prices: { monthly: { USD: "1000", interval: [1, "month"] } },
+      includedItems: {},
+    },
+  });
+
+  await clientApp.signUpWithCredential({ email: "cancel-team-sub@test.com", password: "password", verificationCallbackUrl: "http://localhost:3000" });
+  await clientApp.signInWithCredential({ email: "cancel-team-sub@test.com", password: "password" });
+  const user = await clientApp.getUser({ or: "throw" });
+
+  const team = await user.createTeam({ displayName: "Cancel Team" });
+  await serverApp.grantProduct({ teamId: team.id, productId: "team-sub" });
+  const before = await team.listProducts();
+  expect(before.some((p) => p.id === "team-sub")).toBe(true);
+
+  await clientApp.cancelSubscription({ productId: "team-sub", teamId: team.id });
+  const after = await team.listProducts();
+  expect(after.some((p) => p.id === "team-sub")).toBe(false);
+}, { timeout: 60_000 });
+
 
 it("can create item quantity change from server app", { timeout: 40_000 }, async ({ expect }) => {
   const { serverApp, adminApp } = await createApp({
diff --git a/packages/stack-shared/src/interface/client-interface.ts b/packages/stack-shared/src/interface/client-interface.ts
index 0bc738c24e..117060843a 100644
--- a/packages/stack-shared/src/interface/client-interface.ts
+++ b/packages/stack-shared/src/interface/client-interface.ts
@@ -1806,6 +1806,29 @@ export class StackClientInterface {
     return await response.json();
   }
 
+  async cancelSubscription(
+    options: {
+      customer_type: "user" | "team" | "custom",
+      customer_id: string,
+      product_id: string,
+    },
+    session: InternalSession | null,
+  ): Promise<void> {
+    await this.sendClientRequest(
+      urlString`/payments/products/${options.customer_type}/${options.customer_id}`,
+      {
+        method: "DELETE",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({
+          product_id: options.product_id,
+        }),
+      },
+      session,
+    );
+  }
+
   async createCheckoutUrl(
     customer_type: "user" | "team" | "custom",
     customer_id: string,
diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 210b3786d1..9962b6aec8 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -1648,6 +1648,26 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     return this._customerProductsFromResponse(response);
   }
 
+  async cancelSubscription(options: { productId: string } | { productId: string, teamId: string }): Promise<void> {
+    const session = await this._getSession();
+    const user = await this.getUser();
+    if (!user) {
+      throw new KnownErrors.UserAuthenticationRequired();
+    }
+    const customerType = "teamId" in options ? "team" : "user";
+    const customerId = "teamId" in options ? options.teamId : user.id;
+    await this._interface.cancelSubscription({
+      customer_type: customerType,
+      customer_id: customerId,
+      product_id: options.productId,
+    }, session);
+    if (customerType === "user") {
+      await this._userProductsCache.invalidateWhere(([cachedSession, userId]) => cachedSession === session && userId === customerId);
+    } else {
+      await this._teamProductsCache.invalidateWhere(([cachedSession, teamId]) => cachedSession === session && teamId === customerId);
+    }
+  }
+
   // IF_PLATFORM react-like
   useProducts(options: CustomerProductsRequestOptions): CustomerProductsList {
     const session = this._useSession();
diff --git a/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts b/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
index d39fc10691..208a95f072 100644
--- a/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
+++ b/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
@@ -76,6 +76,8 @@ export type StackClientApp<HasTokenStore extends boolean = boolean, ProjectId ex
     getUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'anonymous' }): Promise<ProjectCurrentUser<ProjectId>>,
     getUser(options?: GetCurrentUserOptions<HasTokenStore>): Promise<ProjectCurrentUser<ProjectId> | null>,
 
+    cancelSubscription(options: { productId: string } | { productId: string, teamId: string }): Promise<void>,
+
     // note: we don't special-case 'anonymous' here to return non-null, see GetPartialUserOptions for more details
     getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'token' }): Promise<TokenPartialUser | null>,
     getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'convex' }): Promise<TokenPartialUser | null>,

From 9b16230f5d70226edcb40b58db9c0fd6bc975431 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 16 Dec 2025 10:42:19 -0800
Subject: [PATCH 03/16] billing info and payment method update

---
 .../[customer_type]/[customer_id]/route.ts    | 231 +++++
 .../[customer_id]/set-default/route.ts        | 123 +++
 .../[customer_id]/setup-intent/route.ts       | 106 +++
 apps/backend/src/lib/payments.tsx             | 113 ++-
 .../endpoints/api/v1/payments/billing.test.ts | 157 ++++
 packages/react/package.json                   |   2 +
 packages/stack/package.json                   |   2 +
 packages/template/package-template.json       |   4 +
 packages/template/package.json                |   2 +
 .../src/components-page/account-settings.tsx  |  24 +-
 .../payments/payments-page.tsx                |  35 +
 .../payments/payments-panel.tsx               | 399 +++++++++
 .../account-settings/teams/team-page.tsx      |   2 +
 .../teams/team-payments-section.tsx           |  34 +
 .../apps/implementations/client-app-impl.ts   | 166 +++-
 .../src/lib/stack-app/customers/index.ts      |  61 ++
 pnpm-lock.yaml                                | 807 +++++++++---------
 17 files changed, 1865 insertions(+), 403 deletions(-)
 create mode 100644 apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
 create mode 100644 apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts
 create mode 100644 apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts
 create mode 100644 apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
 create mode 100644 packages/template/src/components-page/account-settings/payments/payments-page.tsx
 create mode 100644 packages/template/src/components-page/account-settings/payments/payments-panel.tsx
 create mode 100644 packages/template/src/components-page/account-settings/teams/team-payments-section.tsx

diff --git a/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
new file mode 100644
index 0000000000..f711b82468
--- /dev/null
+++ b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
@@ -0,0 +1,231 @@
+import { ensureStripeCustomerForCustomer, getDefaultCardPaymentMethodSummary, getStripeCustomerForCustomerOrNull } from "@/lib/payments";
+import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
+import { getStripeForAccount } from "@/lib/stripe";
+import { getPrismaClientForTenancy, globalPrismaClient } from "@/prisma-client";
+import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { KnownErrors } from "@stackframe/stack-shared";
+import { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+
+async function ensureClientCanAccessCustomer(params: { customer_type: "user" | "team", customer_id: string }, fullReq: any, tenancy: any) {
+  const currentUser = fullReq.auth?.user;
+  if (!currentUser) {
+    throw new KnownErrors.UserAuthenticationRequired();
+  }
+  if (params.customer_type === "user") {
+    if (params.customer_id !== currentUser.id) {
+      throw new StatusError(StatusError.Forbidden, "Clients can only manage their own billing.");
+    }
+    return;
+  }
+
+  const prisma = await getPrismaClientForTenancy(tenancy);
+  await ensureUserTeamPermissionExists(prisma, {
+    tenancy,
+    teamId: params.customer_id,
+    userId: currentUser.id,
+    permissionId: "team_admin",
+    errorType: "required",
+    recursive: true,
+  });
+}
+
+const addressSchema = yupObject({
+  line1: yupString().optional().default(undefined),
+  line2: yupString().optional().default(undefined),
+  city: yupString().optional().default(undefined),
+  state: yupString().optional().default(undefined),
+  postal_code: yupString().optional().default(undefined),
+  country: yupString().optional().default(undefined),
+}).optional().default(undefined);
+
+export const GET = createSmartRouteHandler({
+  metadata: {
+    summary: "Get billing info and default payment method",
+    hidden: true,
+    tags: ["Payments"],
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: clientOrHigherAuthTypeSchema.defined(),
+      project: adaptSchema.defined(),
+      tenancy: adaptSchema.defined(),
+    }).defined(),
+    params: yupObject({
+      customer_type: yupString().oneOf(["user", "team"]).defined(),
+      customer_id: yupString().defined(),
+    }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      has_customer: yupBoolean().defined(),
+      billing_details: yupObject({
+        name: yupString().nullable().defined(),
+        email: yupString().nullable().defined(),
+        phone: yupString().nullable().defined(),
+        address: yupObject({
+          line1: yupString().nullable().defined(),
+          line2: yupString().nullable().defined(),
+          city: yupString().nullable().defined(),
+          state: yupString().nullable().defined(),
+          postal_code: yupString().nullable().defined(),
+          country: yupString().nullable().defined(),
+        }).nullable().defined(),
+      }).defined(),
+      default_payment_method: yupObject({
+        id: yupString().defined(),
+        brand: yupString().nullable().defined(),
+        last4: yupString().nullable().defined(),
+        exp_month: yupNumber().nullable().defined(),
+        exp_year: yupNumber().nullable().defined(),
+      }).nullable().defined(),
+    }).defined(),
+  }),
+  handler: async ({ auth, params }, fullReq) => {
+    if (auth.type === "client") {
+      await ensureClientCanAccessCustomer(
+        { customer_type: params.customer_type, customer_id: params.customer_id },
+        fullReq,
+        auth.tenancy,
+      );
+    }
+
+    const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const stripe = await getStripeForAccount({ tenancy: auth.tenancy });
+    const stripeCustomer = await getStripeCustomerForCustomerOrNull({
+      stripe,
+      prisma,
+      tenancyId: auth.tenancy.id,
+      customerType: params.customer_type,
+      customerId: params.customer_id,
+    });
+
+    if (!stripeCustomer) {
+      return {
+        statusCode: 200,
+        bodyType: "json",
+        body: {
+          has_customer: false,
+          billing_details: {
+            name: null,
+            email: null,
+            phone: null,
+            address: null,
+          },
+          default_payment_method: null,
+        },
+      };
+    }
+
+    const defaultPaymentMethod = await getDefaultCardPaymentMethodSummary({
+      stripe,
+      stripeCustomer,
+    });
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: {
+        has_customer: true,
+        billing_details: {
+          name: stripeCustomer.name ?? null,
+          email: stripeCustomer.email ?? null,
+          phone: stripeCustomer.phone ?? null,
+          address: stripeCustomer.address ? {
+            line1: stripeCustomer.address.line1 ?? null,
+            line2: stripeCustomer.address.line2 ?? null,
+            city: stripeCustomer.address.city ?? null,
+            state: stripeCustomer.address.state ?? null,
+            postal_code: stripeCustomer.address.postal_code ?? null,
+            country: stripeCustomer.address.country ?? null,
+          } : null,
+        },
+        default_payment_method: defaultPaymentMethod,
+      },
+    };
+  },
+});
+
+export const POST = createSmartRouteHandler({
+  metadata: {
+    summary: "Update billing info",
+    hidden: true,
+    tags: ["Payments"],
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: clientOrHigherAuthTypeSchema.defined(),
+      project: adaptSchema.defined(),
+      tenancy: adaptSchema.defined(),
+    }).defined(),
+    params: yupObject({
+      customer_type: yupString().oneOf(["user", "team"]).defined(),
+      customer_id: yupString().defined(),
+    }).defined(),
+    body: yupObject({
+      name: yupString().optional().default(undefined),
+      email: yupString().optional().default(undefined),
+      phone: yupString().optional().default(undefined),
+      address: addressSchema,
+    }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      success: yupBoolean().oneOf([true]).defined(),
+    }).defined(),
+  }),
+  handler: async ({ auth, params, body }, fullReq) => {
+    if (auth.type === "client") {
+      await ensureClientCanAccessCustomer(
+        { customer_type: params.customer_type, customer_id: params.customer_id },
+        fullReq,
+        auth.tenancy,
+      );
+    }
+
+    const project = await globalPrismaClient.project.findUnique({
+      where: { id: auth.tenancy.project.id },
+      select: { stripeAccountId: true },
+    });
+    if (!project?.stripeAccountId) {
+      throw new StatusError(400, "Payments are not set up in this Stack Auth project.");
+    }
+
+    const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const stripe = await getStripeForAccount({ tenancy: auth.tenancy });
+    const stripeCustomer = await ensureStripeCustomerForCustomer({
+      stripe,
+      prisma,
+      tenancyId: auth.tenancy.id,
+      customerType: params.customer_type,
+      customerId: params.customer_id,
+    });
+
+    const shouldUpdate =
+      body.name !== undefined ||
+      body.email !== undefined ||
+      body.phone !== undefined ||
+      body.address !== undefined;
+    if (!shouldUpdate) {
+      throw new StatusError(400, "No billing fields provided.");
+    }
+
+    await stripe.customers.update(stripeCustomer.id, {
+      name: body.name,
+      email: body.email,
+      phone: body.phone,
+      address: body.address,
+    });
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: { success: true },
+    };
+  },
+});
+
diff --git a/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts
new file mode 100644
index 0000000000..bad42d7131
--- /dev/null
+++ b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts
@@ -0,0 +1,123 @@
+import { ensureStripeCustomerForCustomer, getDefaultCardPaymentMethodSummary } from "@/lib/payments";
+import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
+import { getStripeForAccount } from "@/lib/stripe";
+import { getPrismaClientForTenancy } from "@/prisma-client";
+import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { KnownErrors } from "@stackframe/stack-shared";
+import { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+
+async function ensureClientCanAccessCustomer(params: { customer_type: "user" | "team", customer_id: string }, fullReq: any, tenancy: any) {
+  const currentUser = fullReq.auth?.user;
+  if (!currentUser) {
+    throw new KnownErrors.UserAuthenticationRequired();
+  }
+  if (params.customer_type === "user") {
+    if (params.customer_id !== currentUser.id) {
+      throw new StatusError(StatusError.Forbidden, "Clients can only manage their own payment method.");
+    }
+    return;
+  }
+
+  const prisma = await getPrismaClientForTenancy(tenancy);
+  await ensureUserTeamPermissionExists(prisma, {
+    tenancy,
+    teamId: params.customer_id,
+    userId: currentUser.id,
+    permissionId: "team_admin",
+    errorType: "required",
+    recursive: true,
+  });
+}
+
+export const POST = createSmartRouteHandler({
+  metadata: {
+    summary: "Set default payment method from a setup intent",
+    hidden: true,
+    tags: ["Payments"],
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: clientOrHigherAuthTypeSchema.defined(),
+      project: adaptSchema.defined(),
+      tenancy: adaptSchema.defined(),
+    }).defined(),
+    params: yupObject({
+      customer_type: yupString().oneOf(["user", "team"]).defined(),
+      customer_id: yupString().defined(),
+    }).defined(),
+    body: yupObject({
+      setup_intent_id: yupString().defined(),
+    }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      success: yupBoolean().oneOf([true]).defined(),
+      default_payment_method: yupObject({
+        id: yupString().defined(),
+        brand: yupString().nullable().defined(),
+        last4: yupString().nullable().defined(),
+        exp_month: yupNumber().nullable().defined(),
+        exp_year: yupNumber().nullable().defined(),
+      }).nullable().defined(),
+    }).defined(),
+  }),
+  handler: async ({ auth, params, body }, fullReq) => {
+    if (auth.type === "client") {
+      await ensureClientCanAccessCustomer(
+        { customer_type: params.customer_type, customer_id: params.customer_id },
+        fullReq,
+        auth.tenancy,
+      );
+    }
+
+    const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const stripe = await getStripeForAccount({ tenancy: auth.tenancy });
+    const stripeCustomer = await ensureStripeCustomerForCustomer({
+      stripe,
+      prisma,
+      tenancyId: auth.tenancy.id,
+      customerType: params.customer_type,
+      customerId: params.customer_id,
+    });
+
+    const setupIntent = await stripe.setupIntents.retrieve(body.setup_intent_id);
+    if (setupIntent.customer !== stripeCustomer.id) {
+      throw new StatusError(StatusError.Forbidden, "Setup intent does not belong to this customer.");
+    }
+    if (setupIntent.status !== "succeeded") {
+      throw new StatusError(400, "Setup intent has not succeeded.");
+    }
+    if (!setupIntent.payment_method || typeof setupIntent.payment_method !== "string") {
+      throw new StatusError(500, "Setup intent missing payment method.");
+    }
+
+    await stripe.customers.update(stripeCustomer.id, {
+      invoice_settings: {
+        default_payment_method: setupIntent.payment_method,
+      },
+    });
+
+    const updatedCustomer = await stripe.customers.retrieve(stripeCustomer.id);
+    if (updatedCustomer.deleted) {
+      throw new StatusError(500, "Stripe customer was deleted unexpectedly.");
+    }
+
+    const summary = await getDefaultCardPaymentMethodSummary({
+      stripe,
+      stripeCustomer: updatedCustomer,
+    });
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: {
+        success: true,
+        default_payment_method: summary,
+      },
+    };
+  },
+});
+
diff --git a/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts
new file mode 100644
index 0000000000..54c4ac8b3d
--- /dev/null
+++ b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts
@@ -0,0 +1,106 @@
+import { ensureStripeCustomerForCustomer } from "@/lib/payments";
+import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
+import { getStripeForAccount } from "@/lib/stripe";
+import { getPrismaClientForTenancy, globalPrismaClient } from "@/prisma-client";
+import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { KnownErrors } from "@stackframe/stack-shared";
+import { adaptSchema, clientOrHigherAuthTypeSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+
+async function ensureClientCanAccessCustomer(params: { customer_type: "user" | "team", customer_id: string }, fullReq: any, tenancy: any) {
+  const currentUser = fullReq.auth?.user;
+  if (!currentUser) {
+    throw new KnownErrors.UserAuthenticationRequired();
+  }
+  if (params.customer_type === "user") {
+    if (params.customer_id !== currentUser.id) {
+      throw new StatusError(StatusError.Forbidden, "Clients can only manage their own payment method.");
+    }
+    return;
+  }
+
+  const prisma = await getPrismaClientForTenancy(tenancy);
+  await ensureUserTeamPermissionExists(prisma, {
+    tenancy,
+    teamId: params.customer_id,
+    userId: currentUser.id,
+    permissionId: "team_admin",
+    errorType: "required",
+    recursive: true,
+  });
+}
+
+export const POST = createSmartRouteHandler({
+  metadata: {
+    summary: "Create a setup intent to update default payment method",
+    hidden: true,
+    tags: ["Payments"],
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: clientOrHigherAuthTypeSchema.defined(),
+      project: adaptSchema.defined(),
+      tenancy: adaptSchema.defined(),
+    }).defined(),
+    params: yupObject({
+      customer_type: yupString().oneOf(["user", "team"]).defined(),
+      customer_id: yupString().defined(),
+    }).defined(),
+    body: yupObject({}).default(() => ({})).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      client_secret: yupString().defined(),
+      stripe_account_id: yupString().defined(),
+    }).defined(),
+  }),
+  handler: async ({ auth, params }, fullReq) => {
+    if (auth.type === "client") {
+      await ensureClientCanAccessCustomer(
+        { customer_type: params.customer_type, customer_id: params.customer_id },
+        fullReq,
+        auth.tenancy,
+      );
+    }
+
+    const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const stripe = await getStripeForAccount({ tenancy: auth.tenancy });
+    const stripeCustomer = await ensureStripeCustomerForCustomer({
+      stripe,
+      prisma,
+      tenancyId: auth.tenancy.id,
+      customerType: params.customer_type,
+      customerId: params.customer_id,
+    });
+
+    const setupIntent = await stripe.setupIntents.create({
+      customer: stripeCustomer.id,
+      usage: "off_session",
+      payment_method_types: ["card"],
+    });
+    if (!setupIntent.client_secret) {
+      throw new StatusError(500, "No client secret returned from Stripe.");
+    }
+
+    const project = await globalPrismaClient.project.findUnique({
+      where: { id: auth.tenancy.project.id },
+      select: { stripeAccountId: true },
+    });
+    const stripeAccountId = project?.stripeAccountId;
+    if (!stripeAccountId) {
+      throw new StatusError(400, "Payments are not set up in this Stack Auth project.");
+    }
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: {
+        client_secret: setupIntent.client_secret,
+        stripe_account_id: stripeAccountId,
+      },
+    };
+  },
+});
+
diff --git a/apps/backend/src/lib/payments.tsx b/apps/backend/src/lib/payments.tsx
index e59a832055..9cb6d156d2 100644
--- a/apps/backend/src/lib/payments.tsx
+++ b/apps/backend/src/lib/payments.tsx
@@ -1,5 +1,5 @@
 import { PrismaClientTransaction } from "@/prisma-client";
-import { PurchaseCreationSource, SubscriptionStatus } from "@prisma/client";
+import { CustomerType, PurchaseCreationSource, SubscriptionStatus } from "@prisma/client";
 import { KnownErrors } from "@stackframe/stack-shared";
 import type { inlineProductSchema, productSchema, productSchemaWithMetadata } from "@stackframe/stack-shared/dist/schema-fields";
 import { SUPPORTED_CURRENCIES } from "@stackframe/stack-shared/dist/utils/currency-constants";
@@ -424,6 +424,117 @@ export async function ensureCustomerExists(options: {
   }
 }
 
+function customerTypeToStripeCustomerType(customerType: "user" | "team"): CustomerType {
+  return customerType === "user" ? CustomerType.USER : CustomerType.TEAM;
+}
+
+export async function getStripeCustomerForCustomerOrNull(options: {
+  stripe: Stripe,
+  prisma: PrismaClientTransaction,
+  tenancyId: string,
+  customerType: "user" | "team",
+  customerId: string,
+}): Promise<Stripe.Customer | null> {
+  await ensureCustomerExists({
+    prisma: options.prisma,
+    tenancyId: options.tenancyId,
+    customerType: options.customerType,
+    customerId: options.customerId,
+  });
+
+  const stripeCustomerType = customerTypeToStripeCustomerType(options.customerType);
+  const matchesCustomer = (customer: Stripe.Customer) => {
+    const storedType = customer.metadata.customerType;
+    if (!storedType) return true;
+    return storedType === stripeCustomerType;
+  };
+
+  const stripeCustomerSearch = await options.stripe.customers.search({
+    query: `metadata['customerId']:'${options.customerId}'`,
+  });
+  let matches = stripeCustomerSearch.data.filter(matchesCustomer);
+
+  if (matches.length === 0) {
+    // Stripe's search is eventually consistent; fall back to listing to ensure we can find a newly created customer.
+    let startingAfter: string | undefined = undefined;
+    for (let i = 0; i < 10; i++) {
+      const page = await options.stripe.customers.list({
+        limit: 100,
+        ...startingAfter ? { starting_after: startingAfter } : {},
+      });
+      const exactMatches = page.data.filter((customer) => (
+        customer.metadata.customerId === options.customerId && matchesCustomer(customer)
+      ));
+      if (exactMatches.length > 0) {
+        matches = exactMatches;
+        break;
+      }
+      if (!page.has_more || page.data.length === 0) {
+        break;
+      }
+      startingAfter = page.data[page.data.length - 1].id;
+    }
+  }
+
+  if (matches.length > 1) {
+    throw new StackAssertionError("Multiple Stripe customers found for customerId; customerType filtering was ambiguous", {
+      customerId: options.customerId,
+      customerType: options.customerType,
+      stripeCustomerIds: matches.map((c) => c.id),
+    });
+  }
+  return matches[0] ?? null;
+}
+
+export async function ensureStripeCustomerForCustomer(options: {
+  stripe: Stripe,
+  prisma: PrismaClientTransaction,
+  tenancyId: string,
+  customerType: "user" | "team",
+  customerId: string,
+}): Promise<Stripe.Customer> {
+  const existing = await getStripeCustomerForCustomerOrNull(options);
+  if (existing) {
+    return existing;
+  }
+  const stripeCustomerType = customerTypeToStripeCustomerType(options.customerType);
+  return await options.stripe.customers.create({
+    metadata: {
+      customerId: options.customerId,
+      customerType: stripeCustomerType,
+    },
+  });
+}
+
+export type StripeCardPaymentMethodSummary = {
+  id: string,
+  brand: string | null,
+  last4: string | null,
+  exp_month: number | null,
+  exp_year: number | null,
+};
+
+export async function getDefaultCardPaymentMethodSummary(options: {
+  stripe: Stripe,
+  stripeCustomer: Stripe.Customer,
+}): Promise<StripeCardPaymentMethodSummary | null> {
+  const defaultPaymentMethodId = options.stripeCustomer.invoice_settings.default_payment_method;
+  if (!defaultPaymentMethodId || typeof defaultPaymentMethodId !== "string") {
+    return null;
+  }
+  const pm = await options.stripe.paymentMethods.retrieve(defaultPaymentMethodId);
+  if (pm.type !== "card" || !pm.card) {
+    return null;
+  }
+  return {
+    id: pm.id,
+    brand: pm.card.brand,
+    last4: pm.card.last4,
+    exp_month: pm.card.exp_month,
+    exp_year: pm.card.exp_year,
+  };
+}
+
 export function productToInlineProduct(product: ProductWithMetadata): yup.InferType<typeof inlineProductSchema> {
   return {
     display_name: product.displayName ?? "Product",
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
new file mode 100644
index 0000000000..b85e12e030
--- /dev/null
+++ b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
@@ -0,0 +1,157 @@
+import { it } from "../../../../../helpers";
+import { Auth, niceBackendFetch, Payments, Project, Team, User } from "../../../../backend-helpers";
+
+it("should allow a signed-in user to update and read their own billing details", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+
+  const { userId } = await Auth.fastSignUp();
+
+  const getInitial = await niceBackendFetch(`/api/v1/payments/billing/user/${userId}`, {
+    accessType: "client",
+  });
+  expect(getInitial).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "billing_details": {
+          "address": null,
+          "email": null,
+          "name": null,
+          "phone": null,
+        },
+        "default_payment_method": null,
+        "has_customer": false,
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  const update = await niceBackendFetch(`/api/v1/payments/billing/user/${userId}`, {
+    method: "POST",
+    accessType: "client",
+    body: {
+      name: "Acme Inc",
+      email: "billing@acme.example",
+      phone: "+15551234567",
+      address: {
+        line1: "123 Main St",
+        city: "San Francisco",
+        state: "CA",
+        postal_code: "94105",
+        country: "US",
+      },
+    },
+  });
+  expect(update).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "success": true },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  const getAfter = await niceBackendFetch(`/api/v1/payments/billing/user/${userId}`, {
+    accessType: "client",
+  });
+  expect(getAfter).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "billing_details": {
+          "address": {
+            "city": "San Francisco",
+            "country": "US",
+            "line1": "123 Main St",
+            "line2": null,
+            "postal_code": "94105",
+            "state": "CA",
+          },
+          "email": "billing@acme.example",
+          "name": "Acme Inc",
+          "phone": "+15551234567",
+        },
+        "default_payment_method": null,
+        "has_customer": true,
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should reject a signed-in user updating another user's billing details", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+
+  const { userId: userId1 } = await Auth.fastSignUp();
+  const { userId: userId2 } = await User.create();
+
+  const response = await niceBackendFetch(`/api/v1/payments/billing/user/${userId2}`, {
+    method: "POST",
+    accessType: "client",
+    body: {
+      name: "Not allowed",
+    },
+  });
+  expect(response).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 403,
+      "body": "Clients can only manage their own billing.",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  const getOwn = await niceBackendFetch(`/api/v1/payments/billing/user/${userId1}`, {
+    accessType: "client",
+  });
+  expect(getOwn.status).toBe(200);
+});
+
+it("should allow a team admin (but not a normal member) to manage team billing", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+
+  const { userId: adminUserId } = await Auth.fastSignUp();
+  const { teamId } = await Team.create({ accessType: "server" }, { creator_user_id: adminUserId });
+  await Team.addPermission(teamId, adminUserId, "team_admin");
+
+  const adminSetupIntent = await niceBackendFetch(`/api/v1/payments/payment-method/team/${teamId}/setup-intent`, {
+    method: "POST",
+    accessType: "client",
+    body: {},
+  });
+  expect(adminSetupIntent.status).toBe(200);
+  expect(adminSetupIntent.body).toMatchObject({
+    client_secret: expect.any(String),
+    stripe_account_id: expect.any(String),
+  });
+
+  const { userId: memberUserId } = await Auth.fastSignUp();
+  await Team.addMember(teamId, memberUserId);
+
+  const memberUpdate = await niceBackendFetch(`/api/v1/payments/billing/team/${teamId}`, {
+    method: "POST",
+    accessType: "client",
+    body: {
+      name: "Should fail",
+    },
+  });
+  expect(memberUpdate).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 401,
+      "body": {
+        "code": "TEAM_PERMISSION_REQUIRED",
+        "details": {
+          "permission_id": "team_admin",
+          "team_id": "<stripped UUID>",
+          "user_id": "<stripped UUID>",
+        },
+        "error": "User <stripped UUID> does not have permission team_admin in team <stripped UUID>.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "TEAM_PERMISSION_REQUIRED",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
+});
diff --git a/packages/react/package.json b/packages/react/package.json
index 6bd1484682..5bcd7698cf 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -58,6 +58,8 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@stripe/react-stripe-js": "^3.8.1",
+    "@stripe/stripe-js": "^7.7.0",
     "@simplewebauthn/browser": "^11.0.0",
     "@stackframe/stack-shared": "workspace:*",
     "@stackframe/stack-ui": "workspace:*",
diff --git a/packages/stack/package.json b/packages/stack/package.json
index 986da2942d..2e06ac0ff6 100644
--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -58,6 +58,8 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@stripe/react-stripe-js": "^3.8.1",
+    "@stripe/stripe-js": "^7.7.0",
     "@simplewebauthn/browser": "^11.0.0",
     "@stackframe/stack-sc": "workspace:*",
     "@stackframe/stack-shared": "workspace:*",
diff --git a/packages/template/package-template.json b/packages/template/package-template.json
index a568cd6862..85a5f0ffdd 100644
--- a/packages/template/package-template.json
+++ b/packages/template/package-template.json
@@ -86,6 +86,10 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "//": "NEXT_LINE_PLATFORM react-like",
+    "@stripe/react-stripe-js": "^3.8.1",
+    "//": "NEXT_LINE_PLATFORM react-like",
+    "@stripe/stripe-js": "^7.7.0",
     "@simplewebauthn/browser": "^11.0.0",
     "//": "NEXT_LINE_PLATFORM next",
     "@stackframe/stack-sc": "workspace:*",
diff --git a/packages/template/package.json b/packages/template/package.json
index 8d070edfee..024c762a43 100644
--- a/packages/template/package.json
+++ b/packages/template/package.json
@@ -63,6 +63,8 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@stripe/react-stripe-js": "^3.8.1",
+    "@stripe/stripe-js": "^7.7.0",
     "@simplewebauthn/browser": "^11.0.0",
     "@stackframe/stack-sc": "workspace:*",
     "@stackframe/stack-shared": "workspace:*",
diff --git a/packages/template/src/components-page/account-settings.tsx b/packages/template/src/components-page/account-settings.tsx
index d86c71f1b7..f3bc7c90ff 100644
--- a/packages/template/src/components-page/account-settings.tsx
+++ b/packages/template/src/components-page/account-settings.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Skeleton, Typography } from '@stackframe/stack-ui';
-import { Contact, ShieldCheck, Bell, Monitor, Key, Settings, CirclePlus } from 'lucide-react';
+import { Contact, ShieldCheck, Bell, Monitor, Key, Settings, CirclePlus, CreditCard } from 'lucide-react';
 import React, { Suspense } from "react";
 import { useStackApp, useUser } from '..';
 import { MaybeFullPage } from "../components/elements/maybe-full-page";
@@ -13,6 +13,7 @@ import { ApiKeysPage } from "./account-settings/api-keys/api-keys-page";
 import { EmailsAndAuthPage } from './account-settings/email-and-auth/email-and-auth-page';
 import { NotificationsPage } from './account-settings/notifications/notifications-page';
 import { ProfilePage } from "./account-settings/profile-page/profile-page";
+import { PaymentsPage } from "./account-settings/payments/payments-page";
 import { SettingsPage } from './account-settings/settings/settings-page';
 import { TeamCreationPage } from './account-settings/teams/team-creation-page';
 import { TeamPage } from './account-settings/teams/team-page';
@@ -24,7 +25,8 @@ const iconMap = {
   Monitor,
   Key,
   Settings,
-  CirclePlus
+  CirclePlus,
+  CreditCard,
 } as const;
 
 const Icon = ({ name }: { name: keyof typeof iconMap }) => {
@@ -138,6 +140,15 @@ export function AccountSettings(props: {
                 <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />
               </Suspense>,
             }] as const : []),
+            {
+              title: t('Payments'),
+              type: 'item',
+              id: 'payments',
+              icon: <Icon name="CreditCard" />,
+              content: <Suspense fallback={<PaymentsPageSkeleton/>}>
+                <PaymentsPage mockMode={!!props.mockUser} />
+              </Suspense>,
+            },
             {
               title: t('Settings'),
               type: 'item',
@@ -224,6 +235,15 @@ function ApiKeysPageSkeleton() {
   </PageLayout>;
 }
 
+function PaymentsPageSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-6 w-48 mb-2"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-[200px] w-full mt-1 rounded-md"/>
+  </PageLayout>;
+}
+
 function TeamPageSkeleton() {
   return <PageLayout>
     <Skeleton className="h-9 w-full mt-1"/>
diff --git a/packages/template/src/components-page/account-settings/payments/payments-page.tsx b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
new file mode 100644
index 0000000000..0fe907c593
--- /dev/null
+++ b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { PageLayout } from "../page-layout";
+import { PaymentsPanel } from "./payments-panel";
+
+export function PaymentsPage(props: { mockMode?: boolean }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: props.mockMode ? "return-null" : "redirect" });
+
+  if (props.mockMode) {
+    return (
+      <PageLayout>
+        <PaymentsPanel
+          title={t("Personal payments")}
+          mockMode
+        />
+      </PageLayout>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <PageLayout>
+      <PaymentsPanel
+        title={t("Personal payments")}
+        customer={user}
+      />
+    </PageLayout>
+  );
+}
diff --git a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
new file mode 100644
index 0000000000..e7275607d1
--- /dev/null
+++ b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
@@ -0,0 +1,399 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { ActionDialog, Button, Input, Label, Skeleton, Typography } from "@stackframe/stack-ui";
+import { loadStripe } from "@stripe/stripe-js";
+import { CardElement, Elements, useElements, useStripe } from "@stripe/react-stripe-js";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { Section } from "../section";
+import * as yup from "yup";
+
+type BillingDetails = {
+  name: string | null,
+  email: string | null,
+  phone: string | null,
+  address: {
+    line1: string | null,
+    line2: string | null,
+    city: string | null,
+    state: string | null,
+    postal_code: string | null,
+    country: string | null,
+  } | null,
+};
+
+type PaymentMethodSummary = {
+  id: string,
+  brand: string | null,
+  last4: string | null,
+  exp_month: number | null,
+  exp_year: number | null,
+} | null;
+
+function formatPaymentMethod(pm: NonNullable<PaymentMethodSummary>) {
+  const details = [
+    pm.brand ? pm.brand.toUpperCase() : null,
+    pm.last4 ? `•••• ${pm.last4}` : null,
+    pm.exp_month && pm.exp_year ? `exp ${pm.exp_month}/${pm.exp_year}` : null,
+  ].filter(Boolean);
+  return details.join(" · ");
+}
+
+type CustomerBilling = {
+  hasCustomer: boolean,
+  billingDetails: BillingDetails,
+  defaultPaymentMethod: PaymentMethodSummary,
+};
+
+type CustomerPaymentMethodSetupIntent = {
+  clientSecret: string,
+  stripeAccountId: string,
+};
+
+type CustomerLike = {
+  useBilling: () => CustomerBilling,
+  updateBilling: (update: {
+    name?: string,
+    email?: string,
+    phone?: string,
+    address?: {
+      line1?: string,
+      line2?: string,
+      city?: string,
+      state?: string,
+      postal_code?: string,
+      country?: string,
+    },
+  }) => Promise<void>,
+  createPaymentMethodSetupIntent: () => Promise<CustomerPaymentMethodSetupIntent>,
+  setDefaultPaymentMethodFromSetupIntent: (setupIntentId: string) => Promise<PaymentMethodSummary>,
+};
+
+function SetDefaultPaymentMethodForm(props: {
+  clientSecret: string,
+  onSetupIntentSucceeded: (setupIntentId: string) => Promise<void>,
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const darkMode = "color-scheme" in document.documentElement.style && document.documentElement.style["color-scheme"] === "dark";
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Typography className="font-medium">Card details</Typography>
+        <div className="rounded-md border border-input p-3">
+          <CardElement options={{ hidePostalCode: true, style: { base: { color: darkMode ? "white" : "black" } } }} />
+        </div>
+      </div>
+      {errorMessage && (
+        <Typography variant="secondary" type="footnote">
+          {errorMessage}
+        </Typography>
+      )}
+      <Button
+        onClick={async () => {
+          if (!stripe || !elements) {
+            setErrorMessage("Stripe is still loading. Please try again.");
+            return;
+          }
+          const card = elements.getElement(CardElement);
+          if (!card) {
+            setErrorMessage("Card element not found.");
+            return;
+          }
+
+          const result = await stripe.confirmCardSetup(props.clientSecret, {
+            payment_method: { card },
+          });
+          if (result.error) {
+            setErrorMessage(result.error.message ?? "Failed to save payment method.");
+            return;
+          }
+          if (!result.setupIntent.id) {
+            setErrorMessage("No setup intent returned from Stripe.");
+            return;
+          }
+          await props.onSetupIntentSucceeded(result.setupIntent.id);
+        }}
+      >
+        Save payment method
+      </Button>
+    </div>
+  );
+}
+
+export function PaymentsPanel(props: {
+  title: string,
+  customer?: CustomerLike,
+  mockMode?: boolean,
+}) {
+  if (props.mockMode) {
+    return <MockPaymentsPanel title={props.title} />;
+  }
+  if (!props.customer) {
+    return null;
+  }
+  return <RealPaymentsPanel title={props.title} customer={props.customer} />;
+}
+
+function MockPaymentsPanel(props: { title: string }) {
+  const billingDetails: BillingDetails = {
+    name: "Mock User",
+    email: "mock@example.com",
+    phone: null,
+    address: null,
+  };
+  const defaultPaymentMethod: PaymentMethodSummary = {
+    id: "pm_mock",
+    brand: "visa",
+    last4: "4242",
+    exp_month: 12,
+    exp_year: 2030,
+  };
+
+  return (
+    <div className="space-y-4">
+      <Typography className="font-medium">{props.title}</Typography>
+      <Section
+        title="Billing information"
+        description="Update invoice billing details for this customer."
+      >
+        <Typography variant="secondary" type="footnote">
+          Billing editing is disabled in mock mode.
+        </Typography>
+        <Typography variant="secondary" type="footnote">
+          {billingDetails.email}
+        </Typography>
+      </Section>
+      <Section
+        title="Payment method"
+        description="Manage the default payment method used for subscriptions and invoices."
+      >
+        <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>
+        <Button disabled>
+          Update payment method
+        </Button>
+      </Section>
+    </div>
+  );
+}
+
+function RealPaymentsPanel(props: { title: string, customer: CustomerLike }) {
+  const billing = props.customer.useBilling();
+  const billingDetails = billing.billingDetails;
+  const defaultPaymentMethod = billing.defaultPaymentMethod;
+
+  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
+  const [setupIntentClientSecret, setSetupIntentClientSecret] = useState<string | null>(null);
+  const [setupIntentStripeAccountId, setSetupIntentStripeAccountId] = useState<string | null>(null);
+
+  const billingSchema = useMemo(() => yupObject({
+    name: yupString().optional().default(undefined),
+    email: yupString().optional().default(undefined),
+    phone: yupString().optional().default(undefined),
+    address_line1: yupString().optional().default(undefined),
+    address_line2: yupString().optional().default(undefined),
+    address_city: yupString().optional().default(undefined),
+    address_state: yupString().optional().default(undefined),
+    address_postal_code: yupString().optional().default(undefined),
+    address_country: yupString().optional().default(undefined),
+  }), []);
+
+  const { register, handleSubmit, reset } = useForm<yup.InferType<typeof billingSchema>>({
+    resolver: yupResolver(billingSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      phone: "",
+      address_line1: "",
+      address_line2: "",
+      address_city: "",
+      address_state: "",
+      address_postal_code: "",
+      address_country: "",
+    },
+  });
+
+  const billingFormValues = useMemo(() => ({
+    name: billingDetails.name ?? "",
+    email: billingDetails.email ?? "",
+    phone: billingDetails.phone ?? "",
+    address_line1: billingDetails.address?.line1 ?? "",
+    address_line2: billingDetails.address?.line2 ?? "",
+    address_city: billingDetails.address?.city ?? "",
+    address_state: billingDetails.address?.state ?? "",
+    address_postal_code: billingDetails.address?.postal_code ?? "",
+    address_country: billingDetails.address?.country ?? "",
+  }), [
+    billingDetails.name,
+    billingDetails.email,
+    billingDetails.phone,
+    billingDetails.address?.line1,
+    billingDetails.address?.line2,
+    billingDetails.address?.city,
+    billingDetails.address?.state,
+    billingDetails.address?.postal_code,
+    billingDetails.address?.country,
+  ]);
+
+  const lastAppliedBillingKeyRef = useRef<string | null>(null);
+  const billingKey = useMemo(() => JSON.stringify(billingFormValues), [billingFormValues]);
+
+  useEffect(() => {
+    if (lastAppliedBillingKeyRef.current === billingKey) {
+      return;
+    }
+    lastAppliedBillingKeyRef.current = billingKey;
+    reset(billingFormValues);
+  }, [billingFormValues, billingKey, reset]);
+
+  const stripePromise = useMemo(() => {
+    if (!setupIntentStripeAccountId) return null;
+    const publishableKey = process.env.NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY;
+    if (!publishableKey) return null;
+    return loadStripe(publishableKey, { stripeAccount: setupIntentStripeAccountId });
+  }, [setupIntentStripeAccountId]);
+
+  const openPaymentDialog = () => {
+    runAsynchronouslyWithAlert(async () => {
+      setPaymentDialogOpen(true);
+      const res = await props.customer.createPaymentMethodSetupIntent();
+      setSetupIntentClientSecret(res.clientSecret);
+      setSetupIntentStripeAccountId(res.stripeAccountId);
+    });
+  };
+
+  const closePaymentDialog = () => {
+    setPaymentDialogOpen(false);
+    setSetupIntentClientSecret(null);
+    setSetupIntentStripeAccountId(null);
+  };
+
+  return (
+    <div className="space-y-4">
+      <Typography className="font-medium">{props.title}</Typography>
+
+      <Section
+        title="Billing information"
+        description="Update invoice billing details for this customer."
+      >
+        <form
+          onSubmit={(e) => runAsynchronouslyWithAlert(handleSubmit(async (data) => {
+            const address = {
+              line1: data.address_line1 || undefined,
+              line2: data.address_line2 || undefined,
+              city: data.address_city || undefined,
+              state: data.address_state || undefined,
+              postal_code: data.address_postal_code || undefined,
+              country: data.address_country || undefined,
+            };
+
+            await props.customer.updateBilling({
+              name: data.name || undefined,
+              email: data.email || undefined,
+              phone: data.phone || undefined,
+              address,
+            });
+          })(e))}
+          className="space-y-3"
+        >
+          <div className="space-y-2">
+            <Label htmlFor="billing-name">Name / Company</Label>
+            <Input id="billing-name" {...register("name")} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="billing-email">Billing email</Label>
+            <Input id="billing-email" {...register("email")} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="billing-phone">Phone</Label>
+            <Input id="billing-phone" {...register("phone")} />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div className="space-y-2">
+              <Label htmlFor="billing-line1">Address line 1</Label>
+              <Input id="billing-line1" {...register("address_line1")} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="billing-line2">Address line 2</Label>
+              <Input id="billing-line2" {...register("address_line2")} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="billing-city">City</Label>
+              <Input id="billing-city" {...register("address_city")} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="billing-state">State / Province</Label>
+              <Input id="billing-state" {...register("address_state")} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="billing-postal">Postal code</Label>
+              <Input id="billing-postal" {...register("address_postal_code")} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="billing-country">Country</Label>
+              <Input id="billing-country" {...register("address_country")} />
+            </div>
+          </div>
+
+          <div className="flex justify-end">
+            <Button type="submit" className="mr-0 ml-auto">
+              Save billing info
+            </Button>
+          </div>
+        </form>
+      </Section>
+
+      <Section
+        title="Payment method"
+        description="Manage the default payment method used for subscriptions and invoices."
+      >
+        {defaultPaymentMethod ? (
+          <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>
+        ) : (
+          <Typography variant="secondary" type="footnote">No payment method on file.</Typography>
+        )}
+
+        <Button onClick={openPaymentDialog}>
+          {defaultPaymentMethod ? "Update payment method" : "Add payment method"}
+        </Button>
+
+        <ActionDialog
+          open={paymentDialogOpen}
+          onOpenChange={(open) => {
+            if (!open) {
+              closePaymentDialog();
+            } else {
+              setPaymentDialogOpen(true);
+            }
+          }}
+          title="Update payment method"
+        >
+          {!setupIntentClientSecret || !setupIntentStripeAccountId || !stripePromise ? (
+            <Skeleton className="h-10 w-full" />
+          ) : (
+            <Elements
+              stripe={stripePromise}
+              options={{
+                clientSecret: setupIntentClientSecret,
+              }}
+            >
+              <SetDefaultPaymentMethodForm
+                clientSecret={setupIntentClientSecret}
+                onSetupIntentSucceeded={async (setupIntentId) => {
+                  await props.customer.setDefaultPaymentMethodFromSetupIntent(setupIntentId);
+                  closePaymentDialog();
+                }}
+              />
+            </Elements>
+          )}
+        </ActionDialog>
+      </Section>
+    </div>
+  );
+}
diff --git a/packages/template/src/components-page/account-settings/teams/team-page.tsx b/packages/template/src/components-page/account-settings/teams/team-page.tsx
index 362afa47ca..12d85d0dc1 100644
--- a/packages/template/src/components-page/account-settings/teams/team-page.tsx
+++ b/packages/template/src/components-page/account-settings/teams/team-page.tsx
@@ -7,6 +7,7 @@ import { TeamMemberInvitationSection } from "./team-member-invitation-section";
 import { TeamMemberListSection } from "./team-member-list-section";
 import { TeamProfileImageSection } from "./team-profile-image-section";
 import { TeamUserProfileSection } from "./team-profile-user-section";
+import { TeamPaymentsSection } from "./team-payments-section";
 
 
 export function TeamPage(props: { team: Team }) {
@@ -17,6 +18,7 @@ export function TeamPage(props: { team: Team }) {
       <TeamDisplayNameSection key={`display-name-${props.team.id}`} team={props.team} />
       <TeamMemberListSection key={`member-list-${props.team.id}`} team={props.team} />
       <TeamMemberInvitationSection key={`member-invitation-${props.team.id}`} team={props.team} />
+      <TeamPaymentsSection key={`payments-${props.team.id}`} team={props.team} />
       <TeamApiKeysSection key={`api-keys-${props.team.id}`} team={props.team} />
       <LeaveTeamSection key={`leave-team-${props.team.id}`} team={props.team} />
     </PageLayout>
diff --git a/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx b/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
new file mode 100644
index 0000000000..92e617cee2
--- /dev/null
+++ b/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { Typography } from "@stackframe/stack-ui";
+import { Team, useUser } from "../../..";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+import { PaymentsPanel } from "../payments/payments-panel";
+
+export function TeamPaymentsSection(props: { team: Team }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+
+  const isTeamAdmin = !!user.usePermission(props.team, "team_admin");
+
+  if (isTeamAdmin) {
+    return (
+      <PaymentsPanel
+        title={t("Team payments")}
+        customer={props.team}
+      />
+    );
+  }
+
+  return (
+    <Section
+      title={t("Team payments")}
+      description={t("Manage billing details and the default payment method for this team.")}
+    >
+      <Typography variant="secondary" type="footnote">
+        {t("You need team admin permissions to manage team billing.")}
+      </Typography>
+    </Section>
+  );
+}
diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 9962b6aec8..3a0d2fe322 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -42,7 +42,7 @@ import { ApiKey, ApiKeyCreationOptions, ApiKeyUpdateOptions, apiKeyCreationOptio
 import { ConvexCtx, GetCurrentPartialUserOptions, GetCurrentUserOptions, HandlerUrls, OAuthScopesOnSignIn, RedirectMethod, RedirectToOptions, RequestLike, TokenStoreInit, stackAppInternalsSymbol } from "../../common";
 import { OAuthConnection } from "../../connected-accounts";
 import { ContactChannel, ContactChannelCreateOptions, ContactChannelUpdateOptions, contactChannelCreateOptionsToCrud, contactChannelUpdateOptionsToCrud } from "../../contact-channels";
-import { Customer, CustomerProductsList, CustomerProductsListOptions, CustomerProductsRequestOptions, Item } from "../../customers";
+import { Customer, CustomerBilling, CustomerBillingUpdate, CustomerDefaultPaymentMethod, CustomerPaymentMethodSetupIntent, CustomerProductsList, CustomerProductsListOptions, CustomerProductsRequestOptions, Item } from "../../customers";
 import { NotificationCategory } from "../../notification-categories";
 import { TeamPermission } from "../../permissions";
 import { AdminOwnedProject, AdminProjectUpdateOptions, Project, adminProjectCreateOptionsToCrud } from "../../projects";
@@ -96,6 +96,19 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
   private __DEMO_ENABLE_SLIGHT_FETCH_DELAY = false;
   private readonly _ownedAdminApps = new DependenciesMap<[InternalSession, string], _StackAdminAppImplIncomplete<false, string>>();
 
+  protected _getDefaultAuthenticatedRequestType(): "client" | "server" {
+    const options = this._interface.options as any;
+    return options && typeof options.secretServerKey === "string" && options.secretServerKey.length > 0 ? "server" : "client";
+  }
+
+  protected _getSecretServerKeyHeader(): Record<string, string> {
+    const options = this._interface.options as any;
+    if (options && typeof options.secretServerKey === "string" && options.secretServerKey.length > 0) {
+      return { "x-stack-secret-server-key": options.secretServerKey };
+    }
+    return {};
+  }
+
   private readonly _currentUserCache = createCacheBySession(async (session) => {
     if (this.__DEMO_ENABLE_SLIGHT_FETCH_DELAY) {
       await wait(2000);
@@ -269,6 +282,45 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     }
   );
 
+  private readonly _customerBillingCache = createCacheBySession<["user" | "team", string], {
+    has_customer: boolean,
+    billing_details: {
+      name: string | null,
+      email: string | null,
+      phone: string | null,
+      address: {
+        line1: string | null,
+        line2: string | null,
+        city: string | null,
+        state: string | null,
+        postal_code: string | null,
+        country: string | null,
+      } | null,
+    },
+    default_payment_method: {
+      id: string,
+      brand: string | null,
+      last4: string | null,
+      exp_month: number | null,
+      exp_year: number | null,
+    } | null,
+  }>(
+    async (session, [customerType, customerId]) => {
+      const requestType = this._getDefaultAuthenticatedRequestType();
+      const response = await this._interface.sendClientRequest(
+        `/payments/billing/${customerType}/${customerId}`,
+        {
+          headers: {
+            ...this._getSecretServerKeyHeader(),
+          },
+        },
+        session,
+        requestType,
+      );
+      return await response.json();
+    }
+  );
+
   private readonly _convexPartialUserCache = createCache<[unknown], TokenPartialUser | null>(
     async ([ctx]) => await this._getPartialUserFromConvex(ctx as any)
   );
@@ -1157,6 +1209,41 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     return Object.assign(products, { nextCursor: response.pagination.next_cursor ?? null });
   }
 
+  protected _customerBillingFromResponse(response: {
+    has_customer: boolean,
+    billing_details: {
+      name: string | null,
+      email: string | null,
+      phone: string | null,
+      address: {
+        line1: string | null,
+        line2: string | null,
+        city: string | null,
+        state: string | null,
+        postal_code: string | null,
+        country: string | null,
+      } | null,
+    },
+    default_payment_method: {
+      id: string,
+      brand: string | null,
+      last4: string | null,
+      exp_month: number | null,
+      exp_year: number | null,
+    } | null,
+  }): CustomerBilling {
+    return {
+      hasCustomer: response.has_customer,
+      billingDetails: {
+        name: response.billing_details.name,
+        email: response.billing_details.email,
+        phone: response.billing_details.phone,
+        address: response.billing_details.address,
+      },
+      defaultPaymentMethod: response.default_payment_method,
+    };
+  }
+
   protected _createAuth(session: InternalSession): Auth {
     const app = this;
     return {
@@ -1587,8 +1674,83 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
 
   protected _createCustomer(userIdOrTeamId: string, type: "user" | "team", session: InternalSession | null): Omit<Customer, "id"> {
     const app = this;
+    const effectiveSession = session ?? app._interface.createSession({ refreshToken: null });
     const customerOptions = type === "user" ? { userId: userIdOrTeamId } : { teamId: userIdOrTeamId };
     return {
+      async getBilling() {
+        const response = Result.orThrow(await app._customerBillingCache.getOrWait([effectiveSession, type, userIdOrTeamId], "write-only"));
+        return app._customerBillingFromResponse(response);
+      },
+      // IF_PLATFORM react-like
+      useBilling() {
+        const response = useAsyncCache(app._customerBillingCache, [effectiveSession, type, userIdOrTeamId] as const, "customer.useBilling()");
+        return app._customerBillingFromResponse(response);
+      },
+      // END_PLATFORM
+      async updateBilling(update: CustomerBillingUpdate) {
+        const requestType = app._getDefaultAuthenticatedRequestType();
+        await app._interface.sendClientRequest(
+          `/payments/billing/${type}/${userIdOrTeamId}`,
+          {
+            method: "POST",
+            headers: {
+              ...app._getSecretServerKeyHeader(),
+              "content-type": "application/json",
+            },
+            body: JSON.stringify({
+              name: update.name,
+              email: update.email,
+              phone: update.phone,
+              address: update.address,
+            }),
+          },
+          effectiveSession,
+          requestType,
+        );
+        await app._customerBillingCache.refresh([effectiveSession, type, userIdOrTeamId]);
+      },
+      async createPaymentMethodSetupIntent(): Promise<CustomerPaymentMethodSetupIntent> {
+        const requestType = app._getDefaultAuthenticatedRequestType();
+        const response = await app._interface.sendClientRequest(
+          `/payments/payment-method/${type}/${userIdOrTeamId}/setup-intent`,
+          {
+            method: "POST",
+            headers: {
+              ...app._getSecretServerKeyHeader(),
+              "content-type": "application/json",
+            },
+            body: JSON.stringify({}),
+          },
+          effectiveSession,
+          requestType,
+        );
+        const body = await response.json() as { client_secret: string, stripe_account_id: string };
+        return {
+          clientSecret: body.client_secret,
+          stripeAccountId: body.stripe_account_id,
+        };
+      },
+      async setDefaultPaymentMethodFromSetupIntent(setupIntentId: string): Promise<CustomerDefaultPaymentMethod> {
+        const requestType = app._getDefaultAuthenticatedRequestType();
+        const response = await app._interface.sendClientRequest(
+          `/payments/payment-method/${type}/${userIdOrTeamId}/set-default`,
+          {
+            method: "POST",
+            headers: {
+              ...app._getSecretServerKeyHeader(),
+              "content-type": "application/json",
+            },
+            body: JSON.stringify({
+              setup_intent_id: setupIntentId,
+            }),
+          },
+          effectiveSession,
+          requestType,
+        );
+        const body = await response.json() as { default_payment_method: CustomerDefaultPaymentMethod };
+        await app._customerBillingCache.refresh([effectiveSession, type, userIdOrTeamId]);
+        return body.default_payment_method;
+      },
       async getItem(itemId: string) {
         return await app.getItem({ itemId, ...customerOptions });
       },
@@ -1606,7 +1768,7 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
       },
       // END_PLATFORM
       async createCheckoutUrl(options: { productId: string, returnUrl?: string }) {
-        return await app._interface.createCheckoutUrl(type, userIdOrTeamId, options.productId, session, options.returnUrl);
+        return await app._interface.createCheckoutUrl(type, userIdOrTeamId, options.productId, effectiveSession, options.returnUrl);
       },
     };
   }
diff --git a/packages/template/src/lib/stack-app/customers/index.ts b/packages/template/src/lib/stack-app/customers/index.ts
index c3108dd416..7f9312b86e 100644
--- a/packages/template/src/lib/stack-app/customers/index.ts
+++ b/packages/template/src/lib/stack-app/customers/index.ts
@@ -55,6 +55,55 @@ export type CustomerProductsRequestOptions =
   | ({ teamId: string } & CustomerProductsListOptions)
   | ({ customCustomerId: string } & CustomerProductsListOptions);
 
+export type CustomerBillingAddress = {
+  line1: string | null,
+  line2: string | null,
+  city: string | null,
+  state: string | null,
+  postal_code: string | null,
+  country: string | null,
+} | null;
+
+export type CustomerBillingDetails = {
+  name: string | null,
+  email: string | null,
+  phone: string | null,
+  address: CustomerBillingAddress,
+};
+
+export type CustomerDefaultPaymentMethod = {
+  id: string,
+  brand: string | null,
+  last4: string | null,
+  exp_month: number | null,
+  exp_year: number | null,
+} | null;
+
+export type CustomerBilling = {
+  hasCustomer: boolean,
+  billingDetails: CustomerBillingDetails,
+  defaultPaymentMethod: CustomerDefaultPaymentMethod,
+};
+
+export type CustomerBillingUpdate = {
+  name?: string,
+  email?: string,
+  phone?: string,
+  address?: {
+    line1?: string,
+    line2?: string,
+    city?: string,
+    state?: string,
+    postal_code?: string,
+    country?: string,
+  },
+};
+
+export type CustomerPaymentMethodSetupIntent = {
+  clientSecret: string,
+  stripeAccountId: string,
+};
+
 export type Customer<IsServer extends boolean = false> =
   & {
     readonly id: string,
@@ -63,7 +112,19 @@ export type Customer<IsServer extends boolean = false> =
       | { productId: string, returnUrl?: string }
       | (IsServer extends true ? { product: InlineProduct, returnUrl?: string } : never)
     )): Promise<string>,
+
+    updateBilling(update: CustomerBillingUpdate): Promise<void>,
+
+    createPaymentMethodSetupIntent(): Promise<CustomerPaymentMethodSetupIntent>,
+
+    setDefaultPaymentMethodFromSetupIntent(setupIntentId: string): Promise<CustomerDefaultPaymentMethod>,
   }
+  & AsyncStoreProperty<
+    "billing",
+    [],
+    CustomerBilling,
+    false
+  >
   & AsyncStoreProperty<
     "item",
     [itemId: string],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88706b191e..d82e391806 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -173,7 +173,7 @@ importers:
         version: 1.2.1(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
       '@sentry/nextjs':
         specifier: ^10.11.0
-        version: 10.11.0(@opentelemetry/context-async-hooks@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.4.9(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1))(react@19.0.1)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))
+        version: 10.11.0(@opentelemetry/context-async-hooks@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.4.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1))(react@19.0.1)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))
       '@simplewebauthn/server':
         specifier: ^11.0.0
         version: 11.0.0(encoding@0.1.13)
@@ -209,7 +209,7 @@ importers:
         version: 7.4.1
       freestyle-sandboxes:
         specifier: ^0.0.92
-        version: 0.0.92(672f7be0dc39c7396cf7433b7b8a4026)
+        version: 0.0.92(31ac028c4e005007d3aeab14687a36a6)
       jose:
         specifier: ^5.2.2
         version: 5.4.0
@@ -218,7 +218,7 @@ importers:
         version: 1.0.6
       next:
         specifier: 15.4.9
-        version: 15.4.9(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
+        version: 15.4.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
       nodemailer:
         specifier: ^6.9.10
         version: 6.9.13
@@ -1462,6 +1462,12 @@ importers:
       '@stackframe/stack-ui':
         specifier: workspace:*
         version: link:../stack-ui
+      '@stripe/react-stripe-js':
+        specifier: ^3.8.1
+        version: 3.8.1(@stripe/stripe-js@7.7.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@stripe/stripe-js':
+        specifier: ^7.7.0
+        version: 7.7.0
       '@tanstack/react-table':
         specifier: ^8.20.5
         version: 8.20.5(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -1586,6 +1592,12 @@ importers:
       '@stackframe/stack-ui':
         specifier: workspace:*
         version: link:../stack-ui
+      '@stripe/react-stripe-js':
+        specifier: ^3.8.1
+        version: 3.8.1(@stripe/stripe-js@7.7.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@stripe/stripe-js':
+        specifier: ^7.7.0
+        version: 7.7.0
       '@tanstack/react-table':
         specifier: ^8.20.5
         version: 8.20.5(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -1774,7 +1786,7 @@ importers:
     devDependencies:
       '@sentry/nextjs':
         specifier: ^10.11.0
-        version: 10.11.0(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.0.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))
+        version: 10.11.0(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.0.9(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))
       '@simplewebauthn/types':
         specifier: ^11.0.0
         version: 11.0.0
@@ -1968,6 +1980,12 @@ importers:
       '@stackframe/stack-ui':
         specifier: workspace:*
         version: link:../stack-ui
+      '@stripe/react-stripe-js':
+        specifier: ^3.8.1
+        version: 3.8.1(@stripe/stripe-js@7.7.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@stripe/stripe-js':
+        specifier: ^7.7.0
+        version: 7.7.0
       '@tanstack/react-table':
         specifier: ^8.20.5
         version: 8.20.5(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -18278,29 +18296,29 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.28.5)':
+  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.0)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
       '@babel/traverse': 7.28.5
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.28.5)':
+  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-annotate-as-pure': 7.27.3
       regexpu-core: 6.4.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.5)':
+  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
       debug: 4.4.3
@@ -18364,6 +18382,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.0)':
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -18385,9 +18412,9 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.27.1': {}
 
-  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.5)':
+  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-wrap-function': 7.28.3
       '@babel/traverse': 7.28.5
@@ -18403,9 +18430,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
       '@babel/traverse': 7.28.5
@@ -18501,18 +18528,18 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.5
 
-  '@babel/plugin-proposal-decorators@7.28.0(@babel/core@7.28.5)':
+  '@babel/plugin-proposal-decorators@7.28.0(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.0)
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-decorators': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-decorators': 7.27.1(@babel/core@7.28.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-export-default-from@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-proposal-export-default-from@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
   '@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.28.5)':
@@ -18525,94 +18552,99 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-decorators@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-decorators@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-export-default-from@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-export-default-from@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.28.0)':
+    dependencies:
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
   '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.28.5)':
@@ -18620,195 +18652,195 @@ snapshots:
       '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.5)':
+  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.0)
       '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoping@7.28.5(@babel/core@7.28.5)':
+  '@babel/plugin-transform-block-scoping@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.0)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.5)':
+  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-globals': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.0)
       '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/template': 7.27.2
 
-  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.28.5)':
+  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.0)
 
-  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-logical-assignment-operators@7.28.5(@babel/core@7.28.5)':
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.0)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.0)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.28.5)':
+  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.0)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.0)
       '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.5)':
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.5)':
+  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.0)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.0)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.28.5)':
+  '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -18817,6 +18849,11 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.0)':
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+
   '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -18827,100 +18864,105 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.0)':
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+
   '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
       '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-pure-annotations@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-react-pure-annotations@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.5)':
+  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-runtime@7.28.5(@babel/core@7.28.5)':
+  '@babel/plugin-transform-runtime@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
-      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.5)
-      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.28.5)
-      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.0)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.28.0)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.0)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.28.5)':
+  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.0)
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.5)':
+  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.0)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/preset-react@7.28.5(@babel/core@7.28.5)':
+  '@babel/preset-react@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-pure-annotations': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.28.0)
+      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-react-pure-annotations': 7.27.1(@babel/core@7.28.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-typescript@7.28.5(@babel/core@7.28.5)':
+  '@babel/preset-typescript@7.28.5(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -20255,9 +20297,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))':
+  '@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))':
     dependencies:
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
 
   '@expo/osascript@2.3.7':
     dependencies:
@@ -20317,11 +20359,11 @@ snapshots:
 
   '@expo/sudo-prompt@9.3.2': {}
 
-  '@expo/vector-icons@14.1.0(expo-font@13.3.2(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)':
+  '@expo/vector-icons@14.1.0(expo-font@13.3.2(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)':
     dependencies:
-      expo-font: 13.3.2(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1)
+      expo-font: 13.3.2(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1)
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
 
   '@expo/ws-tunnel@1.0.6': {}
 
@@ -23317,67 +23359,67 @@ snapshots:
 
   '@react-native/assets-registry@0.80.1': {}
 
-  '@react-native/babel-plugin-codegen@0.79.6(@babel/core@7.28.5)':
+  '@react-native/babel-plugin-codegen@0.79.6(@babel/core@7.28.0)':
     dependencies:
       '@babel/traverse': 7.28.5
-      '@react-native/codegen': 0.79.6(@babel/core@7.28.5)
+      '@react-native/codegen': 0.79.6(@babel/core@7.28.0)
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
 
-  '@react-native/babel-preset@0.79.6(@babel/core@7.28.5)':
+  '@react-native/babel-preset@0.79.6(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.5)
-      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.28.5)
-      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.5)
-      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-logical-assignment-operators': 7.28.5(@babel/core@7.28.5)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.5)
-      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.5)
-      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.28.5)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.0)
+      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.28.0)
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.0)
+      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.0)
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.5(@babel/core@7.28.0)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.0)
+      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.0)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.0)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.28.0)
+      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.0)
+      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.28.0)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.0)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.0)
       '@babel/template': 7.27.2
-      '@react-native/babel-plugin-codegen': 0.79.6(@babel/core@7.28.5)
+      '@react-native/babel-plugin-codegen': 0.79.6(@babel/core@7.28.0)
       babel-plugin-syntax-hermes-parser: 0.25.1
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.28.5)
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.28.0)
       react-refresh: 0.14.2
     transitivePeerDependencies:
       - supports-color
 
-  '@react-native/codegen@0.79.6(@babel/core@7.28.5)':
+  '@react-native/codegen@0.79.6(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@babel/parser': 7.28.5
       glob: 7.2.3
       hermes-parser: 0.25.1
@@ -23385,9 +23427,9 @@ snapshots:
       nullthrows: 1.1.1
       yargs: 17.7.2
 
-  '@react-native/codegen@0.80.1(@babel/core@7.28.5)':
+  '@react-native/codegen@0.80.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       glob: 7.2.3
       hermes-parser: 0.28.1
       invariant: 2.2.4
@@ -23457,24 +23499,24 @@ snapshots:
 
   '@react-native/normalize-colors@0.80.1': {}
 
-  '@react-native/virtualized-lists@0.80.1(@types/react@18.3.12)(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)':
+  '@react-native/virtualized-lists@0.80.1(@types/react@18.3.12)(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)':
     dependencies:
       invariant: 2.2.4
       nullthrows: 1.1.1
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
     optionalDependencies:
       '@types/react': 18.3.12
 
-  '@react-navigation/bottom-tabs@7.4.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)':
+  '@react-navigation/bottom-tabs@7.4.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)':
     dependencies:
-      '@react-navigation/elements': 2.5.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
-      '@react-navigation/native': 7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      '@react-navigation/elements': 2.5.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
+      '@react-navigation/native': 7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       color: 4.2.3
       react: 18.3.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
-      react-native-safe-area-context: 5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      react-native-screens: 4.11.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
+      react-native-safe-area-context: 5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native-screens: 4.11.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
     transitivePeerDependencies:
       - '@react-native-masked-view/masked-view'
 
@@ -23500,46 +23542,46 @@ snapshots:
       use-latest-callback: 0.2.4(react@19.0.1)
       use-sync-external-store: 1.5.0(react@19.0.1)
 
-  '@react-navigation/elements@2.5.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)':
+  '@react-navigation/elements@2.5.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)':
     dependencies:
-      '@react-navigation/native': 7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      '@react-navigation/native': 7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       color: 4.2.3
       react: 18.3.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
-      react-native-safe-area-context: 5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
+      react-native-safe-area-context: 5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       use-latest-callback: 0.2.4(react@18.3.1)
       use-sync-external-store: 1.5.0(react@18.3.1)
 
-  '@react-navigation/native-stack@7.3.21(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)':
+  '@react-navigation/native-stack@7.3.21(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)':
     dependencies:
-      '@react-navigation/elements': 2.5.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
-      '@react-navigation/native': 7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      '@react-navigation/elements': 2.5.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
+      '@react-navigation/native': 7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       react: 18.3.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
-      react-native-safe-area-context: 5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      react-native-screens: 4.11.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
+      react-native-safe-area-context: 5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native-screens: 4.11.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       warn-once: 0.1.1
     transitivePeerDependencies:
       - '@react-native-masked-view/masked-view'
 
-  '@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)':
+  '@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)':
     dependencies:
       '@react-navigation/core': 7.12.1(react@18.3.1)
       escape-string-regexp: 4.0.0
       fast-deep-equal: 3.1.3
       nanoid: 3.3.11
       react: 18.3.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
       use-latest-callback: 0.2.4(react@18.3.1)
 
-  '@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)':
+  '@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@react-navigation/core': 7.12.1(react@19.0.1)
       escape-string-regexp: 4.0.0
       fast-deep-equal: 3.1.3
       nanoid: 3.3.11
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
       use-latest-callback: 0.2.4(react@19.0.1)
 
   '@react-navigation/routers@7.4.1':
@@ -23924,7 +23966,7 @@ snapshots:
 
   '@sentry/core@10.11.0': {}
 
-  '@sentry/nextjs@10.11.0(@opentelemetry/context-async-hooks@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.4.9(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1))(react@19.0.1)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))':
+  '@sentry/nextjs@10.11.0(@opentelemetry/context-async-hooks@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.4.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1))(react@19.0.1)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/semantic-conventions': 1.37.0
@@ -23938,7 +23980,7 @@ snapshots:
       '@sentry/vercel-edge': 10.11.0
       '@sentry/webpack-plugin': 4.3.0(encoding@0.1.13)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))
       chalk: 3.0.0
-      next: 15.4.9(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
+      next: 15.4.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
       resolve: 1.22.8
       rollup: 4.50.1
       stacktrace-parser: 0.1.11
@@ -23951,7 +23993,7 @@ snapshots:
       - supports-color
       - webpack
 
-  '@sentry/nextjs@10.11.0(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.0.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))':
+  '@sentry/nextjs@10.11.0(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.0.9(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/semantic-conventions': 1.37.0
@@ -23965,7 +24007,7 @@ snapshots:
       '@sentry/vercel-edge': 10.11.0
       '@sentry/webpack-plugin': 4.3.0(encoding@0.1.13)(webpack@5.92.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.24.2))
       chalk: 3.0.0
-      next: 16.0.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.9(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       resolve: 1.22.8
       rollup: 4.50.1
       stacktrace-parser: 0.1.11
@@ -26177,13 +26219,13 @@ snapshots:
 
   b4a@1.6.6: {}
 
-  babel-jest@29.7.0(@babel/core@7.28.5):
+  babel-jest@29.7.0(@babel/core@7.28.0):
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       '@jest/transform': 29.7.0
       '@types/babel__core': 7.20.5
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.6.3(@babel/core@7.28.5)
+      babel-preset-jest: 29.6.3(@babel/core@7.28.0)
       chalk: 4.1.2
       graceful-fs: 4.2.11
       slash: 3.0.0
@@ -26213,27 +26255,27 @@ snapshots:
       cosmiconfig: 7.1.0
       resolve: 1.22.10
 
-  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.5):
+  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.0):
     dependencies:
       '@babel/compat-data': 7.28.5
-      '@babel/core': 7.28.5
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.28.5):
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.28.0):
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
       core-js-compat: 3.46.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.5):
+  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.0):
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      '@babel/core': 7.28.0
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -26247,51 +26289,51 @@ snapshots:
     dependencies:
       hermes-parser: 0.28.1
 
-  babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.28.5):
+  babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.28.0):
     dependencies:
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.0)
     transitivePeerDependencies:
       - '@babel/core'
 
-  babel-preset-current-node-syntax@1.2.0(@babel/core@7.28.5):
+  babel-preset-current-node-syntax@1.2.0(@babel/core@7.28.0):
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.28.5)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.28.5)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.28.5)
-      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.5)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.28.5)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.28.5)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.5)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.28.5)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.28.5)
-
-  babel-preset-expo@13.2.4(@babel/core@7.28.5):
+      '@babel/core': 7.28.0
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.28.0)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.28.0)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.28.0)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.0)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.28.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.28.0)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.28.0)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.28.0)
+
+  babel-preset-expo@13.2.4(@babel/core@7.28.0):
     dependencies:
       '@babel/helper-module-imports': 7.27.1
-      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.5)
-      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.5)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.28.5)
-      '@babel/preset-react': 7.28.5(@babel/core@7.28.5)
-      '@babel/preset-typescript': 7.28.5(@babel/core@7.28.5)
-      '@react-native/babel-preset': 0.79.6(@babel/core@7.28.5)
+      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.0)
+      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.0)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.0)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.28.0)
+      '@babel/preset-react': 7.28.5(@babel/core@7.28.0)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.28.0)
+      '@react-native/babel-preset': 0.79.6(@babel/core@7.28.0)
       babel-plugin-react-native-web: 0.19.13
       babel-plugin-syntax-hermes-parser: 0.25.1
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.28.5)
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.28.0)
       debug: 4.4.3
       react-refresh: 0.14.2
       resolve-from: 5.0.0
@@ -26299,11 +26341,11 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  babel-preset-jest@29.6.3(@babel/core@7.28.5):
+  babel-preset-jest@29.6.3(@babel/core@7.28.0):
     dependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
       babel-plugin-jest-hoist: 29.6.3
-      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.28.5)
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.28.0)
 
   bail@2.0.2: {}
 
@@ -28076,8 +28118,8 @@ snapshots:
       '@typescript-eslint/parser': 6.21.0(eslint@8.30.0)(typescript@5.8.3)
       eslint: 8.30.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.30.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0))(eslint@8.30.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.30.0)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.30.0)
       eslint-plugin-react: 7.37.2(eslint@8.30.0)
       eslint-plugin-react-hooks: 5.1.0(eslint@8.30.0)
@@ -28132,19 +28174,19 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.30.0):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0))(eslint@8.30.0):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
       enhanced-resolve: 5.17.1
       eslint: 8.30.0
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.30.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0))(eslint@8.30.0))(eslint@8.30.0)
       fast-glob: 3.3.3
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.30.0)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
@@ -28183,14 +28225,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.30.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0))(eslint@8.30.0))(eslint@8.30.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 6.21.0(eslint@8.30.0)(typescript@5.8.3)
       eslint: 8.30.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.30.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0))(eslint@8.30.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -28287,7 +28329,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.30.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -28298,7 +28340,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.30.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.30.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.30.0)(typescript@5.8.3))(eslint@8.30.0))(eslint@8.30.0))(eslint@8.30.0)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -28645,56 +28687,56 @@ snapshots:
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
 
-  expo-asset@11.1.7(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
+  expo-asset@11.1.7(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
     dependencies:
       '@expo/image-utils': 0.7.6
-      expo: 53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      expo-constants: 17.1.7(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))
+      expo: 53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      expo-constants: 17.1.7(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
     transitivePeerDependencies:
       - supports-color
 
-  expo-constants@17.0.8(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)):
+  expo-constants@17.0.8(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)):
     dependencies:
       '@expo/config': 10.0.11
       '@expo/env': 0.4.2
-      expo: 53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      expo: 53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
     transitivePeerDependencies:
       - supports-color
 
-  expo-constants@17.1.7(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)):
+  expo-constants@17.1.7(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)):
     dependencies:
       '@expo/config': 11.0.13
       '@expo/env': 1.0.7
-      expo: 53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      expo: 53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
     transitivePeerDependencies:
       - supports-color
 
-  expo-file-system@18.1.11(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)):
+  expo-file-system@18.1.11(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)):
     dependencies:
-      expo: 53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      expo: 53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
 
-  expo-font@13.3.2(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1):
+  expo-font@13.3.2(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1):
     dependencies:
-      expo: 53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      expo: 53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       fontfaceobserver: 2.3.0
       react: 19.0.1
 
-  expo-keep-awake@14.1.4(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1):
+  expo-keep-awake@14.1.4(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1):
     dependencies:
-      expo: 53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      expo: 53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       react: 19.0.1
 
-  expo-linking@7.0.5(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
+  expo-linking@7.0.5(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
     dependencies:
-      expo-constants: 17.0.8(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))
+      expo-constants: 17.0.8(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))
       invariant: 2.2.4
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
     transitivePeerDependencies:
       - expo
       - supports-color
@@ -28713,23 +28755,23 @@ snapshots:
     dependencies:
       invariant: 2.2.4
 
-  expo-router@4.0.21(ac684ef6e40bdfd939acf2f515064861):
+  expo-router@4.0.21(9fbec2365257d605c7897c10f2a4cec9):
     dependencies:
-      '@expo/metro-runtime': 4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))
+      '@expo/metro-runtime': 4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))
       '@expo/server': 0.5.3
       '@radix-ui/react-slot': 1.0.1(react@18.3.1)
-      '@react-navigation/bottom-tabs': 7.4.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
-      '@react-navigation/native': 7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
-      '@react-navigation/native-stack': 7.3.21(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
+      '@react-navigation/bottom-tabs': 7.4.2(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
+      '@react-navigation/native': 7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
+      '@react-navigation/native-stack': 7.3.21(@react-navigation/native@7.1.14(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
       client-only: 0.0.1
-      expo: 53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      expo-constants: 17.1.7(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))
-      expo-linking: 7.0.5(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      expo: 53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      expo-constants: 17.1.7(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))
+      expo-linking: 7.0.5(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       react-helmet-async: 1.3.0(react-dom@19.0.1(react@19.0.1))(react@18.3.1)
       react-native-helmet-async: 2.0.4(react@18.3.1)
-      react-native-is-edge-to-edge: 1.2.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
-      react-native-safe-area-context: 5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      react-native-screens: 4.11.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native-is-edge-to-edge: 1.2.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1)
+      react-native-safe-area-context: 5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native-screens: 4.11.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       schema-utils: 4.3.2
       semver: 7.6.3
       server-only: 0.0.1
@@ -28740,7 +28782,7 @@ snapshots:
       - react-native
       - supports-color
 
-  expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
+  expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
     dependencies:
       '@babel/runtime': 7.28.4
       '@expo/cli': 0.24.18
@@ -28748,21 +28790,21 @@ snapshots:
       '@expo/config-plugins': 10.1.2
       '@expo/fingerprint': 0.13.4
       '@expo/metro-config': 0.20.17
-      '@expo/vector-icons': 14.1.0(expo-font@13.3.2(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      babel-preset-expo: 13.2.4(@babel/core@7.28.5)
-      expo-asset: 11.1.7(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
-      expo-constants: 17.1.7(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))
-      expo-file-system: 18.1.11(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))
-      expo-font: 13.3.2(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1)
-      expo-keep-awake: 14.1.4(expo@53.0.17(@babel/core@7.28.5)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1)
+      '@expo/vector-icons': 14.1.0(expo-font@13.3.2(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      babel-preset-expo: 13.2.4(@babel/core@7.28.0)
+      expo-asset: 11.1.7(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      expo-constants: 17.1.7(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))
+      expo-file-system: 18.1.11(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))
+      expo-font: 13.3.2(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1)
+      expo-keep-awake: 14.1.4(expo@53.0.17(@babel/core@7.28.0)(@expo/metro-runtime@4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)))(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1))(react@19.0.1)
       expo-modules-autolinking: 2.1.13
       expo-modules-core: 2.4.2
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
-      react-native-edge-to-edge: 1.6.0(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
+      react-native-edge-to-edge: 1.6.0(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       whatwg-url-without-unicode: 8.0.0-3
     optionalDependencies:
-      '@expo/metro-runtime': 4.0.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))
+      '@expo/metro-runtime': 4.0.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-react-compiler
@@ -29072,11 +29114,11 @@ snapshots:
 
   freeport-async@2.0.0: {}
 
-  freestyle-sandboxes@0.0.66(672f7be0dc39c7396cf7433b7b8a4026):
+  freestyle-sandboxes@0.0.66(31ac028c4e005007d3aeab14687a36a6):
     dependencies:
       '@hey-api/client-fetch': 0.5.7
       '@tanstack/react-query': 5.90.7(react@18.3.1)
-      expo-router: 4.0.21(ac684ef6e40bdfd939acf2f515064861)
+      expo-router: 4.0.21(9fbec2365257d605c7897c10f2a4cec9)
       glob: 11.0.1
       hono: 4.8.3
       openai: 4.104.0(encoding@0.1.13)(ws@8.18.3)(zod@3.25.76)
@@ -29099,13 +29141,13 @@ snapshots:
       - supports-color
       - ws
 
-  freestyle-sandboxes@0.0.92(672f7be0dc39c7396cf7433b7b8a4026):
+  freestyle-sandboxes@0.0.92(31ac028c4e005007d3aeab14687a36a6):
     dependencies:
       '@hey-api/client-fetch': 0.5.7
       '@tanstack/react-query': 5.81.5(react@18.3.1)
       '@types/react': 18.3.12
-      expo-router: 4.0.21(ac684ef6e40bdfd939acf2f515064861)
-      freestyle-sandboxes: 0.0.66(672f7be0dc39c7396cf7433b7b8a4026)
+      expo-router: 4.0.21(9fbec2365257d605c7897c10f2a4cec9)
+      freestyle-sandboxes: 0.0.66(31ac028c4e005007d3aeab14687a36a6)
       glob: 11.0.1
       hono: 4.8.3
       openai: 4.104.0(encoding@0.1.13)(ws@8.18.3)(zod@3.25.76)
@@ -31854,7 +31896,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  next@15.4.9(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
+  next@15.4.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
     dependencies:
       '@next/env': 15.4.9
       '@swc/helpers': 0.5.15
@@ -31862,7 +31904,7 @@ snapshots:
       postcss: 8.4.31
       react: 19.0.1
       react-dom: 19.0.1(react@19.0.1)
-      styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.0.1)
+      styled-jsx: 5.1.6(@babel/core@7.28.0)(react@19.0.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.4.8
       '@next/swc-darwin-x64': 15.4.8
@@ -31902,30 +31944,6 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  next@16.0.9(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
-    dependencies:
-      '@next/env': 16.0.9
-      '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001751
-      postcss: 8.4.31
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      styled-jsx: 5.1.6(@babel/core@7.28.0)(react@19.2.1)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 16.0.9
-      '@next/swc-darwin-x64': 16.0.9
-      '@next/swc-linux-arm64-gnu': 16.0.9
-      '@next/swc-linux-arm64-musl': 16.0.9
-      '@next/swc-linux-x64-gnu': 16.0.9
-      '@next/swc-linux-x64-musl': 16.0.9
-      '@next/swc-win32-arm64-msvc': 16.0.9
-      '@next/swc-win32-x64-msvc': 16.0.9
-      '@opentelemetry/api': 1.9.0
-      sharp: 0.34.4
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
   next@16.0.9(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       '@next/env': 16.0.9
@@ -33082,10 +33100,10 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-native-edge-to-edge@1.6.0(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
+  react-native-edge-to-edge@1.6.0(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
     dependencies:
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
 
   react-native-helmet-async@2.0.4(react@18.3.1):
     dependencies:
@@ -33094,43 +33112,43 @@ snapshots:
       react-fast-compare: 3.2.2
       shallowequal: 1.1.0
 
-  react-native-is-edge-to-edge@1.2.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1):
+  react-native-is-edge-to-edge@1.2.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
 
-  react-native-is-edge-to-edge@1.2.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
+  react-native-is-edge-to-edge@1.2.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
     dependencies:
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
 
-  react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
+  react-native-safe-area-context@5.5.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
     dependencies:
       react: 19.0.1
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
 
-  react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
+  react-native-screens@4.11.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1):
     dependencies:
       react: 19.0.1
       react-freeze: 1.0.4(react@19.0.1)
-      react-native: 0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1)
-      react-native-is-edge-to-edge: 1.2.1(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      react-native: 0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1)
+      react-native-is-edge-to-edge: 1.2.1(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       warn-once: 0.1.1
 
-  react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1):
+  react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1):
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
       '@react-native/assets-registry': 0.80.1
-      '@react-native/codegen': 0.80.1(@babel/core@7.28.5)
+      '@react-native/codegen': 0.80.1(@babel/core@7.28.0)
       '@react-native/community-cli-plugin': 0.80.1
       '@react-native/gradle-plugin': 0.80.1
       '@react-native/js-polyfills': 0.80.1
       '@react-native/normalize-colors': 0.80.1
-      '@react-native/virtualized-lists': 0.80.1(@types/react@18.3.12)(react-native@0.80.1(@babel/core@7.28.5)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
+      '@react-native/virtualized-lists': 0.80.1(@types/react@18.3.12)(react-native@0.80.1(@babel/core@7.28.0)(@types/react@18.3.12)(react@19.0.1))(react@19.0.1)
       abort-controller: 3.0.0
       anser: 1.4.10
       ansi-regex: 5.0.1
-      babel-jest: 29.7.0(@babel/core@7.28.5)
+      babel-jest: 29.7.0(@babel/core@7.28.0)
       babel-plugin-syntax-hermes-parser: 0.28.1
       base64-js: 1.5.1
       chalk: 4.1.2
@@ -34465,19 +34483,12 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.26.0
 
-  styled-jsx@5.1.6(@babel/core@7.28.0)(react@19.2.1):
-    dependencies:
-      client-only: 0.0.1
-      react: 19.2.1
-    optionalDependencies:
-      '@babel/core': 7.28.0
-
-  styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.0.1):
+  styled-jsx@5.1.6(@babel/core@7.28.0)(react@19.0.1):
     dependencies:
       client-only: 0.0.1
       react: 19.0.1
     optionalDependencies:
-      '@babel/core': 7.28.5
+      '@babel/core': 7.28.0
 
   styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.1):
     dependencies:

From 94cb95d8a689b81431c4963ae1f0f34fb971dd18 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 16 Dec 2025 11:14:01 -0800
Subject: [PATCH 04/16] only set payment method

---
 .../[customer_type]/[customer_id]/route.ts    | 129 +-----------
 apps/backend/src/lib/payments.tsx             |   2 +-
 .../endpoints/api/v1/payments/billing.test.ts |  62 +-----
 .../payments/payments-panel.tsx               | 196 +-----------------
 .../teams/team-payments-section.tsx           |   3 +-
 .../apps/implementations/client-app-impl.ts   |  56 +----
 .../src/lib/stack-app/customers/index.ts      |  33 ---
 7 files changed, 24 insertions(+), 457 deletions(-)

diff --git a/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
index f711b82468..f9f859330a 100644
--- a/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
+++ b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
@@ -1,7 +1,7 @@
-import { ensureStripeCustomerForCustomer, getDefaultCardPaymentMethodSummary, getStripeCustomerForCustomerOrNull } from "@/lib/payments";
+import { getDefaultCardPaymentMethodSummary, getStripeCustomerForCustomerOrNull } from "@/lib/payments";
 import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
 import { getStripeForAccount } from "@/lib/stripe";
-import { getPrismaClientForTenancy, globalPrismaClient } from "@/prisma-client";
+import { getPrismaClientForTenancy } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
@@ -30,18 +30,9 @@ async function ensureClientCanAccessCustomer(params: { customer_type: "user" | "
   });
 }
 
-const addressSchema = yupObject({
-  line1: yupString().optional().default(undefined),
-  line2: yupString().optional().default(undefined),
-  city: yupString().optional().default(undefined),
-  state: yupString().optional().default(undefined),
-  postal_code: yupString().optional().default(undefined),
-  country: yupString().optional().default(undefined),
-}).optional().default(undefined);
-
 export const GET = createSmartRouteHandler({
   metadata: {
-    summary: "Get billing info and default payment method",
+    summary: "Get payment method info",
     hidden: true,
     tags: ["Payments"],
   },
@@ -61,19 +52,6 @@ export const GET = createSmartRouteHandler({
     bodyType: yupString().oneOf(["json"]).defined(),
     body: yupObject({
       has_customer: yupBoolean().defined(),
-      billing_details: yupObject({
-        name: yupString().nullable().defined(),
-        email: yupString().nullable().defined(),
-        phone: yupString().nullable().defined(),
-        address: yupObject({
-          line1: yupString().nullable().defined(),
-          line2: yupString().nullable().defined(),
-          city: yupString().nullable().defined(),
-          state: yupString().nullable().defined(),
-          postal_code: yupString().nullable().defined(),
-          country: yupString().nullable().defined(),
-        }).nullable().defined(),
-      }).defined(),
       default_payment_method: yupObject({
         id: yupString().defined(),
         brand: yupString().nullable().defined(),
@@ -108,12 +86,6 @@ export const GET = createSmartRouteHandler({
         bodyType: "json",
         body: {
           has_customer: false,
-          billing_details: {
-            name: null,
-            email: null,
-            phone: null,
-            address: null,
-          },
           default_payment_method: null,
         },
       };
@@ -129,103 +101,8 @@ export const GET = createSmartRouteHandler({
       bodyType: "json",
       body: {
         has_customer: true,
-        billing_details: {
-          name: stripeCustomer.name ?? null,
-          email: stripeCustomer.email ?? null,
-          phone: stripeCustomer.phone ?? null,
-          address: stripeCustomer.address ? {
-            line1: stripeCustomer.address.line1 ?? null,
-            line2: stripeCustomer.address.line2 ?? null,
-            city: stripeCustomer.address.city ?? null,
-            state: stripeCustomer.address.state ?? null,
-            postal_code: stripeCustomer.address.postal_code ?? null,
-            country: stripeCustomer.address.country ?? null,
-          } : null,
-        },
         default_payment_method: defaultPaymentMethod,
       },
     };
   },
 });
-
-export const POST = createSmartRouteHandler({
-  metadata: {
-    summary: "Update billing info",
-    hidden: true,
-    tags: ["Payments"],
-  },
-  request: yupObject({
-    auth: yupObject({
-      type: clientOrHigherAuthTypeSchema.defined(),
-      project: adaptSchema.defined(),
-      tenancy: adaptSchema.defined(),
-    }).defined(),
-    params: yupObject({
-      customer_type: yupString().oneOf(["user", "team"]).defined(),
-      customer_id: yupString().defined(),
-    }).defined(),
-    body: yupObject({
-      name: yupString().optional().default(undefined),
-      email: yupString().optional().default(undefined),
-      phone: yupString().optional().default(undefined),
-      address: addressSchema,
-    }).defined(),
-  }),
-  response: yupObject({
-    statusCode: yupNumber().oneOf([200]).defined(),
-    bodyType: yupString().oneOf(["json"]).defined(),
-    body: yupObject({
-      success: yupBoolean().oneOf([true]).defined(),
-    }).defined(),
-  }),
-  handler: async ({ auth, params, body }, fullReq) => {
-    if (auth.type === "client") {
-      await ensureClientCanAccessCustomer(
-        { customer_type: params.customer_type, customer_id: params.customer_id },
-        fullReq,
-        auth.tenancy,
-      );
-    }
-
-    const project = await globalPrismaClient.project.findUnique({
-      where: { id: auth.tenancy.project.id },
-      select: { stripeAccountId: true },
-    });
-    if (!project?.stripeAccountId) {
-      throw new StatusError(400, "Payments are not set up in this Stack Auth project.");
-    }
-
-    const prisma = await getPrismaClientForTenancy(auth.tenancy);
-    const stripe = await getStripeForAccount({ tenancy: auth.tenancy });
-    const stripeCustomer = await ensureStripeCustomerForCustomer({
-      stripe,
-      prisma,
-      tenancyId: auth.tenancy.id,
-      customerType: params.customer_type,
-      customerId: params.customer_id,
-    });
-
-    const shouldUpdate =
-      body.name !== undefined ||
-      body.email !== undefined ||
-      body.phone !== undefined ||
-      body.address !== undefined;
-    if (!shouldUpdate) {
-      throw new StatusError(400, "No billing fields provided.");
-    }
-
-    await stripe.customers.update(stripeCustomer.id, {
-      name: body.name,
-      email: body.email,
-      phone: body.phone,
-      address: body.address,
-    });
-
-    return {
-      statusCode: 200,
-      bodyType: "json",
-      body: { success: true },
-    };
-  },
-});
-
diff --git a/apps/backend/src/lib/payments.tsx b/apps/backend/src/lib/payments.tsx
index 9cb6d156d2..838baf2ca4 100644
--- a/apps/backend/src/lib/payments.tsx
+++ b/apps/backend/src/lib/payments.tsx
@@ -458,7 +458,7 @@ export async function getStripeCustomerForCustomerOrNull(options: {
     // Stripe's search is eventually consistent; fall back to listing to ensure we can find a newly created customer.
     let startingAfter: string | undefined = undefined;
     for (let i = 0; i < 10; i++) {
-      const page = await options.stripe.customers.list({
+      const page: Stripe.ApiList<Stripe.Customer> = await options.stripe.customers.list({
         limit: 100,
         ...startingAfter ? { starting_after: startingAfter } : {},
       });
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
index b85e12e030..9cebd1bc9d 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
@@ -1,7 +1,7 @@
 import { it } from "../../../../../helpers";
 import { Auth, niceBackendFetch, Payments, Project, Team, User } from "../../../../backend-helpers";
 
-it("should allow a signed-in user to update and read their own billing details", async ({ expect }) => {
+it("should allow a signed-in user to read their own billing status", async ({ expect }) => {
   await Project.createAndSwitch();
   await Payments.setup();
 
@@ -14,12 +14,6 @@ it("should allow a signed-in user to update and read their own billing details",
     NiceResponse {
       "status": 200,
       "body": {
-        "billing_details": {
-          "address": null,
-          "email": null,
-          "name": null,
-          "phone": null,
-        },
         "default_payment_method": null,
         "has_customer": false,
       },
@@ -27,29 +21,16 @@ it("should allow a signed-in user to update and read their own billing details",
     }
   `);
 
-  const update = await niceBackendFetch(`/api/v1/payments/billing/user/${userId}`, {
+  const setupIntent = await niceBackendFetch(`/api/v1/payments/payment-method/user/${userId}/setup-intent`, {
     method: "POST",
     accessType: "client",
-    body: {
-      name: "Acme Inc",
-      email: "billing@acme.example",
-      phone: "+15551234567",
-      address: {
-        line1: "123 Main St",
-        city: "San Francisco",
-        state: "CA",
-        postal_code: "94105",
-        country: "US",
-      },
-    },
+    body: {},
+  });
+  expect(setupIntent.status).toBe(200);
+  expect(setupIntent.body).toMatchObject({
+    client_secret: expect.any(String),
+    stripe_account_id: expect.any(String),
   });
-  expect(update).toMatchInlineSnapshot(`
-    NiceResponse {
-      "status": 200,
-      "body": { "success": true },
-      "headers": Headers { <some fields may have been hidden> },
-    }
-  `);
 
   const getAfter = await niceBackendFetch(`/api/v1/payments/billing/user/${userId}`, {
     accessType: "client",
@@ -58,19 +39,6 @@ it("should allow a signed-in user to update and read their own billing details",
     NiceResponse {
       "status": 200,
       "body": {
-        "billing_details": {
-          "address": {
-            "city": "San Francisco",
-            "country": "US",
-            "line1": "123 Main St",
-            "line2": null,
-            "postal_code": "94105",
-            "state": "CA",
-          },
-          "email": "billing@acme.example",
-          "name": "Acme Inc",
-          "phone": "+15551234567",
-        },
         "default_payment_method": null,
         "has_customer": true,
       },
@@ -79,7 +47,7 @@ it("should allow a signed-in user to update and read their own billing details",
   `);
 });
 
-it("should reject a signed-in user updating another user's billing details", async ({ expect }) => {
+it("should reject a signed-in user reading another user's billing status", async ({ expect }) => {
   await Project.createAndSwitch();
   await Payments.setup();
 
@@ -87,11 +55,7 @@ it("should reject a signed-in user updating another user's billing details", asy
   const { userId: userId2 } = await User.create();
 
   const response = await niceBackendFetch(`/api/v1/payments/billing/user/${userId2}`, {
-    method: "POST",
     accessType: "client",
-    body: {
-      name: "Not allowed",
-    },
   });
   expect(response).toMatchInlineSnapshot(`
     NiceResponse {
@@ -129,14 +93,10 @@ it("should allow a team admin (but not a normal member) to manage team billing",
   const { userId: memberUserId } = await Auth.fastSignUp();
   await Team.addMember(teamId, memberUserId);
 
-  const memberUpdate = await niceBackendFetch(`/api/v1/payments/billing/team/${teamId}`, {
-    method: "POST",
+  const memberGet = await niceBackendFetch(`/api/v1/payments/billing/team/${teamId}`, {
     accessType: "client",
-    body: {
-      name: "Should fail",
-    },
   });
-  expect(memberUpdate).toMatchInlineSnapshot(`
+  expect(memberGet).toMatchInlineSnapshot(`
     NiceResponse {
       "status": 401,
       "body": {
diff --git a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
index e7275607d1..6cfe2b3001 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
@@ -1,29 +1,11 @@
 'use client';
 
-import { yupResolver } from "@hookform/resolvers/yup";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
-import { ActionDialog, Button, Input, Label, Skeleton, Typography } from "@stackframe/stack-ui";
+import { ActionDialog, Button, Skeleton, Typography } from "@stackframe/stack-ui";
 import { loadStripe } from "@stripe/stripe-js";
 import { CardElement, Elements, useElements, useStripe } from "@stripe/react-stripe-js";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
+import React, { useMemo, useState } from "react";
 import { Section } from "../section";
-import * as yup from "yup";
-
-type BillingDetails = {
-  name: string | null,
-  email: string | null,
-  phone: string | null,
-  address: {
-    line1: string | null,
-    line2: string | null,
-    city: string | null,
-    state: string | null,
-    postal_code: string | null,
-    country: string | null,
-  } | null,
-};
 
 type PaymentMethodSummary = {
   id: string,
@@ -44,7 +26,6 @@ function formatPaymentMethod(pm: NonNullable<PaymentMethodSummary>) {
 
 type CustomerBilling = {
   hasCustomer: boolean,
-  billingDetails: BillingDetails,
   defaultPaymentMethod: PaymentMethodSummary,
 };
 
@@ -55,19 +36,6 @@ type CustomerPaymentMethodSetupIntent = {
 
 type CustomerLike = {
   useBilling: () => CustomerBilling,
-  updateBilling: (update: {
-    name?: string,
-    email?: string,
-    phone?: string,
-    address?: {
-      line1?: string,
-      line2?: string,
-      city?: string,
-      state?: string,
-      postal_code?: string,
-      country?: string,
-    },
-  }) => Promise<void>,
   createPaymentMethodSetupIntent: () => Promise<CustomerPaymentMethodSetupIntent>,
   setDefaultPaymentMethodFromSetupIntent: (setupIntentId: string) => Promise<PaymentMethodSummary>,
 };
@@ -127,7 +95,7 @@ function SetDefaultPaymentMethodForm(props: {
 }
 
 export function PaymentsPanel(props: {
-  title: string,
+  title?: string,
   customer?: CustomerLike,
   mockMode?: boolean,
 }) {
@@ -140,13 +108,7 @@ export function PaymentsPanel(props: {
   return <RealPaymentsPanel title={props.title} customer={props.customer} />;
 }
 
-function MockPaymentsPanel(props: { title: string }) {
-  const billingDetails: BillingDetails = {
-    name: "Mock User",
-    email: "mock@example.com",
-    phone: null,
-    address: null,
-  };
+function MockPaymentsPanel(props: { title?: string }) {
   const defaultPaymentMethod: PaymentMethodSummary = {
     id: "pm_mock",
     brand: "visa",
@@ -157,18 +119,7 @@ function MockPaymentsPanel(props: { title: string }) {
 
   return (
     <div className="space-y-4">
-      <Typography className="font-medium">{props.title}</Typography>
-      <Section
-        title="Billing information"
-        description="Update invoice billing details for this customer."
-      >
-        <Typography variant="secondary" type="footnote">
-          Billing editing is disabled in mock mode.
-        </Typography>
-        <Typography variant="secondary" type="footnote">
-          {billingDetails.email}
-        </Typography>
-      </Section>
+      {props.title && <Typography className="font-medium">{props.title}</Typography>}
       <Section
         title="Payment method"
         description="Manage the default payment method used for subscriptions and invoices."
@@ -182,75 +133,14 @@ function MockPaymentsPanel(props: { title: string }) {
   );
 }
 
-function RealPaymentsPanel(props: { title: string, customer: CustomerLike }) {
+function RealPaymentsPanel(props: { title?: string, customer: CustomerLike }) {
   const billing = props.customer.useBilling();
-  const billingDetails = billing.billingDetails;
   const defaultPaymentMethod = billing.defaultPaymentMethod;
 
   const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
   const [setupIntentClientSecret, setSetupIntentClientSecret] = useState<string | null>(null);
   const [setupIntentStripeAccountId, setSetupIntentStripeAccountId] = useState<string | null>(null);
 
-  const billingSchema = useMemo(() => yupObject({
-    name: yupString().optional().default(undefined),
-    email: yupString().optional().default(undefined),
-    phone: yupString().optional().default(undefined),
-    address_line1: yupString().optional().default(undefined),
-    address_line2: yupString().optional().default(undefined),
-    address_city: yupString().optional().default(undefined),
-    address_state: yupString().optional().default(undefined),
-    address_postal_code: yupString().optional().default(undefined),
-    address_country: yupString().optional().default(undefined),
-  }), []);
-
-  const { register, handleSubmit, reset } = useForm<yup.InferType<typeof billingSchema>>({
-    resolver: yupResolver(billingSchema),
-    defaultValues: {
-      name: "",
-      email: "",
-      phone: "",
-      address_line1: "",
-      address_line2: "",
-      address_city: "",
-      address_state: "",
-      address_postal_code: "",
-      address_country: "",
-    },
-  });
-
-  const billingFormValues = useMemo(() => ({
-    name: billingDetails.name ?? "",
-    email: billingDetails.email ?? "",
-    phone: billingDetails.phone ?? "",
-    address_line1: billingDetails.address?.line1 ?? "",
-    address_line2: billingDetails.address?.line2 ?? "",
-    address_city: billingDetails.address?.city ?? "",
-    address_state: billingDetails.address?.state ?? "",
-    address_postal_code: billingDetails.address?.postal_code ?? "",
-    address_country: billingDetails.address?.country ?? "",
-  }), [
-    billingDetails.name,
-    billingDetails.email,
-    billingDetails.phone,
-    billingDetails.address?.line1,
-    billingDetails.address?.line2,
-    billingDetails.address?.city,
-    billingDetails.address?.state,
-    billingDetails.address?.postal_code,
-    billingDetails.address?.country,
-  ]);
-
-  const lastAppliedBillingKeyRef = useRef<string | null>(null);
-  const billingKey = useMemo(() => JSON.stringify(billingFormValues), [billingFormValues]);
-
-  useEffect(() => {
-    if (lastAppliedBillingKeyRef.current === billingKey) {
-      return;
-    }
-    lastAppliedBillingKeyRef.current = billingKey;
-    reset(billingFormValues);
-  }, [billingFormValues, billingKey, reset]);
-
   const stripePromise = useMemo(() => {
     if (!setupIntentStripeAccountId) return null;
     const publishableKey = process.env.NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY;
@@ -275,79 +165,7 @@ function RealPaymentsPanel(props: { title: string, customer: CustomerLike }) {
 
   return (
     <div className="space-y-4">
-      <Typography className="font-medium">{props.title}</Typography>
-
-      <Section
-        title="Billing information"
-        description="Update invoice billing details for this customer."
-      >
-        <form
-          onSubmit={(e) => runAsynchronouslyWithAlert(handleSubmit(async (data) => {
-            const address = {
-              line1: data.address_line1 || undefined,
-              line2: data.address_line2 || undefined,
-              city: data.address_city || undefined,
-              state: data.address_state || undefined,
-              postal_code: data.address_postal_code || undefined,
-              country: data.address_country || undefined,
-            };
-
-            await props.customer.updateBilling({
-              name: data.name || undefined,
-              email: data.email || undefined,
-              phone: data.phone || undefined,
-              address,
-            });
-          })(e))}
-          className="space-y-3"
-        >
-          <div className="space-y-2">
-            <Label htmlFor="billing-name">Name / Company</Label>
-            <Input id="billing-name" {...register("name")} />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="billing-email">Billing email</Label>
-            <Input id="billing-email" {...register("email")} />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="billing-phone">Phone</Label>
-            <Input id="billing-phone" {...register("phone")} />
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div className="space-y-2">
-              <Label htmlFor="billing-line1">Address line 1</Label>
-              <Input id="billing-line1" {...register("address_line1")} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="billing-line2">Address line 2</Label>
-              <Input id="billing-line2" {...register("address_line2")} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="billing-city">City</Label>
-              <Input id="billing-city" {...register("address_city")} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="billing-state">State / Province</Label>
-              <Input id="billing-state" {...register("address_state")} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="billing-postal">Postal code</Label>
-              <Input id="billing-postal" {...register("address_postal_code")} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="billing-country">Country</Label>
-              <Input id="billing-country" {...register("address_country")} />
-            </div>
-          </div>
-
-          <div className="flex justify-end">
-            <Button type="submit" className="mr-0 ml-auto">
-              Save billing info
-            </Button>
-          </div>
-        </form>
-      </Section>
+      {props.title && <Typography className="font-medium">{props.title}</Typography>}
 
       <Section
         title="Payment method"
diff --git a/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx b/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
index 92e617cee2..07da837f4a 100644
--- a/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
+++ b/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
@@ -15,7 +15,6 @@ export function TeamPaymentsSection(props: { team: Team }) {
   if (isTeamAdmin) {
     return (
       <PaymentsPanel
-        title={t("Team payments")}
         customer={props.team}
       />
     );
@@ -24,7 +23,7 @@ export function TeamPaymentsSection(props: { team: Team }) {
   return (
     <Section
       title={t("Team payments")}
-      description={t("Manage billing details and the default payment method for this team.")}
+      description={t("Manage the default payment method for this team.")}
     >
       <Typography variant="secondary" type="footnote">
         {t("You need team admin permissions to manage team billing.")}
diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 3a0d2fe322..2933cdccba 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -42,7 +42,7 @@ import { ApiKey, ApiKeyCreationOptions, ApiKeyUpdateOptions, apiKeyCreationOptio
 import { ConvexCtx, GetCurrentPartialUserOptions, GetCurrentUserOptions, HandlerUrls, OAuthScopesOnSignIn, RedirectMethod, RedirectToOptions, RequestLike, TokenStoreInit, stackAppInternalsSymbol } from "../../common";
 import { OAuthConnection } from "../../connected-accounts";
 import { ContactChannel, ContactChannelCreateOptions, ContactChannelUpdateOptions, contactChannelCreateOptionsToCrud, contactChannelUpdateOptionsToCrud } from "../../contact-channels";
-import { Customer, CustomerBilling, CustomerBillingUpdate, CustomerDefaultPaymentMethod, CustomerPaymentMethodSetupIntent, CustomerProductsList, CustomerProductsListOptions, CustomerProductsRequestOptions, Item } from "../../customers";
+import { Customer, CustomerBilling, CustomerDefaultPaymentMethod, CustomerPaymentMethodSetupIntent, CustomerProductsList, CustomerProductsListOptions, CustomerProductsRequestOptions, Item } from "../../customers";
 import { NotificationCategory } from "../../notification-categories";
 import { TeamPermission } from "../../permissions";
 import { AdminOwnedProject, AdminProjectUpdateOptions, Project, adminProjectCreateOptionsToCrud } from "../../projects";
@@ -284,19 +284,6 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
 
   private readonly _customerBillingCache = createCacheBySession<["user" | "team", string], {
     has_customer: boolean,
-    billing_details: {
-      name: string | null,
-      email: string | null,
-      phone: string | null,
-      address: {
-        line1: string | null,
-        line2: string | null,
-        city: string | null,
-        state: string | null,
-        postal_code: string | null,
-        country: string | null,
-      } | null,
-    },
     default_payment_method: {
       id: string,
       brand: string | null,
@@ -1211,19 +1198,6 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
 
   protected _customerBillingFromResponse(response: {
     has_customer: boolean,
-    billing_details: {
-      name: string | null,
-      email: string | null,
-      phone: string | null,
-      address: {
-        line1: string | null,
-        line2: string | null,
-        city: string | null,
-        state: string | null,
-        postal_code: string | null,
-        country: string | null,
-      } | null,
-    },
     default_payment_method: {
       id: string,
       brand: string | null,
@@ -1234,12 +1208,6 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
   }): CustomerBilling {
     return {
       hasCustomer: response.has_customer,
-      billingDetails: {
-        name: response.billing_details.name,
-        email: response.billing_details.email,
-        phone: response.billing_details.phone,
-        address: response.billing_details.address,
-      },
       defaultPaymentMethod: response.default_payment_method,
     };
   }
@@ -1687,28 +1655,6 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
         return app._customerBillingFromResponse(response);
       },
       // END_PLATFORM
-      async updateBilling(update: CustomerBillingUpdate) {
-        const requestType = app._getDefaultAuthenticatedRequestType();
-        await app._interface.sendClientRequest(
-          `/payments/billing/${type}/${userIdOrTeamId}`,
-          {
-            method: "POST",
-            headers: {
-              ...app._getSecretServerKeyHeader(),
-              "content-type": "application/json",
-            },
-            body: JSON.stringify({
-              name: update.name,
-              email: update.email,
-              phone: update.phone,
-              address: update.address,
-            }),
-          },
-          effectiveSession,
-          requestType,
-        );
-        await app._customerBillingCache.refresh([effectiveSession, type, userIdOrTeamId]);
-      },
       async createPaymentMethodSetupIntent(): Promise<CustomerPaymentMethodSetupIntent> {
         const requestType = app._getDefaultAuthenticatedRequestType();
         const response = await app._interface.sendClientRequest(
diff --git a/packages/template/src/lib/stack-app/customers/index.ts b/packages/template/src/lib/stack-app/customers/index.ts
index 7f9312b86e..5db0daa601 100644
--- a/packages/template/src/lib/stack-app/customers/index.ts
+++ b/packages/template/src/lib/stack-app/customers/index.ts
@@ -55,22 +55,6 @@ export type CustomerProductsRequestOptions =
   | ({ teamId: string } & CustomerProductsListOptions)
   | ({ customCustomerId: string } & CustomerProductsListOptions);
 
-export type CustomerBillingAddress = {
-  line1: string | null,
-  line2: string | null,
-  city: string | null,
-  state: string | null,
-  postal_code: string | null,
-  country: string | null,
-} | null;
-
-export type CustomerBillingDetails = {
-  name: string | null,
-  email: string | null,
-  phone: string | null,
-  address: CustomerBillingAddress,
-};
-
 export type CustomerDefaultPaymentMethod = {
   id: string,
   brand: string | null,
@@ -81,24 +65,9 @@ export type CustomerDefaultPaymentMethod = {
 
 export type CustomerBilling = {
   hasCustomer: boolean,
-  billingDetails: CustomerBillingDetails,
   defaultPaymentMethod: CustomerDefaultPaymentMethod,
 };
 
-export type CustomerBillingUpdate = {
-  name?: string,
-  email?: string,
-  phone?: string,
-  address?: {
-    line1?: string,
-    line2?: string,
-    city?: string,
-    state?: string,
-    postal_code?: string,
-    country?: string,
-  },
-};
-
 export type CustomerPaymentMethodSetupIntent = {
   clientSecret: string,
   stripeAccountId: string,
@@ -113,8 +82,6 @@ export type Customer<IsServer extends boolean = false> =
       | (IsServer extends true ? { product: InlineProduct, returnUrl?: string } : never)
     )): Promise<string>,
 
-    updateBilling(update: CustomerBillingUpdate): Promise<void>,
-
     createPaymentMethodSetupIntent(): Promise<CustomerPaymentMethodSetupIntent>,
 
     setDefaultPaymentMethodFromSetupIntent(setupIntentId: string): Promise<CustomerDefaultPaymentMethod>,

From 1104e6f55fa771eae39f80cd09d9fc2bc1155e77 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 16 Dec 2025 11:32:59 -0800
Subject: [PATCH 05/16] simplify

---
 .../src/interface/client-interface.ts         | 74 +++++++++++++++++++
 .../src/interface/server-interface.ts         | 74 +++++++++++++++++++
 .../apps/implementations/client-app-impl.ts   | 60 +--------------
 3 files changed, 151 insertions(+), 57 deletions(-)

diff --git a/packages/stack-shared/src/interface/client-interface.ts b/packages/stack-shared/src/interface/client-interface.ts
index 117060843a..a2d9a3548e 100644
--- a/packages/stack-shared/src/interface/client-interface.ts
+++ b/packages/stack-shared/src/interface/client-interface.ts
@@ -1854,6 +1854,80 @@ export class StackClientInterface {
     return url;
   }
 
+  async getCustomerBilling(
+    customerType: "user" | "team",
+    customerId: string,
+    session: InternalSession | null,
+  ): Promise<{
+    has_customer: boolean,
+    default_payment_method: {
+      id: string,
+      brand: string | null,
+      last4: string | null,
+      exp_month: number | null,
+      exp_year: number | null,
+    } | null,
+  }> {
+    const response = await this.sendClientRequest(
+      urlString`/payments/billing/${customerType}/${customerId}`,
+      {},
+      session,
+    );
+    return await response.json();
+  }
+
+  async createCustomerPaymentMethodSetupIntent(
+    customerType: "user" | "team",
+    customerId: string,
+    session: InternalSession | null,
+  ): Promise<{
+    client_secret: string,
+    stripe_account_id: string,
+  }> {
+    const response = await this.sendClientRequest(
+      urlString`/payments/payment-method/${customerType}/${customerId}/setup-intent`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({}),
+      },
+      session,
+    );
+    return await response.json();
+  }
+
+  async setDefaultCustomerPaymentMethodFromSetupIntent(
+    customerType: "user" | "team",
+    customerId: string,
+    setupIntentId: string,
+    session: InternalSession | null,
+  ): Promise<{
+    default_payment_method: {
+      id: string,
+      brand: string | null,
+      last4: string | null,
+      exp_month: number | null,
+      exp_year: number | null,
+    },
+  }> {
+    const response = await this.sendClientRequest(
+      urlString`/payments/payment-method/${customerType}/${customerId}/set-default`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({
+          setup_intent_id: setupIntentId,
+        }),
+      },
+      session,
+    );
+    return await response.json();
+  }
+
   async transferProject(internalProjectSession: InternalSession, projectIdToTransfer: string, newTeamId: string): Promise<void> {
     if (this.options.projectId !== "internal") {
       throw new StackAssertionError("StackClientInterface.transferProject() is only available for internal projects (please specify the project ID in the constructor)");
diff --git a/packages/stack-shared/src/interface/server-interface.ts b/packages/stack-shared/src/interface/server-interface.ts
index b95a2c2796..b73f3ae3c5 100644
--- a/packages/stack-shared/src/interface/server-interface.ts
+++ b/packages/stack-shared/src/interface/server-interface.ts
@@ -58,6 +58,80 @@ export class StackServerInterface extends StackClientInterface {
     );
   }
 
+  override async getCustomerBilling(
+    customerType: "user" | "team",
+    customerId: string,
+    session: InternalSession | null,
+  ): Promise<{
+    has_customer: boolean,
+    default_payment_method: {
+      id: string,
+      brand: string | null,
+      last4: string | null,
+      exp_month: number | null,
+      exp_year: number | null,
+    } | null,
+  }> {
+    const response = await this.sendServerRequest(
+      urlString`/payments/billing/${customerType}/${customerId}`,
+      {},
+      session,
+    );
+    return await response.json();
+  }
+
+  override async createCustomerPaymentMethodSetupIntent(
+    customerType: "user" | "team",
+    customerId: string,
+    session: InternalSession | null,
+  ): Promise<{
+    client_secret: string,
+    stripe_account_id: string,
+  }> {
+    const response = await this.sendServerRequest(
+      urlString`/payments/payment-method/${customerType}/${customerId}/setup-intent`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({}),
+      },
+      session,
+    );
+    return await response.json();
+  }
+
+  override async setDefaultCustomerPaymentMethodFromSetupIntent(
+    customerType: "user" | "team",
+    customerId: string,
+    setupIntentId: string,
+    session: InternalSession | null,
+  ): Promise<{
+    default_payment_method: {
+      id: string,
+      brand: string | null,
+      last4: string | null,
+      exp_month: number | null,
+      exp_year: number | null,
+    },
+  }> {
+    const response = await this.sendServerRequest(
+      urlString`/payments/payment-method/${customerType}/${customerId}/set-default`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({
+          setup_intent_id: setupIntentId,
+        }),
+      },
+      session,
+    );
+    return await response.json();
+  }
+
   protected async sendServerRequestAndCatchKnownError<E extends typeof KnownErrors[keyof KnownErrors]>(
     path: string,
     requestOptions: RequestInit,
diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 2933cdccba..71b0f4fdac 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -96,19 +96,6 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
   private __DEMO_ENABLE_SLIGHT_FETCH_DELAY = false;
   private readonly _ownedAdminApps = new DependenciesMap<[InternalSession, string], _StackAdminAppImplIncomplete<false, string>>();
 
-  protected _getDefaultAuthenticatedRequestType(): "client" | "server" {
-    const options = this._interface.options as any;
-    return options && typeof options.secretServerKey === "string" && options.secretServerKey.length > 0 ? "server" : "client";
-  }
-
-  protected _getSecretServerKeyHeader(): Record<string, string> {
-    const options = this._interface.options as any;
-    if (options && typeof options.secretServerKey === "string" && options.secretServerKey.length > 0) {
-      return { "x-stack-secret-server-key": options.secretServerKey };
-    }
-    return {};
-  }
-
   private readonly _currentUserCache = createCacheBySession(async (session) => {
     if (this.__DEMO_ENABLE_SLIGHT_FETCH_DELAY) {
       await wait(2000);
@@ -293,18 +280,7 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     } | null,
   }>(
     async (session, [customerType, customerId]) => {
-      const requestType = this._getDefaultAuthenticatedRequestType();
-      const response = await this._interface.sendClientRequest(
-        `/payments/billing/${customerType}/${customerId}`,
-        {
-          headers: {
-            ...this._getSecretServerKeyHeader(),
-          },
-        },
-        session,
-        requestType,
-      );
-      return await response.json();
+      return await this._interface.getCustomerBilling(customerType, customerId, session);
     }
   );
 
@@ -1656,44 +1632,14 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
       },
       // END_PLATFORM
       async createPaymentMethodSetupIntent(): Promise<CustomerPaymentMethodSetupIntent> {
-        const requestType = app._getDefaultAuthenticatedRequestType();
-        const response = await app._interface.sendClientRequest(
-          `/payments/payment-method/${type}/${userIdOrTeamId}/setup-intent`,
-          {
-            method: "POST",
-            headers: {
-              ...app._getSecretServerKeyHeader(),
-              "content-type": "application/json",
-            },
-            body: JSON.stringify({}),
-          },
-          effectiveSession,
-          requestType,
-        );
-        const body = await response.json() as { client_secret: string, stripe_account_id: string };
+        const body = await app._interface.createCustomerPaymentMethodSetupIntent(type, userIdOrTeamId, effectiveSession);
         return {
           clientSecret: body.client_secret,
           stripeAccountId: body.stripe_account_id,
         };
       },
       async setDefaultPaymentMethodFromSetupIntent(setupIntentId: string): Promise<CustomerDefaultPaymentMethod> {
-        const requestType = app._getDefaultAuthenticatedRequestType();
-        const response = await app._interface.sendClientRequest(
-          `/payments/payment-method/${type}/${userIdOrTeamId}/set-default`,
-          {
-            method: "POST",
-            headers: {
-              ...app._getSecretServerKeyHeader(),
-              "content-type": "application/json",
-            },
-            body: JSON.stringify({
-              setup_intent_id: setupIntentId,
-            }),
-          },
-          effectiveSession,
-          requestType,
-        );
-        const body = await response.json() as { default_payment_method: CustomerDefaultPaymentMethod };
+        const body = await app._interface.setDefaultCustomerPaymentMethodFromSetupIntent(type, userIdOrTeamId, setupIntentId, effectiveSession);
         await app._customerBillingCache.refresh([effectiveSession, type, userIdOrTeamId]);
         return body.default_payment_method;
       },

From a42a359b54838f375d4903b0be739e32fe71b63e Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 16 Dec 2025 15:39:31 -0800
Subject: [PATCH 06/16] fix tests

---
 .../e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
index 9cebd1bc9d..607e9e0299 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
@@ -15,7 +15,7 @@ it("should allow a signed-in user to read their own billing status", async ({ ex
       "status": 200,
       "body": {
         "default_payment_method": null,
-        "has_customer": false,
+        "has_customer": true,
       },
       "headers": Headers { <some fields may have been hidden> },
     }

From 56a7fb9cfc5f736025f934829b02035b42882ddd Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 16 Dec 2025 17:20:28 -0800
Subject: [PATCH 07/16] show products in account settings

---
 .../[customer_type]/[customer_id]/route.ts    |   6 +
 apps/backend/src/lib/payments.tsx             |  15 ++
 .../api/v1/payments/products.test.ts          |  42 ++++++
 apps/e2e/tests/snapshot-serializer.ts         |   1 +
 .../src/interface/crud/products.ts            |   6 +
 .../payments/payments-page.tsx                |   1 +
 .../payments/payments-panel.tsx               | 131 ++++++++++++++++--
 .../teams/team-payments-section.tsx           |   1 +
 .../apps/implementations/client-app-impl.ts   |   6 +
 .../src/lib/stack-app/customers/index.ts      |   6 +
 10 files changed, 205 insertions(+), 10 deletions(-)

diff --git a/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts b/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
index 056f5be722..d9953755a5 100644
--- a/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
+++ b/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
@@ -58,6 +58,12 @@ export const GET = createSmartRouteHandler({
           id: product.id,
           quantity: product.quantity,
           product: productToInlineProduct(product.product),
+          type: product.type,
+          subscription: product.subscription ? {
+            current_period_end: product.subscription.currentPeriodEnd ? product.subscription.currentPeriodEnd.toISOString() : null,
+            cancel_at_period_end: product.subscription.cancelAtPeriodEnd,
+            is_cancelable: product.subscription.isCancelable,
+          } : null,
         },
       }));
 
diff --git a/apps/backend/src/lib/payments.tsx b/apps/backend/src/lib/payments.tsx
index 838baf2ca4..124648d48e 100644
--- a/apps/backend/src/lib/payments.tsx
+++ b/apps/backend/src/lib/payments.tsx
@@ -265,6 +265,7 @@ type Subscription = {
   quantity: number,
   currentPeriodStart: Date,
   currentPeriodEnd: Date | null,
+  cancelAtPeriodEnd: boolean,
   status: SubscriptionStatus,
   createdAt: Date,
 };
@@ -301,6 +302,7 @@ export async function getSubscriptions(options: {
       quantity: s.quantity,
       currentPeriodStart: s.currentPeriodStart,
       currentPeriodEnd: s.currentPeriodEnd,
+      cancelAtPeriodEnd: s.cancelAtPeriodEnd,
       status: s.status,
       createdAt: s.createdAt,
       stripeSubscriptionId: s.stripeSubscriptionId,
@@ -329,6 +331,7 @@ export async function getSubscriptions(options: {
         quantity: 1,
         currentPeriodStart: DEFAULT_PRODUCT_START_DATE,
         currentPeriodEnd: null,
+        cancelAtPeriodEnd: false,
         status: SubscriptionStatus.active,
         createdAt: DEFAULT_PRODUCT_START_DATE,
         stripeSubscriptionId: null,
@@ -347,6 +350,7 @@ export async function getSubscriptions(options: {
       quantity: 1,
       currentPeriodStart: DEFAULT_PRODUCT_START_DATE,
       currentPeriodEnd: null,
+      cancelAtPeriodEnd: false,
       status: SubscriptionStatus.active,
       createdAt: DEFAULT_PRODUCT_START_DATE,
       stripeSubscriptionId: null,
@@ -759,6 +763,11 @@ export type OwnedProduct = {
   product: Product,
   createdAt: Date,
   sourceId: string,
+  subscription: null | {
+    currentPeriodEnd: Date | null,
+    cancelAtPeriodEnd: boolean,
+    isCancelable: boolean,
+  },
 };
 
 export async function getOwnedProductsForCustomer(options: {
@@ -806,6 +815,11 @@ export async function getOwnedProductsForCustomer(options: {
       product: subscription.product,
       createdAt: subscription.createdAt,
       sourceId,
+      subscription: {
+        currentPeriodEnd: subscription.currentPeriodEnd,
+        cancelAtPeriodEnd: subscription.cancelAtPeriodEnd,
+        isCancelable: subscription.id !== null && subscription.productId !== null,
+      },
     });
   }
 
@@ -818,6 +832,7 @@ export async function getOwnedProductsForCustomer(options: {
       product,
       createdAt: purchase.createdAt,
       sourceId: purchase.id,
+      subscription: null,
     });
   }
 
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
index 17a30df945..7fd4402a81 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
@@ -127,6 +127,12 @@ it("should grant configured subscription product and expose it via listing", asy
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": {
+              "cancel_at_period_end": false,
+              "current_period_end": <stripped field 'current_period_end'>,
+              "is_cancelable": true,
+            },
+            "type": "subscription",
           },
         ],
         "pagination": { "next_cursor": null },
@@ -376,6 +382,12 @@ it("should hide server-only products from clients while exposing them to servers
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": {
+              "cancel_at_period_end": false,
+              "current_period_end": <stripped field 'current_period_end'>,
+              "is_cancelable": true,
+            },
+            "type": "subscription",
           },
         ],
         "pagination": { "next_cursor": null },
@@ -506,6 +518,12 @@ it("should allow granting stackable product with custom quantity", async ({ expe
               "stackable": true,
             },
             "quantity": 3,
+            "subscription": {
+              "cancel_at_period_end": false,
+              "current_period_end": <stripped field 'current_period_end'>,
+              "is_cancelable": true,
+            },
+            "type": "subscription",
           },
         ],
         "pagination": { "next_cursor": null },
@@ -578,6 +596,12 @@ it("should grant inline product without needing configuration", async ({ expect
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": {
+              "cancel_at_period_end": false,
+              "current_period_end": <stripped field 'current_period_end'>,
+              "is_cancelable": false,
+            },
+            "type": "subscription",
           },
         ],
         "pagination": { "next_cursor": null },
@@ -877,6 +901,12 @@ it("listing products should list both subscription and one-time products", async
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": {
+              "cancel_at_period_end": false,
+              "current_period_end": <stripped field 'current_period_end'>,
+              "is_cancelable": true,
+            },
+            "type": "subscription",
           },
           {
             "id": "lifetime-addon",
@@ -892,6 +922,8 @@ it("listing products should list both subscription and one-time products", async
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": null,
+            "type": "one_time",
           },
         ],
         "pagination": { "next_cursor": null },
@@ -1011,6 +1043,12 @@ it("listing products should support cursor pagination", async ({ expect }) => {
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": {
+              "cancel_at_period_end": false,
+              "current_period_end": <stripped field 'current_period_end'>,
+              "is_cancelable": true,
+            },
+            "type": "subscription",
           },
         ],
         "pagination": { "next_cursor": "<stripped UUID>" },
@@ -1043,6 +1081,8 @@ it("listing products should support cursor pagination", async ({ expect }) => {
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": null,
+            "type": "one_time",
           },
           {
             "id": "pro-addon",
@@ -1058,6 +1098,8 @@ it("listing products should support cursor pagination", async ({ expect }) => {
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": null,
+            "type": "one_time",
           },
         ],
         "pagination": { "next_cursor": null },
diff --git a/apps/e2e/tests/snapshot-serializer.ts b/apps/e2e/tests/snapshot-serializer.ts
index c3762a06fe..ad9fbd2acf 100644
--- a/apps/e2e/tests/snapshot-serializer.ts
+++ b/apps/e2e/tests/snapshot-serializer.ts
@@ -57,6 +57,7 @@ const stripFields = [
   "token",
   "createdAt",
   "updatedAt",
+  "current_period_end",
   "response",
   "msgId",
   "endpointId",
diff --git a/packages/stack-shared/src/interface/crud/products.ts b/packages/stack-shared/src/interface/crud/products.ts
index 2089b310b5..b6c80052ff 100644
--- a/packages/stack-shared/src/interface/crud/products.ts
+++ b/packages/stack-shared/src/interface/crud/products.ts
@@ -5,6 +5,12 @@ export const customerProductReadSchema = yupObject({
   id: yupString().nullable().defined(),
   quantity: yupNumber().defined(),
   product: inlineProductSchema.defined(),
+  type: yupString().oneOf(["one_time", "subscription"]).defined(),
+  subscription: yupObject({
+    current_period_end: yupString().nullable().defined(),
+    cancel_at_period_end: yupBoolean().defined(),
+    is_cancelable: yupBoolean().defined(),
+  }).nullable().defined(),
 }).defined();
 
 export type CustomerProductRead = yup.InferType<typeof customerProductReadSchema>;
diff --git a/packages/template/src/components-page/account-settings/payments/payments-page.tsx b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
index 0fe907c593..9a04012300 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-page.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
@@ -29,6 +29,7 @@ export function PaymentsPage(props: { mockMode?: boolean }) {
       <PaymentsPanel
         title={t("Personal payments")}
         customer={user}
+        customerType="user"
       />
     </PageLayout>
   );
diff --git a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
index 6cfe2b3001..af844ee4e0 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
@@ -5,6 +5,8 @@ import { ActionDialog, Button, Skeleton, Typography } from "@stackframe/stack-ui
 import { loadStripe } from "@stripe/stripe-js";
 import { CardElement, Elements, useElements, useStripe } from "@stripe/react-stripe-js";
 import React, { useMemo, useState } from "react";
+import { useStackApp } from "../../..";
+import { useTranslation } from "../../../lib/translations";
 import { Section } from "../section";
 
 type PaymentMethodSummary = {
@@ -35,7 +37,19 @@ type CustomerPaymentMethodSetupIntent = {
 };
 
 type CustomerLike = {
+  id: string,
   useBilling: () => CustomerBilling,
+  useProducts: () => Array<{
+    id: string | null,
+    quantity: number,
+    displayName: string,
+    type: "one_time" | "subscription",
+    subscription: null | {
+      currentPeriodEnd: Date | null,
+      cancelAtPeriodEnd: boolean,
+      isCancelable: boolean,
+    },
+  }>,
   createPaymentMethodSetupIntent: () => Promise<CustomerPaymentMethodSetupIntent>,
   setDefaultPaymentMethodFromSetupIntent: (setupIntentId: string) => Promise<PaymentMethodSummary>,
 };
@@ -97,6 +111,7 @@ function SetDefaultPaymentMethodForm(props: {
 export function PaymentsPanel(props: {
   title?: string,
   customer?: CustomerLike,
+  customerType?: "user" | "team",
   mockMode?: boolean,
 }) {
   if (props.mockMode) {
@@ -105,10 +120,11 @@ export function PaymentsPanel(props: {
   if (!props.customer) {
     return null;
   }
-  return <RealPaymentsPanel title={props.title} customer={props.customer} />;
+  return <RealPaymentsPanel title={props.title} customer={props.customer} customerType={props.customerType ?? "user"} />;
 }
 
 function MockPaymentsPanel(props: { title?: string }) {
+  const { t } = useTranslation();
   const defaultPaymentMethod: PaymentMethodSummary = {
     id: "pm_mock",
     brand: "visa",
@@ -121,25 +137,52 @@ function MockPaymentsPanel(props: { title?: string }) {
     <div className="space-y-4">
       {props.title && <Typography className="font-medium">{props.title}</Typography>}
       <Section
-        title="Payment method"
-        description="Manage the default payment method used for subscriptions and invoices."
+        title={t("Payment method")}
+        description={t("Manage the default payment method used for subscriptions and invoices.")}
       >
         <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>
         <Button disabled>
-          Update payment method
+          {t("Update payment method")}
         </Button>
       </Section>
+
+      <Section
+        title={t("Active plans")}
+        description={t("View your active plans and purchases.")}
+      >
+        <div className="space-y-3">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <Typography className="truncate">{t("Pro")}</Typography>
+              <Typography variant="secondary" type="footnote">{t("Renews on")} Jan 1, 2030</Typography>
+            </div>
+            <Button disabled variant="secondary" color="neutral">
+              {t("Cancel subscription")}
+            </Button>
+          </div>
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <Typography className="truncate">{t("Credits pack")}</Typography>
+              <Typography variant="secondary" type="footnote">{t("One-time purchase")}</Typography>
+            </div>
+          </div>
+        </div>
+      </Section>
     </div>
   );
 }
 
-function RealPaymentsPanel(props: { title?: string, customer: CustomerLike }) {
+function RealPaymentsPanel(props: { title?: string, customer: CustomerLike, customerType: "user" | "team" }) {
+  const { t } = useTranslation();
+  const stackApp = useStackApp();
   const billing = props.customer.useBilling();
   const defaultPaymentMethod = billing.defaultPaymentMethod;
+  const products = props.customer.useProducts();
 
   const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
   const [setupIntentClientSecret, setSetupIntentClientSecret] = useState<string | null>(null);
   const [setupIntentStripeAccountId, setSetupIntentStripeAccountId] = useState<string | null>(null);
+  const [cancelProductId, setCancelProductId] = useState<string | null>(null);
 
   const stripePromise = useMemo(() => {
     if (!setupIntentStripeAccountId) return null;
@@ -168,17 +211,17 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike }) {
       {props.title && <Typography className="font-medium">{props.title}</Typography>}
 
       <Section
-        title="Payment method"
-        description="Manage the default payment method used for subscriptions and invoices."
+        title={t("Payment method")}
+        description={t("Manage the default payment method used for subscriptions and invoices.")}
       >
         {defaultPaymentMethod ? (
           <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>
         ) : (
-          <Typography variant="secondary" type="footnote">No payment method on file.</Typography>
+          <Typography variant="secondary" type="footnote">{t("No payment method on file.")}</Typography>
         )}
 
         <Button onClick={openPaymentDialog}>
-          {defaultPaymentMethod ? "Update payment method" : "Add payment method"}
+          {defaultPaymentMethod ? t("Update payment method") : t("Add payment method")}
         </Button>
 
         <ActionDialog
@@ -190,7 +233,7 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike }) {
               setPaymentDialogOpen(true);
             }
           }}
-          title="Update payment method"
+          title={t("Update payment method")}
         >
           {!setupIntentClientSecret || !setupIntentStripeAccountId || !stripePromise ? (
             <Skeleton className="h-10 w-full" />
@@ -212,6 +255,74 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike }) {
           )}
         </ActionDialog>
       </Section>
+
+      <Section
+        title={t("Active plans")}
+        description={t("View your active plans and purchases.")}
+      >
+        {products.length === 0 ? (
+          <Typography variant="secondary" type="footnote">{t("No active plans.")}</Typography>
+        ) : (
+          <div className="space-y-3">
+            {products.map((product, index) => {
+              const quantitySuffix = product.quantity !== 1 ? ` ×${product.quantity}` : "";
+              const isSubscription = product.type === "subscription";
+              const isCancelable = isSubscription && !!product.id && !!product.subscription?.isCancelable;
+              const renewsAt = isSubscription ? (product.subscription?.currentPeriodEnd ?? null) : null;
+
+              const subtitle =
+                product.type === "one_time"
+                  ? t("One-time purchase")
+                  : renewsAt
+                    ? `${t("Renews on")} ${new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric" }).format(renewsAt)}`
+                    : t("Subscription");
+
+              return (
+                <div key={product.id ?? `${product.displayName}-${index}`} className="flex items-start justify-between gap-4">
+                  <div className="min-w-0">
+                    <Typography className="truncate">{product.displayName}{quantitySuffix}</Typography>
+                    <Typography variant="secondary" type="footnote">{subtitle}</Typography>
+                  </div>
+
+                  {isCancelable && (
+                    <Button
+                      variant="secondary"
+                      color="neutral"
+                      onClick={() => setCancelProductId(product.id!)}
+                    >
+                      {t("Cancel subscription")}
+                    </Button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        <ActionDialog
+          open={cancelProductId !== null}
+          onOpenChange={(open) => {
+            if (!open) setCancelProductId(null);
+          }}
+          title={t("Cancel subscription")}
+          description={t("Canceling will stop future renewals for this subscription.")}
+          danger
+          cancelButton
+          okButton={{
+            label: t("Cancel subscription"),
+            onClick: async () => {
+              const productId = cancelProductId;
+              if (!productId) return;
+              if (props.customerType === "team") {
+                await stackApp.cancelSubscription({ teamId: props.customer.id, productId });
+              } else {
+                await stackApp.cancelSubscription({ productId });
+              }
+              setCancelProductId(null);
+            },
+          }}
+        />
+      </Section>
     </div>
   );
 }
diff --git a/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx b/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
index 07da837f4a..3ca138a9ce 100644
--- a/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
+++ b/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
@@ -16,6 +16,7 @@ export function TeamPaymentsSection(props: { team: Team }) {
     return (
       <PaymentsPanel
         customer={props.team}
+        customerType="team"
       />
     );
   }
diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 71b0f4fdac..fac7b0183a 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -1168,6 +1168,12 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
       customerType: item.product.customer_type,
       isServerOnly: item.product.server_only,
       stackable: item.product.stackable,
+      type: item.type,
+      subscription: item.subscription ? {
+        currentPeriodEnd: item.subscription.current_period_end ? new Date(item.subscription.current_period_end) : null,
+        cancelAtPeriodEnd: item.subscription.cancel_at_period_end,
+        isCancelable: item.subscription.is_cancelable,
+      } : null,
     }));
     return Object.assign(products, { nextCursor: response.pagination.next_cursor ?? null });
   }
diff --git a/packages/template/src/lib/stack-app/customers/index.ts b/packages/template/src/lib/stack-app/customers/index.ts
index 5db0daa601..d876e6afae 100644
--- a/packages/template/src/lib/stack-app/customers/index.ts
+++ b/packages/template/src/lib/stack-app/customers/index.ts
@@ -39,6 +39,12 @@ export type CustomerProduct = {
   customerType: "user" | "team" | "custom",
   isServerOnly: boolean,
   stackable: boolean,
+  type: "one_time" | "subscription",
+  subscription: null | {
+    currentPeriodEnd: Date | null,
+    cancelAtPeriodEnd: boolean,
+    isCancelable: boolean,
+  },
 };
 
 export type CustomerProductsList = CustomerProduct[] & {

From 3033afebc0b27ba3c766ae91079dc2fd20d29796 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 6 Jan 2026 10:27:38 -0800
Subject: [PATCH 08/16] only show payments when stripe customer exists

---
 .../[customer_type]/[customer_id]/route.ts    | 20 +++++++++++++++++--
 .../endpoints/api/v1/payments/billing.test.ts | 20 +++++++++++++++++++
 .../src/components-page/account-settings.tsx  |  7 +++++--
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
index f9f859330a..aacadb814f 100644
--- a/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
+++ b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
@@ -1,7 +1,7 @@
 import { getDefaultCardPaymentMethodSummary, getStripeCustomerForCustomerOrNull } from "@/lib/payments";
 import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
 import { getStripeForAccount } from "@/lib/stripe";
-import { getPrismaClientForTenancy } from "@/prisma-client";
+import { getPrismaClientForTenancy, globalPrismaClient } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
@@ -70,8 +70,24 @@ export const GET = createSmartRouteHandler({
       );
     }
 
+    const project = await globalPrismaClient.project.findUnique({
+      where: { id: auth.tenancy.project.id },
+      select: { stripeAccountId: true },
+    });
+    const stripeAccountId = project?.stripeAccountId;
+    if (!stripeAccountId) {
+      return {
+        statusCode: 200,
+        bodyType: "json",
+        body: {
+          has_customer: false,
+          default_payment_method: null,
+        },
+      };
+    }
+
     const prisma = await getPrismaClientForTenancy(auth.tenancy);
-    const stripe = await getStripeForAccount({ tenancy: auth.tenancy });
+    const stripe = await getStripeForAccount({ accountId: stripeAccountId });
     const stripeCustomer = await getStripeCustomerForCustomerOrNull({
       stripe,
       prisma,
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
index 607e9e0299..d144390a84 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
@@ -1,6 +1,26 @@
 import { it } from "../../../../../helpers";
 import { Auth, niceBackendFetch, Payments, Project, Team, User } from "../../../../backend-helpers";
 
+it("should return no customer when payments are not set up", async ({ expect }) => {
+  await Project.createAndSwitch();
+
+  const { userId } = await Auth.fastSignUp();
+
+  const response = await niceBackendFetch(`/api/v1/payments/billing/user/${userId}`, {
+    accessType: "client",
+  });
+  expect(response).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "default_payment_method": null,
+        "has_customer": false,
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
 it("should allow a signed-in user to read their own billing status", async ({ expect }) => {
   await Project.createAndSwitch();
   await Payments.setup();
diff --git a/packages/template/src/components-page/account-settings.tsx b/packages/template/src/components-page/account-settings.tsx
index f3bc7c90ff..767df4bad1 100644
--- a/packages/template/src/components-page/account-settings.tsx
+++ b/packages/template/src/components-page/account-settings.tsx
@@ -82,10 +82,13 @@ export function AccountSettings(props: {
   // Use mock data if provided, otherwise use real data
   const user = props.mockUser ? {
     useTeams: () => [], // Mock empty teams for now
+    useBilling: () => ({ hasCustomer: false }), // Mock empty billing for now
   } : userFromHook;
 
   const project = props.mockProject || projectFromHook;
   const teams = user?.useTeams() || [];
+  const billing = user?.useBilling() || null;
+  const hasPaymentsHistory = billing?.hasCustomer || false;
 
   // If we're not in mock mode and don't have a user, the useUser hook will handle redirect
   if (!props.mockUser && !userFromHook) {
@@ -140,7 +143,7 @@ export function AccountSettings(props: {
                 <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />
               </Suspense>,
             }] as const : []),
-            {
+            ...(hasPaymentsHistory ? [{
               title: t('Payments'),
               type: 'item',
               id: 'payments',
@@ -148,7 +151,7 @@ export function AccountSettings(props: {
               content: <Suspense fallback={<PaymentsPageSkeleton/>}>
                 <PaymentsPage mockMode={!!props.mockUser} />
               </Suspense>,
-            },
+            }] as const : []),
             {
               title: t('Settings'),
               type: 'item',

From 23e0ab8a61248939ea5c1ab5484dc726c6cd232a Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 6 Jan 2026 11:11:12 -0800
Subject: [PATCH 09/16] small fix

---
 .../account-settings/payments/payments-panel.tsx            | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
index af844ee4e0..00042af6c6 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
@@ -43,6 +43,7 @@ type CustomerLike = {
     id: string | null,
     quantity: number,
     displayName: string,
+    customerType: "user" | "team" | "custom",
     type: "one_time" | "subscription",
     subscription: null | {
       currentPeriodEnd: Date | null,
@@ -178,6 +179,7 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike, cust
   const billing = props.customer.useBilling();
   const defaultPaymentMethod = billing.defaultPaymentMethod;
   const products = props.customer.useProducts();
+  const productsForCustomerType = products.filter(product => product.customerType === props.customerType);
 
   const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
   const [setupIntentClientSecret, setSetupIntentClientSecret] = useState<string | null>(null);
@@ -260,11 +262,11 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike, cust
         title={t("Active plans")}
         description={t("View your active plans and purchases.")}
       >
-        {products.length === 0 ? (
+        {productsForCustomerType.length === 0 ? (
           <Typography variant="secondary" type="footnote">{t("No active plans.")}</Typography>
         ) : (
           <div className="space-y-3">
-            {products.map((product, index) => {
+            {productsForCustomerType.map((product, index) => {
               const quantitySuffix = product.quantity !== 1 ? ` ×${product.quantity}` : "";
               const isSubscription = product.type === "subscription";
               const isCancelable = isSubscription && !!product.id && !!product.subscription?.isCancelable;

From 554523896318bb2f543d365732ac043f4e2838fc Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Fri, 9 Jan 2026 10:11:55 -0800
Subject: [PATCH 10/16] empty


From 1bbb395f4da1986579d2cfc868c178e21175806d Mon Sep 17 00:00:00 2001
From: BilalG1 <bg2002@gmail.com>
Date: Fri, 9 Jan 2026 11:02:39 -0800
Subject: [PATCH 11/16] cancel subscription endpoint (#1067)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->
---
 .../[customer_id]/[product_id]/route.ts       | 138 ++++++++
 .../[customer_type]/[customer_id]/route.ts    |   2 +
 .../api/v1/payments/products.test.ts          | 301 +++++++++++++++++-
 apps/e2e/tests/js/payments.test.ts            |  57 ++++
 .../src/interface/client-interface.ts         |  17 +
 .../apps/implementations/client-app-impl.ts   |  20 ++
 .../stack-app/apps/interfaces/client-app.ts   |   2 +
 7 files changed, 536 insertions(+), 1 deletion(-)
 create mode 100644 apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/[product_id]/route.ts

diff --git a/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/[product_id]/route.ts b/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/[product_id]/route.ts
new file mode 100644
index 0000000000..635d23ca5c
--- /dev/null
+++ b/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/[product_id]/route.ts
@@ -0,0 +1,138 @@
+import { ensureProductIdOrInlineProduct, getOwnedProductsForCustomer } from "@/lib/payments";
+import { getPrismaClientForTenancy } from "@/prisma-client";
+import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { KnownErrors } from "@stackframe/stack-shared";
+import { StackAssertionError, StatusError, captureError, throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { SubscriptionStatus } from "@/generated/prisma/client";
+import { getStripeForAccount } from "@/lib/stripe";
+import { typedToUppercase } from "@stackframe/stack-shared/dist/utils/strings";
+import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
+
+export const DELETE = createSmartRouteHandler({
+  metadata: {
+    summary: "Cancel a customer's subscription product",
+    hidden: true,
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: clientOrHigherAuthTypeSchema.defined(),
+      project: adaptSchema.defined(),
+      tenancy: adaptSchema.defined(),
+    }).defined(),
+    params: yupObject({
+      customer_type: yupString().oneOf(["user", "team", "custom"]).defined(),
+      customer_id: yupString().defined(),
+      product_id: yupString().defined(),
+    }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      success: yupBoolean().oneOf([true]).defined(),
+    }).defined(),
+  }),
+  handler: async ({ auth, params }, fullReq) => {
+    if (auth.type === "client") {
+      const currentUser = fullReq.auth?.user;
+      if (!currentUser) {
+        throw new KnownErrors.UserAuthenticationRequired();
+      }
+      if (params.customer_type === "user") {
+        if (params.customer_id !== currentUser.id) {
+          throw new StatusError(StatusError.Forbidden, "Clients can only cancel their own subscriptions.");
+        }
+      } else if (params.customer_type === "team") {
+        const prisma = await getPrismaClientForTenancy(auth.tenancy);
+        await ensureUserTeamPermissionExists(prisma, {
+          tenancy: auth.tenancy,
+          teamId: params.customer_id,
+          userId: currentUser.id,
+          permissionId: "team_admin",
+          errorType: "required",
+          recursive: true,
+        });
+      } else {
+        throw new StatusError(StatusError.Forbidden, "Clients can only cancel user or team subscriptions they control.");
+      }
+    }
+
+    const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const product = await ensureProductIdOrInlineProduct(auth.tenancy, auth.type, params.product_id, undefined);
+    if (params.customer_type !== product.customerType) {
+      throw new KnownErrors.ProductCustomerTypeDoesNotMatch(
+        params.product_id,
+        params.customer_id,
+        product.customerType,
+        params.customer_type,
+      );
+    }
+
+    const ownedProducts = await getOwnedProductsForCustomer({
+      prisma,
+      tenancy: auth.tenancy,
+      customerType: params.customer_type,
+      customerId: params.customer_id,
+    });
+    const ownedProductsForProduct = ownedProducts.filter((p) => p.id === params.product_id);
+    if (ownedProductsForProduct.length === 0) {
+      throw new StatusError(400, "Customer does not have this product.");
+    }
+    if (ownedProductsForProduct.some((product) => product.type === "one_time")) {
+      throw new StatusError(400, "This product is a one time purchase and cannot be canceled.");
+    }
+
+    const subscriptions = await prisma.subscription.findMany({
+      where: {
+        tenancyId: auth.tenancy.id,
+        customerType: typedToUppercase(params.customer_type),
+        customerId: params.customer_id,
+        productId: params.product_id,
+        status: { in: [SubscriptionStatus.active, SubscriptionStatus.trialing] },
+      },
+    });
+    if (subscriptions.length === 0) {
+      captureError("cancel-subscription-missing", new StackAssertionError(
+        "Owned subscription product missing active/trialing subscription record.",
+        {
+          customerType: params.customer_type,
+          customerId: params.customer_id,
+          productId: params.product_id,
+        },
+      ));
+      throw new StatusError(400, "This subscription cannot be canceled.");
+    }
+
+    const hasStripeSubscription = subscriptions.some((subscription) => subscription.stripeSubscriptionId);
+    const stripe = hasStripeSubscription ? await getStripeForAccount({ tenancy: auth.tenancy }) : undefined;
+    for (const subscription of subscriptions) {
+      if (subscription.stripeSubscriptionId) {
+        const stripeClient = stripe ?? throwErr(500, "Stripe client missing for subscription cancellation.");
+        await stripeClient.subscriptions.cancel(subscription.stripeSubscriptionId);
+        continue;
+      }
+      await prisma.subscription.update({
+        where: {
+          tenancyId_id: {
+            tenancyId: auth.tenancy.id,
+            id: subscription.id,
+          },
+        },
+        data: {
+          status: SubscriptionStatus.canceled,
+          currentPeriodEnd: new Date(),
+          cancelAtPeriodEnd: true,
+        },
+      });
+    }
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: {
+        success: true,
+      },
+    };
+  },
+});
diff --git a/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts b/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
index b1146fdee4..4fe55f0743 100644
--- a/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
+++ b/apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/route.ts
@@ -83,6 +83,7 @@ export const GET = createSmartRouteHandler({
   },
 });
 
+
 export const POST = createSmartRouteHandler({
   metadata: {
     summary: "Grant a product to a customer",
@@ -151,3 +152,4 @@ export const POST = createSmartRouteHandler({
     };
   },
 });
+
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
index aa30985bbc..00c8104cc1 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
@@ -1,6 +1,6 @@
 import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
 import { it } from "../../../../../helpers";
-import { Auth, niceBackendFetch, Payments, Project, User } from "../../../../backend-helpers";
+import { Auth, niceBackendFetch, Payments, Project, Team, User } from "../../../../backend-helpers";
 
 async function configureProduct(config: any) {
   await Project.updateConfig({
@@ -136,6 +136,305 @@ it("should grant configured subscription product and expose it via listing", asy
   `);
 });
 
+it("should allow a signed-in user to cancel their own subscription product", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "pro-plan": {
+        displayName: "Pro Plan",
+        customerType: "user",
+        serverOnly: false,
+        stackable: false,
+        prices: {
+          monthly: {
+            USD: "1000",
+            interval: [1, "month"],
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId } = await Auth.fastSignUp();
+  await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "pro-plan",
+    },
+  });
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}/pro-plan`, {
+    method: "DELETE",
+    accessType: "client",
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "success": true },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  const listResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    accessType: "client",
+  });
+  expect(listResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "is_paginated": true,
+        "items": [],
+        "pagination": { "next_cursor": null },
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should reject a client canceling someone else's subscription product", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "pro-plan": {
+        displayName: "Pro Plan",
+        customerType: "user",
+        serverOnly: false,
+        stackable: false,
+        prices: {
+          monthly: {
+            USD: "1000",
+            interval: [1, "month"],
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId: userId1 } = await Auth.fastSignUp();
+  await niceBackendFetch(`/api/v1/payments/products/user/${userId1}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "pro-plan",
+    },
+  });
+
+  const { userId: userId2 } = await Auth.fastSignUp();
+  expect(userId2).not.toEqual(userId1);
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId1}/pro-plan`, {
+    method: "DELETE",
+    accessType: "client",
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 403,
+      "body": "Clients can only cancel their own subscriptions.",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should allow a server to cancel someone else's subscription product", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "pro-plan": {
+        displayName: "Pro Plan",
+        customerType: "user",
+        serverOnly: false,
+        stackable: false,
+        prices: {
+          monthly: {
+            USD: "1000",
+            interval: [1, "month"],
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId } = await Auth.fastSignUp();
+  await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "pro-plan",
+    },
+  });
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}/pro-plan`, {
+    method: "DELETE",
+    accessType: "server",
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "success": true },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should cancel all stackable subscription quantities", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "seats-plan": {
+        displayName: "Seats Plan",
+        customerType: "user",
+        serverOnly: false,
+        stackable: true,
+        prices: {
+          monthly: {
+            USD: "1000",
+            interval: [1, "month"],
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId } = await Auth.fastSignUp();
+  await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "seats-plan",
+    },
+  });
+  await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "seats-plan",
+    },
+  });
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}/seats-plan`, {
+    method: "DELETE",
+    accessType: "client",
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "success": true },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  const listResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    accessType: "client",
+  });
+  expect(listResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "is_paginated": true,
+        "items": [],
+        "pagination": { "next_cursor": null },
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should reject canceling a one-time purchase product", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "one-time": {
+        displayName: "One Time",
+        customerType: "user",
+        serverOnly: false,
+        stackable: false,
+        prices: {
+          once: {
+            USD: "1000",
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId } = await Auth.fastSignUp();
+  await niceBackendFetch(`/api/v1/payments/products/user/${userId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "one-time",
+    },
+  });
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/user/${userId}/one-time`, {
+    method: "DELETE",
+    accessType: "client",
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "This product is a one time purchase and cannot be canceled.",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should allow a team admin to cancel a team's subscription product", async ({ expect }) => {
+  await Project.createAndSwitch();
+  await Payments.setup();
+  await configureProduct({
+    products: {
+      "team-pro-plan": {
+        displayName: "Team Pro Plan",
+        customerType: "team",
+        serverOnly: false,
+        stackable: false,
+        prices: {
+          monthly: {
+            USD: "1000",
+            interval: [1, "month"],
+          },
+        },
+        includedItems: {},
+      },
+    },
+  });
+
+  const { userId } = await Auth.fastSignUp();
+  const { teamId } = await Team.create({ accessType: "server", creatorUserId: userId });
+
+  await niceBackendFetch(`/api/v1/payments/products/team/${teamId}`, {
+    method: "POST",
+    accessType: "server",
+    body: {
+      product_id: "team-pro-plan",
+    },
+  });
+
+  const cancelResponse = await niceBackendFetch(`/api/v1/payments/products/team/${teamId}/team-pro-plan`, {
+    method: "DELETE",
+    accessType: "client",
+  });
+  expect(cancelResponse).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "success": true },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
 it("should hide server-only products from clients while exposing them to servers", async ({ expect }) => {
   await Project.createAndSwitch();
   await Payments.setup();
diff --git a/apps/e2e/tests/js/payments.test.ts b/apps/e2e/tests/js/payments.test.ts
index cdf80b5edf..d12e45651f 100644
--- a/apps/e2e/tests/js/payments.test.ts
+++ b/apps/e2e/tests/js/payments.test.ts
@@ -206,6 +206,63 @@ it("cannot decrease team item quantity below zero", async ({ expect }) => {
   expect(still.quantity).toBe(0);
 }, { timeout: 40_000 });
 
+it("client can cancel their own subscription", async ({ expect }) => {
+  const { clientApp, serverApp, adminApp } = await createApp({ config: {} });
+  const project = await adminApp.getProject();
+  await adminApp.setupPayments();
+  await project.updateConfig({
+    "payments.offers.pro-sub": {
+      displayName: "Pro Subscription",
+      customerType: "user",
+      serverOnly: false,
+      stackable: false,
+      prices: { monthly: { USD: "1000", interval: [1, "month"] } },
+      includedItems: {},
+    },
+  });
+
+  await clientApp.signUpWithCredential({ email: "cancel-sub@test.com", password: "password", verificationCallbackUrl: "http://localhost:3000" });
+  await clientApp.signInWithCredential({ email: "cancel-sub@test.com", password: "password" });
+  const user = await clientApp.getUser({ or: "throw" });
+
+  await serverApp.grantProduct({ userId: user.id, productId: "pro-sub" });
+  const before = await user.listProducts();
+  expect(before.some((p) => p.id === "pro-sub")).toBe(true);
+
+  await clientApp.cancelSubscription({ productId: "pro-sub" });
+  const after = await user.listProducts();
+  expect(after.some((p) => p.id === "pro-sub")).toBe(false);
+}, { timeout: 60_000 });
+
+it("team admin can cancel a team's subscription", async ({ expect }) => {
+  const { clientApp, serverApp, adminApp } = await createApp({ config: { clientTeamCreationEnabled: true } });
+  const project = await adminApp.getProject();
+  await adminApp.setupPayments();
+  await project.updateConfig({
+    "payments.offers.team-sub": {
+      displayName: "Team Subscription",
+      customerType: "team",
+      serverOnly: false,
+      stackable: false,
+      prices: { monthly: { USD: "1000", interval: [1, "month"] } },
+      includedItems: {},
+    },
+  });
+
+  await clientApp.signUpWithCredential({ email: "cancel-team-sub@test.com", password: "password", verificationCallbackUrl: "http://localhost:3000" });
+  await clientApp.signInWithCredential({ email: "cancel-team-sub@test.com", password: "password" });
+  const user = await clientApp.getUser({ or: "throw" });
+
+  const team = await user.createTeam({ displayName: "Cancel Team" });
+  await serverApp.grantProduct({ teamId: team.id, productId: "team-sub" });
+  const before = await team.listProducts();
+  expect(before.some((p) => p.id === "team-sub")).toBe(true);
+
+  await clientApp.cancelSubscription({ productId: "team-sub", teamId: team.id });
+  const after = await team.listProducts();
+  expect(after.some((p) => p.id === "team-sub")).toBe(false);
+}, { timeout: 60_000 });
+
 
 it("can create item quantity change from server app", { timeout: 40_000 }, async ({ expect }) => {
   const { serverApp, adminApp } = await createApp({
diff --git a/packages/stack-shared/src/interface/client-interface.ts b/packages/stack-shared/src/interface/client-interface.ts
index 0bc738c24e..a5303f0a23 100644
--- a/packages/stack-shared/src/interface/client-interface.ts
+++ b/packages/stack-shared/src/interface/client-interface.ts
@@ -1806,6 +1806,23 @@ export class StackClientInterface {
     return await response.json();
   }
 
+  async cancelSubscription(
+    options: {
+      customer_type: "user" | "team" | "custom",
+      customer_id: string,
+      product_id: string,
+    },
+    session: InternalSession | null,
+  ): Promise<void> {
+    await this.sendClientRequest(
+      urlString`/payments/products/${options.customer_type}/${options.customer_id}/${options.product_id}`,
+      {
+        method: "DELETE",
+      },
+      session,
+    );
+  }
+
   async createCheckoutUrl(
     customer_type: "user" | "team" | "custom",
     customer_id: string,
diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 210b3786d1..9962b6aec8 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -1648,6 +1648,26 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     return this._customerProductsFromResponse(response);
   }
 
+  async cancelSubscription(options: { productId: string } | { productId: string, teamId: string }): Promise<void> {
+    const session = await this._getSession();
+    const user = await this.getUser();
+    if (!user) {
+      throw new KnownErrors.UserAuthenticationRequired();
+    }
+    const customerType = "teamId" in options ? "team" : "user";
+    const customerId = "teamId" in options ? options.teamId : user.id;
+    await this._interface.cancelSubscription({
+      customer_type: customerType,
+      customer_id: customerId,
+      product_id: options.productId,
+    }, session);
+    if (customerType === "user") {
+      await this._userProductsCache.invalidateWhere(([cachedSession, userId]) => cachedSession === session && userId === customerId);
+    } else {
+      await this._teamProductsCache.invalidateWhere(([cachedSession, teamId]) => cachedSession === session && teamId === customerId);
+    }
+  }
+
   // IF_PLATFORM react-like
   useProducts(options: CustomerProductsRequestOptions): CustomerProductsList {
     const session = this._useSession();
diff --git a/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts b/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
index d39fc10691..208a95f072 100644
--- a/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
+++ b/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
@@ -76,6 +76,8 @@ export type StackClientApp<HasTokenStore extends boolean = boolean, ProjectId ex
     getUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'anonymous' }): Promise<ProjectCurrentUser<ProjectId>>,
     getUser(options?: GetCurrentUserOptions<HasTokenStore>): Promise<ProjectCurrentUser<ProjectId> | null>,
 
+    cancelSubscription(options: { productId: string } | { productId: string, teamId: string }): Promise<void>,
+
     // note: we don't special-case 'anonymous' here to return non-null, see GetPartialUserOptions for more details
     getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'token' }): Promise<TokenPartialUser | null>,
     getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'convex' }): Promise<TokenPartialUser | null>,

From e1f2dafbdae9d816cdc1995fe85ba193a464d5dc Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Fri, 9 Jan 2026 11:18:17 -0800
Subject: [PATCH 12/16] pnpm lock

---
 pnpm-lock.yaml | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cbaa8702c9..17281a5586 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26040,6 +26040,13 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  '@stripe/react-stripe-js@3.8.1(@stripe/stripe-js@7.7.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@stripe/stripe-js': 7.7.0
+      prop-types: 15.8.1
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+
   '@stripe/react-stripe-js@3.8.1(@stripe/stripe-js@7.7.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@stripe/stripe-js': 7.7.0

From 1cf17794d53d62e1f2b78dcf823827fc44d3540c Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Fri, 9 Jan 2026 12:53:22 -0800
Subject: [PATCH 13/16] team selector in payments panel

---
 apps/backend/src/lib/payments.tsx             |  3 +-
 .../src/components-page/account-settings.tsx  |  5 +-
 .../payments/payments-page.tsx                | 24 +++++-
 .../payments/payments-panel.tsx               | 80 +++++++++----------
 .../account-settings/teams/team-page.tsx      |  2 -
 .../teams/team-payments-section.tsx           | 34 --------
 6 files changed, 63 insertions(+), 85 deletions(-)
 delete mode 100644 packages/template/src/components-page/account-settings/teams/team-payments-section.tsx

diff --git a/apps/backend/src/lib/payments.tsx b/apps/backend/src/lib/payments.tsx
index f4aa09589f..1123fe44f3 100644
--- a/apps/backend/src/lib/payments.tsx
+++ b/apps/backend/src/lib/payments.tsx
@@ -1,5 +1,6 @@
 import { PrismaClientTransaction } from "@/prisma-client";
 import { PurchaseCreationSource, SubscriptionStatus } from "@/generated/prisma/client";
+import { CustomerType } from "@/generated/prisma/client";
 import { KnownErrors } from "@stackframe/stack-shared";
 import type { inlineProductSchema, productSchema, productSchemaWithMetadata } from "@stackframe/stack-shared/dist/schema-fields";
 import { SUPPORTED_CURRENCIES } from "@stackframe/stack-shared/dist/utils/currency-constants";
@@ -428,7 +429,7 @@ export async function ensureCustomerExists(options: {
   }
 }
 
-function customerTypeToStripeCustomerType(customerType: "user" | "team"): CustomerType {
+function customerTypeToStripeCustomerType(customerType: "user" | "team") {
   return customerType === "user" ? CustomerType.USER : CustomerType.TEAM;
 }
 
diff --git a/packages/template/src/components-page/account-settings.tsx b/packages/template/src/components-page/account-settings.tsx
index 767df4bad1..d82b9b1fe9 100644
--- a/packages/template/src/components-page/account-settings.tsx
+++ b/packages/template/src/components-page/account-settings.tsx
@@ -88,7 +88,6 @@ export function AccountSettings(props: {
   const project = props.mockProject || projectFromHook;
   const teams = user?.useTeams() || [];
   const billing = user?.useBilling() || null;
-  const hasPaymentsHistory = billing?.hasCustomer || false;
 
   // If we're not in mock mode and don't have a user, the useUser hook will handle redirect
   if (!props.mockUser && !userFromHook) {
@@ -143,7 +142,7 @@ export function AccountSettings(props: {
                 <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />
               </Suspense>,
             }] as const : []),
-            ...(hasPaymentsHistory ? [{
+            {
               title: t('Payments'),
               type: 'item',
               id: 'payments',
@@ -151,7 +150,7 @@ export function AccountSettings(props: {
               content: <Suspense fallback={<PaymentsPageSkeleton/>}>
                 <PaymentsPage mockMode={!!props.mockUser} />
               </Suspense>,
-            }] as const : []),
+            },
             {
               title: t('Settings'),
               type: 'item',
diff --git a/packages/template/src/components-page/account-settings/payments/payments-page.tsx b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
index 9a04012300..510d66569a 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-page.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { useState } from "react";
+import { Team, TeamSwitcher } from "../../..";
 import { useUser } from "../../../lib/hooks";
 import { useTranslation } from "../../../lib/translations";
 import { PageLayout } from "../page-layout";
@@ -13,7 +15,6 @@ export function PaymentsPage(props: { mockMode?: boolean }) {
     return (
       <PageLayout>
         <PaymentsPanel
-          title={t("Personal payments")}
           mockMode
         />
       </PageLayout>
@@ -24,12 +25,27 @@ export function PaymentsPage(props: { mockMode?: boolean }) {
     return null;
   }
 
+  const teams = user.useTeams();
+  const hasTeams = teams.length > 0;
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const customer = selectedTeam ?? user;
+  const customerType = selectedTeam ? "team" : "user";
+
   return (
     <PageLayout>
+      {hasTeams ? (
+        <TeamSwitcher
+          team={selectedTeam ?? undefined}
+          allowNull
+          nullLabel={t("Select team")}
+          onChange={async (team) => {
+            setSelectedTeam(team);
+          }}
+        />
+      ) : null}
       <PaymentsPanel
-        title={t("Personal payments")}
-        customer={user}
-        customerType="user"
+        customer={customer}
+        customerType={customerType}
       />
     </PageLayout>
   );
diff --git a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
index 00042af6c6..ebdd6b802f 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
@@ -212,51 +212,49 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike, cust
     <div className="space-y-4">
       {props.title && <Typography className="font-medium">{props.title}</Typography>}
 
-      <Section
-        title={t("Payment method")}
-        description={t("Manage the default payment method used for subscriptions and invoices.")}
-      >
-        {defaultPaymentMethod ? (
+      {defaultPaymentMethod && (
+        <Section
+          title={t("Payment method")}
+          description={t("Manage the default payment method used for subscriptions and invoices.")}
+        >
           <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>
-        ) : (
-          <Typography variant="secondary" type="footnote">{t("No payment method on file.")}</Typography>
-        )}
 
-        <Button onClick={openPaymentDialog}>
-          {defaultPaymentMethod ? t("Update payment method") : t("Add payment method")}
-        </Button>
+          <Button onClick={openPaymentDialog}>
+            {t("Update payment method")}
+          </Button>
 
-        <ActionDialog
-          open={paymentDialogOpen}
-          onOpenChange={(open) => {
-            if (!open) {
-              closePaymentDialog();
-            } else {
-              setPaymentDialogOpen(true);
-            }
-          }}
-          title={t("Update payment method")}
-        >
-          {!setupIntentClientSecret || !setupIntentStripeAccountId || !stripePromise ? (
-            <Skeleton className="h-10 w-full" />
-          ) : (
-            <Elements
-              stripe={stripePromise}
-              options={{
-                clientSecret: setupIntentClientSecret,
-              }}
-            >
-              <SetDefaultPaymentMethodForm
-                clientSecret={setupIntentClientSecret}
-                onSetupIntentSucceeded={async (setupIntentId) => {
-                  await props.customer.setDefaultPaymentMethodFromSetupIntent(setupIntentId);
-                  closePaymentDialog();
+          <ActionDialog
+            open={paymentDialogOpen}
+            onOpenChange={(open) => {
+              if (!open) {
+                closePaymentDialog();
+              } else {
+                setPaymentDialogOpen(true);
+              }
+            }}
+            title={t("Update payment method")}
+          >
+            {!setupIntentClientSecret || !setupIntentStripeAccountId || !stripePromise ? (
+              <Skeleton className="h-10 w-full" />
+            ) : (
+              <Elements
+                stripe={stripePromise}
+                options={{
+                  clientSecret: setupIntentClientSecret,
                 }}
-              />
-            </Elements>
-          )}
-        </ActionDialog>
-      </Section>
+              >
+                <SetDefaultPaymentMethodForm
+                  clientSecret={setupIntentClientSecret}
+                  onSetupIntentSucceeded={async (setupIntentId) => {
+                    await props.customer.setDefaultPaymentMethodFromSetupIntent(setupIntentId);
+                    closePaymentDialog();
+                  }}
+                />
+              </Elements>
+            )}
+          </ActionDialog>
+        </Section>
+      )}
 
       <Section
         title={t("Active plans")}
diff --git a/packages/template/src/components-page/account-settings/teams/team-page.tsx b/packages/template/src/components-page/account-settings/teams/team-page.tsx
index 12d85d0dc1..362afa47ca 100644
--- a/packages/template/src/components-page/account-settings/teams/team-page.tsx
+++ b/packages/template/src/components-page/account-settings/teams/team-page.tsx
@@ -7,7 +7,6 @@ import { TeamMemberInvitationSection } from "./team-member-invitation-section";
 import { TeamMemberListSection } from "./team-member-list-section";
 import { TeamProfileImageSection } from "./team-profile-image-section";
 import { TeamUserProfileSection } from "./team-profile-user-section";
-import { TeamPaymentsSection } from "./team-payments-section";
 
 
 export function TeamPage(props: { team: Team }) {
@@ -18,7 +17,6 @@ export function TeamPage(props: { team: Team }) {
       <TeamDisplayNameSection key={`display-name-${props.team.id}`} team={props.team} />
       <TeamMemberListSection key={`member-list-${props.team.id}`} team={props.team} />
       <TeamMemberInvitationSection key={`member-invitation-${props.team.id}`} team={props.team} />
-      <TeamPaymentsSection key={`payments-${props.team.id}`} team={props.team} />
       <TeamApiKeysSection key={`api-keys-${props.team.id}`} team={props.team} />
       <LeaveTeamSection key={`leave-team-${props.team.id}`} team={props.team} />
     </PageLayout>
diff --git a/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx b/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
deleted file mode 100644
index 3ca138a9ce..0000000000
--- a/packages/template/src/components-page/account-settings/teams/team-payments-section.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-
-import { Typography } from "@stackframe/stack-ui";
-import { Team, useUser } from "../../..";
-import { useTranslation } from "../../../lib/translations";
-import { Section } from "../section";
-import { PaymentsPanel } from "../payments/payments-panel";
-
-export function TeamPaymentsSection(props: { team: Team }) {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-
-  const isTeamAdmin = !!user.usePermission(props.team, "team_admin");
-
-  if (isTeamAdmin) {
-    return (
-      <PaymentsPanel
-        customer={props.team}
-        customerType="team"
-      />
-    );
-  }
-
-  return (
-    <Section
-      title={t("Team payments")}
-      description={t("Manage the default payment method for this team.")}
-    >
-      <Typography variant="secondary" type="footnote">
-        {t("You need team admin permissions to manage team billing.")}
-      </Typography>
-    </Section>
-  );
-}

From bbaf344cef07eefb6d351ece7bf2c076ebab3315 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Fri, 9 Jan 2026 14:13:09 -0800
Subject: [PATCH 14/16] refactor ensureClientCanAccessCustomer

---
 .../[customer_type]/[customer_id]/route.ts    | 40 ++++---------------
 .../[customer_id]/set-default/route.ts        | 40 ++++---------------
 .../[customer_id]/setup-intent/route.ts       | 40 ++++---------------
 apps/backend/src/lib/payments.tsx             | 33 ++++++++++++++-
 .../payments/payments-page.tsx                | 14 +++----
 5 files changed, 63 insertions(+), 104 deletions(-)

diff --git a/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
index aacadb814f..65f4f7a9b7 100644
--- a/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
+++ b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
@@ -1,34 +1,8 @@
-import { getDefaultCardPaymentMethodSummary, getStripeCustomerForCustomerOrNull } from "@/lib/payments";
-import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
+import { ensureClientCanAccessCustomer, getDefaultCardPaymentMethodSummary, getStripeCustomerForCustomerOrNull } from "@/lib/payments";
 import { getStripeForAccount } from "@/lib/stripe";
 import { getPrismaClientForTenancy, globalPrismaClient } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
-import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
-import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
-
-async function ensureClientCanAccessCustomer(params: { customer_type: "user" | "team", customer_id: string }, fullReq: any, tenancy: any) {
-  const currentUser = fullReq.auth?.user;
-  if (!currentUser) {
-    throw new KnownErrors.UserAuthenticationRequired();
-  }
-  if (params.customer_type === "user") {
-    if (params.customer_id !== currentUser.id) {
-      throw new StatusError(StatusError.Forbidden, "Clients can only manage their own billing.");
-    }
-    return;
-  }
-
-  const prisma = await getPrismaClientForTenancy(tenancy);
-  await ensureUserTeamPermissionExists(prisma, {
-    tenancy,
-    teamId: params.customer_id,
-    userId: currentUser.id,
-    permissionId: "team_admin",
-    errorType: "required",
-    recursive: true,
-  });
-}
 
 export const GET = createSmartRouteHandler({
   metadata: {
@@ -63,11 +37,13 @@ export const GET = createSmartRouteHandler({
   }),
   handler: async ({ auth, params }, fullReq) => {
     if (auth.type === "client") {
-      await ensureClientCanAccessCustomer(
-        { customer_type: params.customer_type, customer_id: params.customer_id },
-        fullReq,
-        auth.tenancy,
-      );
+      await ensureClientCanAccessCustomer({
+        customerType: params.customer_type,
+        customerId: params.customer_id,
+        user: fullReq.auth?.user,
+        tenancy: auth.tenancy,
+        forbiddenMessage: "Clients can only manage their own billing.",
+      });
     }
 
     const project = await globalPrismaClient.project.findUnique({
diff --git a/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts
index bad42d7131..f5d59102ee 100644
--- a/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts
+++ b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts
@@ -1,35 +1,10 @@
-import { ensureStripeCustomerForCustomer, getDefaultCardPaymentMethodSummary } from "@/lib/payments";
-import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
+import { ensureClientCanAccessCustomer, ensureStripeCustomerForCustomer, getDefaultCardPaymentMethodSummary } from "@/lib/payments";
 import { getStripeForAccount } from "@/lib/stripe";
 import { getPrismaClientForTenancy } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
-import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 
-async function ensureClientCanAccessCustomer(params: { customer_type: "user" | "team", customer_id: string }, fullReq: any, tenancy: any) {
-  const currentUser = fullReq.auth?.user;
-  if (!currentUser) {
-    throw new KnownErrors.UserAuthenticationRequired();
-  }
-  if (params.customer_type === "user") {
-    if (params.customer_id !== currentUser.id) {
-      throw new StatusError(StatusError.Forbidden, "Clients can only manage their own payment method.");
-    }
-    return;
-  }
-
-  const prisma = await getPrismaClientForTenancy(tenancy);
-  await ensureUserTeamPermissionExists(prisma, {
-    tenancy,
-    teamId: params.customer_id,
-    userId: currentUser.id,
-    permissionId: "team_admin",
-    errorType: "required",
-    recursive: true,
-  });
-}
-
 export const POST = createSmartRouteHandler({
   metadata: {
     summary: "Set default payment method from a setup intent",
@@ -66,11 +41,13 @@ export const POST = createSmartRouteHandler({
   }),
   handler: async ({ auth, params, body }, fullReq) => {
     if (auth.type === "client") {
-      await ensureClientCanAccessCustomer(
-        { customer_type: params.customer_type, customer_id: params.customer_id },
-        fullReq,
-        auth.tenancy,
-      );
+      await ensureClientCanAccessCustomer({
+        customerType: params.customer_type,
+        customerId: params.customer_id,
+        user: fullReq.auth?.user,
+        tenancy: auth.tenancy,
+        forbiddenMessage: "Clients can only manage their own payment method.",
+      });
     }
 
     const prisma = await getPrismaClientForTenancy(auth.tenancy);
@@ -120,4 +97,3 @@ export const POST = createSmartRouteHandler({
     };
   },
 });
-
diff --git a/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts
index 54c4ac8b3d..3b144d4a5e 100644
--- a/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts
+++ b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts
@@ -1,35 +1,10 @@
-import { ensureStripeCustomerForCustomer } from "@/lib/payments";
-import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
+import { ensureClientCanAccessCustomer, ensureStripeCustomerForCustomer } from "@/lib/payments";
 import { getStripeForAccount } from "@/lib/stripe";
 import { getPrismaClientForTenancy, globalPrismaClient } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
-import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, clientOrHigherAuthTypeSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 
-async function ensureClientCanAccessCustomer(params: { customer_type: "user" | "team", customer_id: string }, fullReq: any, tenancy: any) {
-  const currentUser = fullReq.auth?.user;
-  if (!currentUser) {
-    throw new KnownErrors.UserAuthenticationRequired();
-  }
-  if (params.customer_type === "user") {
-    if (params.customer_id !== currentUser.id) {
-      throw new StatusError(StatusError.Forbidden, "Clients can only manage their own payment method.");
-    }
-    return;
-  }
-
-  const prisma = await getPrismaClientForTenancy(tenancy);
-  await ensureUserTeamPermissionExists(prisma, {
-    tenancy,
-    teamId: params.customer_id,
-    userId: currentUser.id,
-    permissionId: "team_admin",
-    errorType: "required",
-    recursive: true,
-  });
-}
-
 export const POST = createSmartRouteHandler({
   metadata: {
     summary: "Create a setup intent to update default payment method",
@@ -58,11 +33,13 @@ export const POST = createSmartRouteHandler({
   }),
   handler: async ({ auth, params }, fullReq) => {
     if (auth.type === "client") {
-      await ensureClientCanAccessCustomer(
-        { customer_type: params.customer_type, customer_id: params.customer_id },
-        fullReq,
-        auth.tenancy,
-      );
+      await ensureClientCanAccessCustomer({
+        customerType: params.customer_type,
+        customerId: params.customer_id,
+        user: fullReq.auth?.user,
+        tenancy: auth.tenancy,
+        forbiddenMessage: "Clients can only manage their own payment method.",
+      });
     }
 
     const prisma = await getPrismaClientForTenancy(auth.tenancy);
@@ -103,4 +80,3 @@ export const POST = createSmartRouteHandler({
     };
   },
 });
-
diff --git a/apps/backend/src/lib/payments.tsx b/apps/backend/src/lib/payments.tsx
index 1123fe44f3..2d87535ca8 100644
--- a/apps/backend/src/lib/payments.tsx
+++ b/apps/backend/src/lib/payments.tsx
@@ -1,7 +1,9 @@
-import { PrismaClientTransaction } from "@/prisma-client";
+import { getPrismaClientForTenancy, PrismaClientTransaction } from "@/prisma-client";
+import { ensureUserTeamPermissionExists } from "@/lib/request-checks";
 import { PurchaseCreationSource, SubscriptionStatus } from "@/generated/prisma/client";
 import { CustomerType } from "@/generated/prisma/client";
 import { KnownErrors } from "@stackframe/stack-shared";
+import type { UsersCrud } from "@stackframe/stack-shared/dist/interface/crud/users";
 import type { inlineProductSchema, productSchema, productSchemaWithMetadata } from "@stackframe/stack-shared/dist/schema-fields";
 import { SUPPORTED_CURRENCIES } from "@stackframe/stack-shared/dist/utils/currency-constants";
 import { FAR_FUTURE_DATE, addInterval, getIntervalsElapsed } from "@stackframe/stack-shared/dist/utils/dates";
@@ -20,6 +22,35 @@ type Product = yup.InferType<typeof productSchema>;
 type ProductWithMetadata = yup.InferType<typeof productSchemaWithMetadata>;
 type SelectedPrice = Exclude<Product["prices"], "include-by-default">[string];
 
+export async function ensureClientCanAccessCustomer(options: {
+  customerType: "user" | "team",
+  customerId: string,
+  user: UsersCrud["Admin"]["Read"] | undefined,
+  tenancy: Tenancy,
+  forbiddenMessage: string,
+}): Promise<void> {
+  const currentUser = options.user;
+  if (!currentUser) {
+    throw new KnownErrors.UserAuthenticationRequired();
+  }
+  if (options.customerType === "user") {
+    if (options.customerId !== currentUser.id) {
+      throw new StatusError(StatusError.Forbidden, options.forbiddenMessage);
+    }
+    return;
+  }
+
+  const prisma = await getPrismaClientForTenancy(options.tenancy);
+  await ensureUserTeamPermissionExists(prisma, {
+    tenancy: options.tenancy,
+    teamId: options.customerId,
+    userId: currentUser.id,
+    permissionId: "team_admin",
+    errorType: "required",
+    recursive: true,
+  });
+}
+
 export async function ensureProductIdOrInlineProduct(
   tenancy: Tenancy,
   accessType: "client" | "server" | "admin",
diff --git a/packages/template/src/components-page/account-settings/payments/payments-page.tsx b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
index 510d66569a..219df8597b 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-page.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
@@ -10,6 +10,11 @@ import { PaymentsPanel } from "./payments-panel";
 export function PaymentsPage(props: { mockMode?: boolean }) {
   const { t } = useTranslation();
   const user = useUser({ or: props.mockMode ? "return-null" : "redirect" });
+  const teams = user?.useTeams() ?? [];
+  const hasTeams = teams.length > 0;
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const customer = selectedTeam ?? user;
+  const customerType = selectedTeam ? "team" : "user";
 
   if (props.mockMode) {
     return (
@@ -21,15 +26,10 @@ export function PaymentsPage(props: { mockMode?: boolean }) {
     );
   }
 
-  if (!user) {
+  if (!customer) {
     return null;
   }
 
-  const teams = user.useTeams();
-  const hasTeams = teams.length > 0;
-  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
-  const customer = selectedTeam ?? user;
-  const customerType = selectedTeam ? "team" : "user";
 
   return (
     <PageLayout>
@@ -37,7 +37,7 @@ export function PaymentsPage(props: { mockMode?: boolean }) {
         <TeamSwitcher
           team={selectedTeam ?? undefined}
           allowNull
-          nullLabel={t("Select team")}
+          nullLabel={t("Personal")}
           onChange={async (team) => {
             setSelectedTeam(team);
           }}

From 744bed10665d3b7ac391c4b6dfbb2db53c03002e Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Fri, 9 Jan 2026 14:16:09 -0800
Subject: [PATCH 15/16] remove

---
 .../account-settings/payments/payments-panel.tsx               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
index ebdd6b802f..1c8c190d66 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
@@ -8,6 +8,7 @@ import React, { useMemo, useState } from "react";
 import { useStackApp } from "../../..";
 import { useTranslation } from "../../../lib/translations";
 import { Section } from "../section";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 
 type PaymentMethodSummary = {
   id: string,
@@ -288,7 +289,7 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike, cust
                     <Button
                       variant="secondary"
                       color="neutral"
-                      onClick={() => setCancelProductId(product.id!)}
+                      onClick={() => setCancelProductId(product.id)}
                     >
                       {t("Cancel subscription")}
                     </Button>

From bc6fa78cfabce46142a941e579a8a7af1d5ccc95 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 13 Jan 2026 12:49:40 -0800
Subject: [PATCH 16/16] hide section when no plans

---
 .../payments/payments-panel.tsx               | 70 +++++++++----------
 1 file changed, 33 insertions(+), 37 deletions(-)

diff --git a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
index 1c8c190d66..8448a54505 100644
--- a/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
+++ b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
@@ -257,48 +257,44 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike, cust
         </Section>
       )}
 
-      <Section
+      {productsForCustomerType.length > 0 && <Section
         title={t("Active plans")}
         description={t("View your active plans and purchases.")}
       >
-        {productsForCustomerType.length === 0 ? (
-          <Typography variant="secondary" type="footnote">{t("No active plans.")}</Typography>
-        ) : (
-          <div className="space-y-3">
-            {productsForCustomerType.map((product, index) => {
-              const quantitySuffix = product.quantity !== 1 ? ` ×${product.quantity}` : "";
-              const isSubscription = product.type === "subscription";
-              const isCancelable = isSubscription && !!product.id && !!product.subscription?.isCancelable;
-              const renewsAt = isSubscription ? (product.subscription?.currentPeriodEnd ?? null) : null;
-
-              const subtitle =
-                product.type === "one_time"
-                  ? t("One-time purchase")
-                  : renewsAt
-                    ? `${t("Renews on")} ${new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric" }).format(renewsAt)}`
-                    : t("Subscription");
+        <div className="space-y-3">
+          {productsForCustomerType.map((product, index) => {
+            const quantitySuffix = product.quantity !== 1 ? ` ×${product.quantity}` : "";
+            const isSubscription = product.type === "subscription";
+            const isCancelable = isSubscription && !!product.id && !!product.subscription?.isCancelable;
+            const renewsAt = isSubscription ? (product.subscription?.currentPeriodEnd ?? null) : null;
 
-              return (
-                <div key={product.id ?? `${product.displayName}-${index}`} className="flex items-start justify-between gap-4">
-                  <div className="min-w-0">
-                    <Typography className="truncate">{product.displayName}{quantitySuffix}</Typography>
-                    <Typography variant="secondary" type="footnote">{subtitle}</Typography>
-                  </div>
+            const subtitle =
+              product.type === "one_time"
+                ? t("One-time purchase")
+                : renewsAt
+                  ? `${t("Renews on")} ${new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric" }).format(renewsAt)}`
+                  : t("Subscription");
 
-                  {isCancelable && (
-                    <Button
-                      variant="secondary"
-                      color="neutral"
-                      onClick={() => setCancelProductId(product.id)}
-                    >
-                      {t("Cancel subscription")}
-                    </Button>
-                  )}
+            return (
+              <div key={product.id ?? `${product.displayName}-${index}`} className="flex items-start justify-between gap-4">
+                <div className="min-w-0">
+                  <Typography className="truncate">{product.displayName}{quantitySuffix}</Typography>
+                  <Typography variant="secondary" type="footnote">{subtitle}</Typography>
                 </div>
-              );
-            })}
-          </div>
-        )}
+
+                {isCancelable && (
+                  <Button
+                    variant="secondary"
+                    color="neutral"
+                    onClick={() => setCancelProductId(product.id)}
+                  >
+                    {t("Cancel subscription")}
+                  </Button>
+                )}
+              </div>
+            );
+          })}
+        </div>
 
         <ActionDialog
           open={cancelProductId !== null}
@@ -323,7 +319,7 @@ function RealPaymentsPanel(props: { title?: string, customer: CustomerLike, cust
             },
           }}
         />
-      </Section>
+      </Section>}
     </div>
   );
 }