Skip to main content
The account page gives users a summary of all subscriptions attached to their Stripe customer record. It is the final destination after a successful payment and the central hub for managing existing subscriptions.

​
How subscription data is loaded

On page load, the route loader reads the customerId from the session cookie and fetches all subscriptions for that customer directly from Stripe.
app/routes/account.tsx
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const session = await getSession(request.headers.get("Cookie"));
  const customerId = session.get("customerId") as string;
  const subscriptions = await listSubscriptions(customerId);
  return { subscriptions };
};
app/services/payment.ts
export const listSubscriptions = async (customerId: string) => {
  return await stripe.subscriptions.list({ customer: customerId });
};
The list includes all subscriptions in any state (active, past due, canceled, etc.) associated with the customer.

​
Subscription card details

Each subscription is displayed with the following information:
FieldSourceNotes
Subscription IDsubscription.idRendered as a link to the Stripe Dashboard for that subscription
Statussubscription.statusCommon values: active, past_due, incomplete, canceled
Card last 4 digitssubscription.default_payment_method.card.last4The card used to pay for this subscription
Current period endsubscription.current_period_endUnix timestamp of when the current billing period ends
The subscription ID link points to the Stripe Dashboard. In test mode this opens https://dashboard.stripe.com/test/subscriptions/{id}. In live mode the /test/ segment is omitted.

​
Subscription statuses

The subscription is in good standing. The most recent invoice was paid successfully and the customer has access to the product.
The most recent invoice was not paid by the due date. Stripe will retry the charge according to your retry settings. The customer may lose access depending on your dunning configuration.
The subscription was created but the first invoice has not been paid. This state occurs if the user started the checkout flow but did not complete the payment step.
The subscription has been canceled and will not renew. Canceled subscriptions remain in the list for record-keeping.
The account page provides two navigation links:

Add a subscription

Takes the user back to the plan selection page to purchase an additional subscription under the same customer account.

Restart demo

Returns the user to the home page. In a demo context this effectively resets the flow so a new customer can be registered.
“Restart demo” does not clear the session cookie or delete the Stripe customer. It only navigates to /. If you want a full reset, the session must be explicitly destroyed server-side or the cookie must expire.

​
Viewing subscriptions in Stripe

Each subscription ID on the account page links directly to the Stripe Dashboard. From there you can:
  • View invoice history
  • Cancel or pause the subscription
  • Update the payment method
  • Issue refunds
During development, use the Stripe Dashboard to inspect subscription state and manually trigger events like payment failures or renewals using the Stripe CLI.

Build docs developers (and LLMs) love

Get started for freeTalk to us