Take payments

Step 3 of 5. Wire Stripe in test mode, then complete a real checkout from your own paywall. How the money moves:

The checklist

Run everything from backend/functions/, after firebase use <your-project-id>. No Stripe CLI needed. The order matters (why).

cp .env.example .env    # non-secret knobs (return URLs, trial days)
firebase functions:secrets:set STRIPE_SECRET_KEY   # sk_test_…
pnpm seed:stripe        # creates the catalog by lookup_key (idempotent)
pnpm stripe:webhook     # registers the webhook + stores its signing secret
pnpm firebase:deploy    # ONE deploy: the api function + rules
pnpm doctor             # verifies the whole chain, points at any fix

Each step is explained in the Payments guide. Then point the extension at your backend in apps/extension/.env:

WXT_API_URL=https://us-central1-<project>.cloudfunctions.net/api
VITE_PREMIUM=true

Restart pnpm dev and reload the extension.

Verify: the popup flips to premium

1. In the popup, trigger the paywall (the Try a premium feature demo button, or your own gated feature from step 2).
2. Click the wall’s upgrade button; Stripe Checkout opens in a tab.
3. Pay with the test card 4242 4242 4242 4242 (any future expiry/CVC).
4. Back in the popup: the wall clears and the Account tab shows your plan. No reload needed: the server recorded your payment (the entitlement) and the extension picked it up.

If anything is red, pnpm doctor names the broken link in the chain. Deeper verification (Firestore docs, webhook deliveries, emulator loop): Payments guide.

To sell a credit allowance with top-up packs instead, enable the credits model: same setup, plus metering.

Payments work end to end. Next: 4. Build your feature, then 5. Ship it when it’s ready for the Chrome Web Store.