Billing

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>
  );
};

Billing

Fetching customer data

On this page