Billing

Get started with billing in TurboStarter.

As you could guess, there is no sense in implementing the whole billing process inside the browser extension, so we're relying on the web app to handle it.

You probably won't display pricing tables inside a popup window, right?

You can customize the whole flow and onboarding process when a user purchases a plan in your web app.

Then you would be able to easily fetch customer data to ensure that the user has access to correct extension features.

Fetching customer data

When your user has purchased a plan from your landing page or web app, you can easily fetch their data using the API.

To do so, just invoke the getCustomer query on the billing router:

CustomerScreen.tsx
import { api } from "~/lib/api/trpc";
 
export default function CustomerScreen() {
  const { data: customer, isLoading } = api.billing.getCustomer.useQuery();
 
  if (isLoading) return <p>Loading...</p>;
 
  return <p>{customer?.plan}</p>;
}

You may also want to ensure that user is logged in before fetching their billing data to avoid unnecessary API calls.

app/components/layout/header.tsx
import { api } from "~/lib/api/trpc";
 
export const User = () => {
  const { data: session, isLoading: isSessionLoading } = useQuery({
    queryKey: ["session"],
    queryFn: () =>
      sendToBackground<
        {
          type: typeof SESSION_MESSAGE_TYPE.GET;
        },
        {
          session: Session | null;
        }
      >({
        name: "session",
        body: { type: SESSION_MESSAGE_TYPE.GET },
      }),
  });
 
  const user = session?.session?.user ?? null;
  const { data: customer, isLoading: isCustomerLoading } =
    api.billing.getCustomer.useQuery(undefined, {
      enabled: !!user, 
    });
 
  if (!user || !customer) {
    return null;
  }
 
  return (
    <div>
      <p>{user.email}</p>
      <p>{customer.plan}</p>
    </div>
  );
};

Read more about auth in extension.

Last updated on

On this page

Ship your startup everywhere. In minutes.