Skip to main content

Billing Architecture

Stripe checkout and portal session creation require a server-side API call. In extensions, CORS makes calling external APIs from popup/content script unreliable.

All billing flows run in the background service worker.

For webhook setup, price IDs, and env keys, see Stripe Setup. Backend wiring: Supabase, Firebase.

Flow​

  1. UI (popup or main) sends CREATE_CHECKOUT or CREATE_PORTAL via sendRuntimeMessage
  2. Background reads the auth token from chrome.storage.local and calls Firebase/Supabase function with an Authorization: Bearer header
  3. Cloud function validates the token, then calls Stripe API (server-side only) and returns a URL
  4. Background returns { url } to the UI; the BillingCard component opens the URL in a new tab

The Stripe secret key never leaves the server. Only the publishable key is in the extension bundle.