How to Build Checkout flow with V0

1// Paste this prompt into V0's AI chat:
2// Build an e-commerce checkout with Supabase and Stripe. Create these tables:
3// 1. products: id (uuid PK), name (text), description (text), price (numeric), images (text[]), stock (int), is_active (boolean default true)
4// 2. orders: id (uuid PK), user_id (uuid FK), status (text CHECK in 'pending','paid','shipped','delivered','cancelled'), subtotal (numeric), discount (numeric default 0), tax (numeric), total (numeric), shipping_address (jsonb), stripe_checkout_session_id (text unique), created_at (timestamptz)
5// 3. order_items: id (uuid PK), order_id (uuid FK), product_id (uuid FK), quantity (int), unit_price (numeric)
6// 4. coupons: id (uuid PK), code (text unique), discount_type (text CHECK in 'percentage','fixed'), discount_value (numeric), min_order (numeric), max_uses (int), used_count (int default 0), expires_at (timestamptz)
7// Add RLS so users can only see their own orders.

1// Paste this prompt into V0's AI chat:
2// Build a multi-step checkout at app/checkout/page.tsx ('use client').
3// Requirements:
4// - Step 1 (Cart Review): Show cart items in Cards with image, name, quantity selector, unit price, line total. Remove Button. Subtotal at bottom.
5// - Step 2 (Shipping): Form with Input fields for name, address line 1, address line 2, city, state, zip, country. Use react-hook-form + zod validation.
6// - Step 3 (Review & Pay): Order summary showing items, shipping address, subtotal, coupon discount, tax, total. Input for coupon code with Apply Button. "Pay with Stripe" Button.
7// - Stepper pattern: horizontal steps indicator showing current step (1, 2, 3) with Progress bar
8// - Continue and Back Buttons for navigation between steps
9// - Store cart state in React state (loaded from props or context)
10// - On "Pay with Stripe", POST to /api/checkout with cart items, shipping address, and coupon code
11// - Use shadcn/ui Card, Input, Button, Separator, Badge, Select for quantity

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)
7
8export async function POST(req: NextRequest) {
9  const { items, shippingAddress, couponCode, userId } = await req.json()
10
11  // Reserve stock atomically
12  for (const item of items) {
13    const { error } = await supabase.rpc('reserve_stock', {
14      p_product_id: item.productId,
15      p_quantity: item.quantity,
16    })
17    if (error) {
18      return NextResponse.json({ error: `${item.name} is out of stock` }, { status: 409 })
19    }
20  }
21
22  const lineItems = items.map((item: { name: string; price: number; quantity: number }) => ({
23    price_data: {
24      currency: 'usd',
25      product_data: { name: item.name },
26      unit_amount: Math.round(item.price * 100),
27    },
28    quantity: item.quantity,
29  }))
30
31  const session = await stripe.checkout.sessions.create({
32    mode: 'payment',
33    line_items: lineItems,
34    success_url: `${req.nextUrl.origin}/orders/confirmation?session_id={CHECKOUT_SESSION_ID}`,
35    cancel_url: `${req.nextUrl.origin}/checkout`,
36    metadata: {
37      user_id: userId,
38      shipping_address: JSON.stringify(shippingAddress),
39      items: JSON.stringify(items),
40      coupon_code: couponCode || '',
41    },
42  })
43
44  return NextResponse.json({ url: session.url })
45}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)
7
8export async function POST(req: NextRequest) {
9  const body = await req.text()
10  const sig = req.headers.get('stripe-signature')!
11
12  let event: Stripe.Event
13  try {
14    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!)
15  } catch {
16    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
17  }
18
19  if (event.type === 'checkout.session.completed') {
20    const session = event.data.object as Stripe.Checkout.Session
21    const meta = session.metadata!
22    const items = JSON.parse(meta.items)
23    const total = (session.amount_total ?? 0) / 100
24
25    const { data: order } = await supabase.from('orders').insert({
26      user_id: meta.user_id,
27      status: 'paid',
28      subtotal: total,
29      tax: 0,
30      total,
31      shipping_address: JSON.parse(meta.shipping_address),
32      stripe_checkout_session_id: session.id,
33    }).select().single()
34
35    if (order) {
36      await supabase.from('order_items').insert(
37        items.map((item: { productId: string; quantity: number; price: number }) => ({
38          order_id: order.id,
39          product_id: item.productId,
40          quantity: item.quantity,
41          unit_price: item.price,
42        }))
43      )
44    }
45  }
46
47  return NextResponse.json({ received: true })
48}

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export async function validateCoupon(code: string, subtotal: number) {
11  const { data: coupon } = await supabase
12    .from('coupons')
13    .select('*')
14    .eq('code', code.toUpperCase())
15    .single()
16
17  if (!coupon) return { valid: false, error: 'Coupon not found' }
18  if (coupon.expires_at && new Date(coupon.expires_at) < new Date())
19    return { valid: false, error: 'Coupon expired' }
20  if (coupon.max_uses && coupon.used_count >= coupon.max_uses)
21    return { valid: false, error: 'Coupon usage limit reached' }
22  if (coupon.min_order && subtotal < coupon.min_order)
23    return { valid: false, error: `Minimum order $${coupon.min_order}` }
24
25  const discount = coupon.discount_type === 'percentage'
26    ? subtotal * (coupon.discount_value / 100)
27    : coupon.discount_value
28
29  return { valid: true, discount: Math.min(discount, subtotal), coupon }
30}