Billing system (PRO) · Docs

Starter ProBilling

Billing that turns your product into a businessLink to section

Starter Free gives you pricing surfaces and billing UX.

Starter Pro gives you real Stripe billing foundations:

Stripe Checkout
billing portal
customer mapping
subscription lifecycle
webhook synchronization
invoice-ready flows
plan-aware access

This is not just a pricing page.

It is the layer that makes your SaaS capable of generating real revenue.

Revenue starts when billing is real.

Starter Pro helps you move from pricing UI to a production-oriented billing system that can actually charge customers.

Setup guide

One-time payment · Instant access after purchase

Core idea

Billing is not UI. Billing is payment state, customer ownership, webhook truth, and product access.

What this solvesLink to section

Most teams underestimate what “add Stripe” means.

A real SaaS billing layer needs:

checkout session creation
customer-to-user mapping
subscription state handling
webhook verification
invoice tracking
billing portal access
plan-aware product behavior
failed payment handling
cancellation behavior

Starter Pro gives you a structured foundation for that layer so billing can become a product system, not a fragile afterthought.

Included foundationsLink to section

Stripe Checkout

Server-created checkout sessions, upgrade entry points, and a clean path from pricing intent to payment.

Webhook synchronization

Stripe events synchronized into your app state so subscriptions, invoices, and access stay aligned.

Invoices and subscriptions

Invoice-ready tracking, subscription lifecycle handling, status surfaces, and billing history foundations.

Plan-aware access

Billing-aware product logic so access can reflect plan, status, subscription, and customer state.

Billing lifecycleLink to section

User starts upgradeLink to section

The user clicks an upgrade CTA from pricing, billing, or a gated feature.

entry-points.txt

/pricing
/billing
/protected-feature

Backend creates Checkout sessionLink to section

The browser should not create Stripe sessions directly. Your backend creates the Checkout session using server-side Stripe keys.

server/billing/create-checkout-session.ts

const session = await stripe.checkout.sessions.create({
  customer: stripeCustomerId,
  mode: "subscription",
  line_items: [{ price: priceId, quantity: 1 }],
  success_url: `${appUrl}/billing?success=true`,
  cancel_url: `${appUrl}/pricing?canceled=true`,
});

Stripe confirms paymentLink to section

Stripe handles payment, subscription creation, and customer billing operations.

The UI should not assume success only because a redirect happened.

Webhook updates app stateLink to section

Webhooks are the synchronization layer. They verify what actually happened in Stripe and update your database.

webhook-events.txt

checkout.session.completed
customer.subscription.created
customer.subscription.updated
customer.subscription.deleted
invoice.payment_succeeded
invoice.payment_failed

App reflects billing stateLink to section

Product access, billing page, invoice history, and plan-aware UI should read from synchronized backend state.

Production rule

Redirects are UX. Webhooks are truth.

Billing flowsLink to section

Checkout

Checkout starts revenue

Checkout creates the initial payment or subscription flow between your product and Stripe.

upgrade CTA triggers backend session creation
Stripe Checkout handles payment
success and cancel URLs return users to the app
webhook confirms the actual state

Portal

Portal manages existing customers

The billing portal handles customer self-service flows without rebuilding billing management UI.

payment method updates
invoice access
subscription management
cancellation flows
plan changes

Webhooks

Webhooks synchronize truth

Webhooks keep your application aligned with Stripe billing events and subscription state.

verified Stripe event handling
subscription status updates
invoice state updates
idempotent event handling patterns

Access

Plan-aware product access

Billing becomes product infrastructure when subscription state controls feature access.

feature gates by plan
subscription status checks
past due and canceled handling
billing-aware dashboard surfaces

Starter Free vs Starter ProLink to section

Capability	Starter Free	Starter Pro
Pricing page	Included	Included
Billing UI	Mocked	Real-backed
Stripe Checkout	Not included	Included
Billing portal	UI only	Included
Customer mapping	Not included	Included foundation
Subscription lifecycle	Mocked	Real sync
Webhooks	Not included	Included foundation
Invoice tracking	Mocked	Invoice-ready
Plan-aware access	Conceptual	Included foundation
Revenue readiness	Demo only	Production-oriented

Simple distinction

Starter Free simulates monetization. Starter Pro gives you the billing layer required to charge customers.

ArchitectureLink to section

Data model responsibilitiesLink to section

Billing needs enough structure to represent customer and subscription state inside your app.

Typical responsibilities include:

Area	Purpose
Customer	Maps app users or organizations to Stripe customers
Product	Represents sellable SaaS products
Price	Represents Stripe prices and commercial plans
Subscription	Tracks current subscription state
Invoice	Stores invoice references and payment status
WebhookEvent	Tracks processed Stripe events for reliability

Why this matters

Stripe is the payment source. Your app still needs synchronized billing state to protect access and render product UI correctly.

Plan gatingLink to section

Billing becomes valuable when it controls product behavior.

Starter Pro gives you the foundation to build logic such as:

free vs paid access
plan-based feature flags
subscription status checks
billing-aware settings
upgrade prompts
cancellation behavior
failed payment messaging

plan-access.ts

export function canAccessProFeature(subscriptionStatus: string) {
  return subscriptionStatus === "active" || subscriptionStatus === "trialing";
}

Keep plan logic clear, centralized, and server-verifiable.

Security rulesLink to section

Use these rules when adapting the billing layer.

Prefer

create Stripe sessions on the server
verify webhook signatures
use webhooks as the billing source of truth
store synchronized subscription state
check access server-side for sensitive features

Avoid

calling Stripe secret APIs from the browser
unlocking access only from redirect success
skipping webhook verification
scattering plan checks across the UI
using vague billing error messages

Decision guideLink to section

Starter Pro

Use Starter Pro when billing becomes real

Use Starter Pro when charging users becomes part of your launch plan and billing can no longer stay mocked.

you want to charge users
Stripe Checkout must work
subscription status controls access
invoice history matters
webhooks need to sync state
billing is blocking launch confidence

Start setup

Starter Free

Stay on Free while validating pricing UX

Stay on Starter Free while your monetization flow is still a product surface and not a real payment system.

you are validating pricing UX
billing is still mocked
you do not accept payments yet
your product is not ready to monetize

Upgrade when billing becomes real

Starter Free helps you shape monetization. Starter Pro gives you the billing layer required to charge customers.

Implementation checklistLink to section

Before treating billing as launch-ready, validate:

checkout session creation
checkout success flow
checkout cancel flow
customer mapping
billing portal session creation
webhook signature verification
subscription created event
subscription updated event
subscription canceled event
invoice payment succeeded event
invoice payment failed event
plan-aware access logic
billing page state
user-facing billing error copy

Validation principle

Do not trust billing until you validate the full lifecycle: checkout, webhook, database sync, and product access.

Common questionsLink to section

Move from pricing UI to real revenue infrastructure.

Starter Pro helps you wire Checkout, Portal, webhooks, subscription state, and plan-aware access from a stronger baseline.

View pricing