The Mental Model
Your app is the club.
Some areas are open to everyone—the lobby. Some areas require a wristband—the VIP section. The gatekeeper checks the wristband. That's it. That's monetization.
Everyone walks in. Core features, onboarding, the hook.
A single check: do you have a wristband? Yes or no.
Advanced features, higher limits, priority treatment.
Your first dollar. The proof that your app has real value.
export function gatekeeper(req) {
const user = await getUser(req);
// The entire paywall:
if (!user.isPro) {
return redirect('/pricing');
}
// Welcome to VIP
return next();
}
What to Gate
Always Free
Users need to love your app before they pay. The free tier is the hook. Make it genuinely useful.
Premium
Premium features are the “more”—more power, more convenience, more everything. Gate the extras, not the essentials.
The Stripe Flow
From “Upgrade” button to money in your account. Six steps. Stripe handles the hard parts.
User clicks “Upgrade”
Your pricing page
Create Checkout Session
Your API route calls Stripe
Payment processed
Stripe handles everything
Webhook fires
Stripe pings your endpoint
DB updates user
isPro = true
Premium unlocked
User sees VIP content
You only build steps 1, 2, 4, 5, and 6. Stripe owns step 3—the scary part.
The Database Flag
Monetization is simpler than you think.
At its core, the entire paywall is one boolean on a user record. Everything else is just checking that boolean.
model User {
id String @id
email String @unique
name String
isPro Boolean @default(false)
}
export async function
requirePro(userId) {
const user =
await db.user
.findUnique({userId});
if (!user.isPro)
throw PaywallError;
}
{user.isPro ? (
<ProDashboard />
) : (
<FreeDashboard>
<UpgradePrompt />
</FreeDashboard>
)}
Common Patterns
✗ Monetization Traps
"Gate everything from day one"
Users leave before they even understand the value. Let them fall in love first.
"Charge before delivering value"
Nobody pays for a promise. Prove the product works, then ask for money.
"Offer 5 pricing tiers"
Complexity kills conversion. Choice overload is real. Keep it simple.
"No free tier at all"
The free tier is your marketing. It's how people discover and trust your app.
✓ The Clean Gate
Free tier that hooks
Make the free version genuinely good. Users should think “I want more of this.”
One premium tier to start
Free and Pro. That's it. You can add Enterprise later when you have enterprise customers.
Gate features, not content
Premium unlocks capabilities (AI, exports, limits). Don't lock content behind a wall.
Let Stripe handle billing
Don't build a billing system. Use Stripe Checkout, Stripe Portal, Stripe Webhooks. Done.
The Exercises
Earn your first dollar.
The Pricing Page
Design
- →Design a Free vs Pro pricing page
- →Use Tailwind for layout and styling
- →Include feature comparison and CTA buttons
The Gate Check
Logic
- →Add an isPro flag to your user model
- →Create a gate-check helper function
- →Conditionally render premium content
The First Dollar
Stripe
- →Set up Stripe in test mode
- →Create a Checkout Session via API route
- →Process a $1 test payment end-to-end
📋 Quick Reference
The Gate
if (!user.isPro) redirect('/pricing')The Flow
Button →Stripe → Webhook → isPro = true