ContentForger ships apps with Stripe scaffolding already in place. But you still need to wire up your actual Stripe account. Here is how to do it the first time without wasting an afternoon.
What you need before starting
- A ContentForger-generated project with Stripe scaffolding (Pro or Agency tier output).
- A Stripe account, even an empty one.
- Twenty minutes.
Step one: Stripe dashboard setup
Log into dashboard.stripe.com. Stay in test mode for now. You can flip to live mode after everything works.
Navigate to Products. Create your products with prices. For a simple Pro tier:
- Name: Pro Plan
- Recurring, monthly, amount of your choice.
- Save, then copy the Price ID. It looks like price_1AbcDEfghIJkl.
Repeat for any other tiers.
Step two: get your API keys
In the Stripe dashboard, click Developers in the left sidebar, then API keys.
Copy:
- Publishable key starts with pk_test_
- Secret key starts with sk_test_
Step three: add keys to your ContentForger project
Open .env.local in your ContentForger project. Add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_key
STRIPE_SECRET_KEY=sk_test_your_key
STRIPE_PRO_PRICE_ID=price_1AbcDEfghIJklSave.
Step four: set up the webhook endpoint
The webhook is how Stripe tells your app when a payment succeeds.
In the Stripe dashboard, go to Developers then Webhooks. Click Add endpoint.
Endpoint URL: for local testing, use the Stripe CLI. For production, use https://your-domain.com/api/webhooks/stripe
Events to listen to: check these four.
- checkout.session.completed
- customer.subscription.updated
- customer.subscription.deleted
- invoice.payment_failed
Save. Copy the signing secret. Looks like whsec_abc123.
Add to .env.local:
STRIPE_WEBHOOK_SECRET=whsec_abc123Step five: test locally with Stripe CLI
Install Stripe CLI from stripe.com/docs/stripe-cli. Run:
stripe login
stripe listen --forward-to localhost:3000/api/webhooks/stripeThis pipes Stripe's webhook events to your local dev server. Keep this terminal open.
Step six: make a test purchase
In a second terminal, run your app:
pnpm run devOpen the browser. Navigate to your pricing page. Click the Pro tier checkout button. Stripe test mode presents a checkout page.
Use test card: 4242 4242 4242 4242. Any future expiry, any CVC, any ZIP.
Complete checkout. Watch the terminal with stripe listen. You should see the checkout.session.completed event fire. Your app should mark the user as Pro.
If it does not, open your browser console and your server logs. The usual issues:
- Missing env variable.
- Webhook secret mismatch.
- Price ID typo.
Step seven: verify the upgrade
Log in as the test user. Navigate to the dashboard. Confirm the Pro features are accessible.
If yes, you have a working Stripe integration.
Going live
When ready:
- In Stripe dashboard, switch to Live mode.
- Create your products again in live mode (they are separate from test mode).
- Generate new live API keys.
- Create a new webhook endpoint pointing to your production URL.
- Replace keys in production environment (Cloudflare Pages, Netlify, wherever you host).
- Test with a real card for a cheap product first, then refund.
The test mode to live mode switch is the most common place for mistakes. Keys are different, products are different, webhooks are different. Go slowly the first time.
Common issues
Webhook fires but user is not upgraded: check the webhook handler route for errors. Usually a Supabase connection issue or missing service role key.
Checkout page does not load: usually the Price ID is wrong or Stripe public key is missing.
User is upgraded but cannot access Pro features: auth middleware is reading the wrong user attribute. Check what your middleware is comparing against.
Each of these takes five minutes to debug once you know where to look. Check the server logs first, the webhook events second, the database state third.
That is the whole flow. One Stripe account, five env variables, one webhook, one test purchase. Twenty minutes, not a weekend.
