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..65f4f7a9b7
--- /dev/null
+++ b/apps/backend/src/app/api/latest/payments/billing/[customer_type]/[customer_id]/route.ts
@@ -0,0 +1,100 @@
+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 { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+
+export const GET = createSmartRouteHandler({
+  metadata: {
+    summary: "Get payment method 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(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      has_customer: yupBoolean().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({
+        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({
+      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({ accountId: stripeAccountId });
+    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,
+          default_payment_method: null,
+        },
+      };
+    }
+
+    const defaultPaymentMethod = await getDefaultCardPaymentMethodSummary({
+      stripe,
+      stripeCustomer,
+    });
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: {
+        has_customer: true,
+        default_payment_method: defaultPaymentMethod,
+      },
+    };
+  },
+});
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..f5d59102ee
--- /dev/null
+++ b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/set-default/route.ts
@@ -0,0 +1,99 @@
+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 { adaptSchema, clientOrHigherAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+
+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({
+        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);
+    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..3b144d4a5e
--- /dev/null
+++ b/apps/backend/src/app/api/latest/payments/payment-method/[customer_type]/[customer_id]/setup-intent/route.ts
@@ -0,0 +1,82 @@
+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 { adaptSchema, clientOrHigherAuthTypeSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+
+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({
+        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);
+    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/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 4fe55f0743..07d2f595a6 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
@@ -54,6 +54,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 d6c15acf74..2d87535ca8 100644
--- a/apps/backend/src/lib/payments.tsx
+++ b/apps/backend/src/lib/payments.tsx
@@ -1,6 +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";
@@ -19,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",
@@ -265,6 +297,7 @@ type Subscription = {
   quantity: number,
   currentPeriodStart: Date,
   currentPeriodEnd: Date | null,
+  cancelAtPeriodEnd: boolean,
   status: SubscriptionStatus,
   createdAt: Date,
 };
@@ -301,6 +334,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 +363,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 +382,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,
@@ -424,6 +460,117 @@ export async function ensureCustomerExists(options: {
   }
 }
 
+function customerTypeToStripeCustomerType(customerType: "user" | "team") {
+  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: Stripe.ApiList<Stripe.Customer> = 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",
@@ -648,6 +795,11 @@ export type OwnedProduct = {
   product: Product,
   createdAt: Date,
   sourceId: string,
+  subscription: null | {
+    currentPeriodEnd: Date | null,
+    cancelAtPeriodEnd: boolean,
+    isCancelable: boolean,
+  },
 };
 
 export async function getOwnedProductsForCustomer(options: {
@@ -695,6 +847,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,
+      },
     });
   }
 
@@ -707,6 +864,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/billing.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
new file mode 100644
index 0000000000..d144390a84
--- /dev/null
+++ b/apps/e2e/tests/backend/endpoints/api/v1/payments/billing.test.ts
@@ -0,0 +1,137 @@
+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();
+
+  const { userId } = await Auth.fastSignUp();
+
+  const getInitial = await niceBackendFetch(`/api/v1/payments/billing/user/${userId}`, {
+    accessType: "client",
+  });
+  expect(getInitial).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "default_payment_method": null,
+        "has_customer": true,
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  const setupIntent = await niceBackendFetch(`/api/v1/payments/payment-method/user/${userId}/setup-intent`, {
+    method: "POST",
+    accessType: "client",
+    body: {},
+  });
+  expect(setupIntent.status).toBe(200);
+  expect(setupIntent.body).toMatchObject({
+    client_secret: expect.any(String),
+    stripe_account_id: expect.any(String),
+  });
+
+  const getAfter = await niceBackendFetch(`/api/v1/payments/billing/user/${userId}`, {
+    accessType: "client",
+  });
+  expect(getAfter).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "default_payment_method": null,
+        "has_customer": true,
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("should reject a signed-in user reading another user's billing status", 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}`, {
+    accessType: "client",
+  });
+  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 memberGet = await niceBackendFetch(`/api/v1/payments/billing/team/${teamId}`, {
+    accessType: "client",
+  });
+  expect(memberGet).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/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/payments/products.test.ts
index 00c8104cc1..30acd7710e 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 },
@@ -521,6 +527,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 },
@@ -651,6 +663,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 },
@@ -723,6 +741,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 },
@@ -1022,6 +1046,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",
@@ -1037,6 +1067,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 },
@@ -1156,6 +1188,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>" },
@@ -1188,6 +1226,8 @@ it("listing products should support cursor pagination", async ({ expect }) => {
               "stackable": false,
             },
             "quantity": 1,
+            "subscription": null,
+            "type": "one_time",
           },
           {
             "id": "pro-addon",
@@ -1203,6 +1243,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 3199b96103..00aec26fd8 100644
--- a/apps/e2e/tests/snapshot-serializer.ts
+++ b/apps/e2e/tests/snapshot-serializer.ts
@@ -70,6 +70,7 @@ const stripFields = [
   "token",
   "createdAt",
   "updatedAt",
+  "current_period_end",
   "response",
   "msgId",
   "endpointId",
diff --git a/packages/react/package.json b/packages/react/package.json
index 81f2fa1bcd..b40e3bdf5d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -59,6 +59,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-shared/src/interface/client-interface.ts b/packages/stack-shared/src/interface/client-interface.ts
index a5303f0a23..505158b38f 100644
--- a/packages/stack-shared/src/interface/client-interface.ts
+++ b/packages/stack-shared/src/interface/client-interface.ts
@@ -1848,6 +1848,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/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/stack-shared/src/interface/server-interface.ts b/packages/stack-shared/src/interface/server-interface.ts
index 6a547b2083..41885b8414 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/stack/package.json b/packages/stack/package.json
index 155d433cb7..22d5219612 100644
--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -59,6 +59,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 f501810224..a4f1f9abb5 100644
--- a/packages/template/package-template.json
+++ b/packages/template/package-template.json
@@ -87,6 +87,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 bec7c96686..4e9a240132 100644
--- a/packages/template/package.json
+++ b/packages/template/package.json
@@ -64,6 +64,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..d82b9b1fe9 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 }) => {
@@ -80,10 +82,12 @@ 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;
 
   // If we're not in mock mode and don't have a user, the useUser hook will handle redirect
   if (!props.mockUser && !userFromHook) {
@@ -138,6 +142,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 +237,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..219df8597b
--- /dev/null
+++ b/packages/template/src/components-page/account-settings/payments/payments-page.tsx
@@ -0,0 +1,52 @@
+'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";
+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 (
+      <PageLayout>
+        <PaymentsPanel
+          mockMode
+        />
+      </PageLayout>
+    );
+  }
+
+  if (!customer) {
+    return null;
+  }
+
+
+  return (
+    <PageLayout>
+      {hasTeams ? (
+        <TeamSwitcher
+          team={selectedTeam ?? undefined}
+          allowNull
+          nullLabel={t("Personal")}
+          onChange={async (team) => {
+            setSelectedTeam(team);
+          }}
+        />
+      ) : null}
+      <PaymentsPanel
+        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
new file mode 100644
index 0000000000..8448a54505
--- /dev/null
+++ b/packages/template/src/components-page/account-settings/payments/payments-panel.tsx
@@ -0,0 +1,325 @@
+'use client';
+
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+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";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+
+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,
+  defaultPaymentMethod: PaymentMethodSummary,
+};
+
+type CustomerPaymentMethodSetupIntent = {
+  clientSecret: string,
+  stripeAccountId: string,
+};
+
+type CustomerLike = {
+  id: string,
+  useBilling: () => CustomerBilling,
+  useProducts: () => Array<{
+    id: string | null,
+    quantity: number,
+    displayName: string,
+    customerType: "user" | "team" | "custom",
+    type: "one_time" | "subscription",
+    subscription: null | {
+      currentPeriodEnd: Date | null,
+      cancelAtPeriodEnd: boolean,
+      isCancelable: boolean,
+    },
+  }>,
+  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,
+  customerType?: "user" | "team",
+  mockMode?: boolean,
+}) {
+  if (props.mockMode) {
+    return <MockPaymentsPanel title={props.title} />;
+  }
+  if (!props.customer) {
+    return null;
+  }
+  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",
+    last4: "4242",
+    exp_month: 12,
+    exp_year: 2030,
+  };
+
+  return (
+    <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.")}
+      >
+        <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>
+        <Button disabled>
+          {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, customerType: "user" | "team" }) {
+  const { t } = useTranslation();
+  const stackApp = useStackApp();
+  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);
+  const [setupIntentStripeAccountId, setSetupIntentStripeAccountId] = useState<string | null>(null);
+  const [cancelProductId, setCancelProductId] = useState<string | null>(null);
+
+  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">
+      {props.title && <Typography className="font-medium">{props.title}</Typography>}
+
+      {defaultPaymentMethod && (
+        <Section
+          title={t("Payment method")}
+          description={t("Manage the default payment method used for subscriptions and invoices.")}
+        >
+          <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>
+
+          <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();
+                  }}
+                />
+              </Elements>
+            )}
+          </ActionDialog>
+        </Section>
+      )}
+
+      {productsForCustomerType.length > 0 && <Section
+        title={t("Active plans")}
+        description={t("View your active plans and purchases.")}
+      >
+        <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");
+
+            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/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index c2784ea133..12ce5cdcb7 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, CustomerDefaultPaymentMethod, CustomerPaymentMethodSetupIntent, CustomerProductsList, CustomerProductsListOptions, CustomerProductsRequestOptions, Item } from "../../customers";
 import { NotificationCategory } from "../../notification-categories";
 import { TeamPermission } from "../../permissions";
 import { AdminOwnedProject, AdminProjectUpdateOptions, Project, adminProjectCreateOptionsToCrud } from "../../projects";
@@ -269,6 +269,21 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     }
   );
 
+  private readonly _customerBillingCache = createCacheBySession<["user" | "team", string], {
+    has_customer: boolean,
+    default_payment_method: {
+      id: string,
+      brand: string | null,
+      last4: string | null,
+      exp_month: number | null,
+      exp_year: number | null,
+    } | null,
+  }>(
+    async (session, [customerType, customerId]) => {
+      return await this._interface.getCustomerBilling(customerType, customerId, session);
+    }
+  );
+
   private readonly _convexPartialUserCache = createCache<[unknown], TokenPartialUser | null>(
     async ([ctx]) => await this._getPartialUserFromConvex(ctx as any)
   );
@@ -1153,10 +1168,32 @@ 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 });
   }
 
+  protected _customerBillingFromResponse(response: {
+    has_customer: boolean,
+    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,
+      defaultPaymentMethod: response.default_payment_method,
+    };
+  }
+
   protected _createAuth(session: InternalSession): Auth {
     const app = this;
     return {
@@ -1589,8 +1626,31 @@ 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 createPaymentMethodSetupIntent(): Promise<CustomerPaymentMethodSetupIntent> {
+        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 body = await app._interface.setDefaultCustomerPaymentMethodFromSetupIntent(type, userIdOrTeamId, setupIntentId, effectiveSession);
+        await app._customerBillingCache.refresh([effectiveSession, type, userIdOrTeamId]);
+        return body.default_payment_method;
+      },
       async getItem(itemId: string) {
         return await app.getItem({ itemId, ...customerOptions });
       },
@@ -1608,7 +1668,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..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[] & {
@@ -55,6 +61,24 @@ export type CustomerProductsRequestOptions =
   | ({ teamId: string } & CustomerProductsListOptions)
   | ({ customCustomerId: string } & CustomerProductsListOptions);
 
+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,
+  defaultPaymentMethod: CustomerDefaultPaymentMethod,
+};
+
+export type CustomerPaymentMethodSetupIntent = {
+  clientSecret: string,
+  stripeAccountId: string,
+};
+
 export type Customer<IsServer extends boolean = false> =
   & {
     readonly id: string,
@@ -63,7 +87,17 @@ export type Customer<IsServer extends boolean = false> =
       | { productId: string, returnUrl?: string }
       | (IsServer extends true ? { product: InlineProduct, returnUrl?: string } : never)
     )): Promise<string>,
+
+    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 ceee6f9518..947b3c44b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1561,6 +1561,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)
@@ -1685,6 +1691,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)
@@ -2067,6 +2079,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)
@@ -27222,6 +27240,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