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 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 me query on the billing router to get the summary of the user's billing data:

import { getActivePlan } from "@workspace/billing";

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

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

  if (summary.isLoading) {
    return <p>Loading...</p>;
  }

  const plan = getActivePlan(summary.data);

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

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

import { api } from "~/lib/api";
import { authClient } from "~/lib/auth";

export const User = () => {
  const session = authClient.useSession();

  const summary = useQuery({
    queryKey: ["me"],
    queryFn: handle(api.billing.me.$get),
    enabled: !!session.data?.user, 
  });

  if (!session.data?.user || !summary.data) {
    return null;
  }

  return (
    <div>
      <p>{session.data.user.email}</p>
      <p>{summary.data.length}</p>
    </div>
  );
};

Read more about auth in extension.