Overview

Get started with web billing in TurboStarter.

The @workspace/billing and @workspace/billing-web packages are used to manage all the billing-related logic and features for your web SaaS application.

Inside, we're making an abstraction layer that allows us to use different billing providers without breaking our code nor changing the internal API calls.

Billing Providers

Providers

TurboStarter implements multiple providers for managing billing:

All configuration and setup is built-in with a unified API, so you can switch between providers by simply changing the exports and even introduce your own provider without breaking any billing-related logic.

Depending on the service you use, you will need to set the environment variables accordingly. By default - the billing package uses Stripe. Alternatively, you can use Lemon Squeezy or Polar. In the future, we will also add Creem.

Configuration

The core billing configuration is maintained in the @workspace/billing package within the config directory. This directory houses the primary configuration schema as well as schemas for the available API endpoints.

To better understand all billing features and customization options provided by TurboStarter, explore the following dedicated guides:

Fetching customer status

After your user completes checkout, you'll often want to fetch their current billing summary (subscription status, entitlements, credits) to:

  • gate features in your UI
  • show “Current plan” / “Manage subscription” states
  • keep the app in sync after upgrades/downgrades

You can do this via the billing me endpoint (/api/billing/me) using the web API client.

Server-side

page.tsx
import { handle } from "@workspace/api/utils";
import { getActivePlan } from "@workspace/billing";

import { api } from "~/lib/api/server";

export default async function BillingStatus() {
  const summary = await handle(api.billing.me.$get)();
  const plan = getActivePlan(summary);

  return <p>Current plan: {plan}</p>;
}

Client-side

billing-status.tsx
"use client";

import { useQuery } from "@tanstack/react-query";
import { handle } from "@workspace/api/utils";
import { getActivePlan } from "@workspace/billing";

import { api } from "~/lib/api/client";

export function BillingStatus() {
  const summary = useQuery({
    queryKey: ["me"],
    queryFn: handle(api.billing.me.$get),
  });

  if (!summary.data) {
    return null;
  }

  const plan = getActivePlan(summary.data);

  return <p>Current plan: {plan}</p>;
}

In summary, TurboStarter offers a flexible and unified billing framework, allowing you to mix and match billing models and providers as needed. Each section above provides focused documentation to help you configure the approach that best suits your SaaS application's needs.

How is this guide?

Last updated on

On this page

Ship your startup everywhere. In minutes.Get TurboStarter