Stripe Payments
Accept one-time payments, subscriptions, and manage billing with Stripe - the industry-standard payment platform.
💳 What Stripe Provides
Checkout sessions for products, donations, or services
Recurring billing with multiple tiers and trial periods
Self-service billing management for your customers
Real-time events for payment success, failures, and cancellations
🛠️ Setup Guide
Create a Stripe Account
Go to stripe.com and create an account. Start in test mode to develop without real charges.
sk_test_ and pk_test_Add Environment Variables
Add these variables in your Spawned project settings:
Create Products in Stripe Dashboard
For subscriptions, create products and prices in the Stripe dashboard. Copy the price IDs to use in your code.
💵 Payment Types
One-Time Payments
Best for: Products, digital goods, donations
// Create checkout session
const session = await stripe.checkout.sessions.create({
mode: 'payment',
line_items: [{
price_data: {
currency: 'usd',
product_data: { name: 'Product' },
unit_amount: 2999, // $29.99
},
quantity: 1,
}],
success_url: `${url}/success`,
cancel_url: `${url}/cancel`,
})Subscriptions
Best for: SaaS, memberships, recurring services
// Create subscription checkout
const session = await stripe.checkout.sessions.create({
mode: 'subscription',
line_items: [{
price: process.env.STRIPE_PRICE_ID,
quantity: 1,
}],
success_url: `${url}/success`,
cancel_url: `${url}/pricing`,
customer_email: user.email,
})📋 Building a Pricing Page
A typical SaaS pricing page with 3 tiers. Each button creates a Stripe checkout session:
🔔 Handling Webhooks
Webhooks let you respond to payment events in real-time:
// app/api/webhooks/stripe/route.ts
import { stripe } from '@/lib/stripe'
import { headers } from 'next/headers'
export async function POST(req: Request) {
const body = await req.text()
const sig = headers().get('stripe-signature')!
const event = stripe.webhooks.constructEvent(
body, sig, process.env.STRIPE_WEBHOOK_SECRET!
)
switch (event.type) {
case 'checkout.session.completed':
// Grant access to user
break
case 'customer.subscription.deleted':
// Revoke access
break
}
return Response.json({ received: true })
}💬 Example Prompts
- "Create a beautiful pricing page with 3 tiers: Free, Pro ($29/mo), and Enterprise ($99/mo). Add Stripe checkout buttons."
- "Add a pricing toggle to switch between monthly and annual pricing with 20% discount for annual."
- "Add Stripe checkout for a $49 one-time purchase. Show success page after payment."
- "Create a donation page with preset amounts ($5, $10, $25, custom) using Stripe checkout."
- "Add a customer portal link in the settings page so users can manage their subscription."
- "Show current plan status and usage in the dashboard. Add upgrade button."
🧪 Test Cards
Use these test card numbers in Stripe test mode:
Use any future expiry date (e.g., 12/34) and any CVC (e.g., 123)