How to Build Shopping cart with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a shopping cart:
3// 1. products table: id (uuid PK), name (text), description (text), price_cents (int NOT NULL), image_url (text), stock (int DEFAULT 0), is_active (boolean DEFAULT true)
4// 2. carts table: id (uuid PK), user_id (uuid FK nullable), session_id (text), created_at (timestamptz), updated_at (timestamptz)
5// 3. cart_items table: id (uuid PK), cart_id (uuid FK), product_id (uuid FK), quantity (int DEFAULT 1), UNIQUE(cart_id, product_id)
6// 4. orders table: id (uuid PK), user_id (uuid FK), stripe_session_id (text), total_cents (int), status (text DEFAULT 'pending' — 'pending', 'paid', 'shipped', 'cancelled'), created_at (timestamptz)
7// Add RLS: public read on products, users see own carts and orders.
8// Seed 8 sample products with names, descriptions, prices, and placeholder image URLs.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardFooter } from '@/components/ui/card'
3import { Button } from '@/components/ui/button'
4import { Badge } from '@/components/ui/badge'
5import { addToCart } from '@/app/actions/cart'
6import Image from 'next/image'
7
8export default async function ProductsPage() {
9  const supabase = await createClient()
10  const { data: products } = await supabase
11    .from('products')
12    .select('*')
13    .eq('is_active', true)
14    .order('name')
15
16  return (
17    <div className="p-6">
18      <h1 className="text-3xl font-bold mb-6">Shop</h1>
19      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
20        {products?.map((product) => (
21          <Card key={product.id}>
22            <CardContent className="p-4">
23              <div className="aspect-square relative mb-3 rounded-lg overflow-hidden">
24                <Image
25                  src={product.image_url}
26                  alt={product.name}
27                  fill
28                  className="object-cover"
29                />
30              </div>
31              <h2 className="font-semibold">{product.name}</h2>
32              <p className="text-muted-foreground text-sm">{product.description}</p>
33              <p className="text-lg font-bold mt-2">
34                ${(product.price_cents / 100).toFixed(2)}
35              </p>
36              {product.stock < 5 && product.stock > 0 && (
37                <Badge variant="destructive" className="mt-1">Only {product.stock} left</Badge>
38              )}
39            </CardContent>
40            <CardFooter>
41              <form action={addToCart}>
42                <input type="hidden" name="productId" value={product.id} />
43                <Button type="submit" className="w-full" disabled={product.stock === 0}>
44                  {product.stock === 0 ? 'Out of Stock' : 'Add to Cart'}
45                </Button>
46              </form>
47            </CardFooter>
48          </Card>
49        ))}
50      </div>
51    </div>
52  )
53}

1'use server'
2
3import { cookies } from 'next/headers'
4import { createClient } from '@/lib/supabase/server'
5import { revalidatePath } from 'next/cache'
6
7async function getOrCreateCart() {
8  const supabase = await createClient()
9  const { data: { user } } = await supabase.auth.getUser()
10  const cookieStore = await cookies()
11  let sessionId = cookieStore.get('cart_session')?.value
12
13  if (user) {
14    const { data: cart } = await supabase
15      .from('carts')
16      .select('id')
17      .eq('user_id', user.id)
18      .single()
19    if (cart) return cart.id
20  }
21
22  if (sessionId) {
23    const { data: cart } = await supabase
24      .from('carts')
25      .select('id')
26      .eq('session_id', sessionId)
27      .single()
28    if (cart) return cart.id
29  }
30
31  sessionId = crypto.randomUUID()
32  cookieStore.set('cart_session', sessionId, { httpOnly: true, maxAge: 60 * 60 * 24 * 30 })
33
34  const { data: newCart } = await supabase
35    .from('carts')
36    .insert({ user_id: user?.id, session_id: sessionId })
37    .select('id')
38    .single()
39
40  return newCart!.id
41}
42
43export async function addToCart(formData: FormData) {
44  const productId = formData.get('productId') as string
45  const cartId = await getOrCreateCart()
46  const supabase = await createClient()
47
48  const { data: existing } = await supabase
49    .from('cart_items')
50    .select('id, quantity')
51    .eq('cart_id', cartId)
52    .eq('product_id', productId)
53    .single()
54
55  if (existing) {
56    await supabase
57      .from('cart_items')
58      .update({ quantity: existing.quantity + 1 })
59      .eq('id', existing.id)
60  } else {
61    await supabase
62      .from('cart_items')
63      .insert({ cart_id: cartId, product_id: productId, quantity: 1 })
64  }
65
66  revalidatePath('/')
67}
68
69export async function updateQuantity(itemId: string, quantity: number) {
70  const supabase = await createClient()
71  if (quantity <= 0) {
72    await supabase.from('cart_items').delete().eq('id', itemId)
73  } else {
74    await supabase.from('cart_items').update({ quantity }).eq('id', itemId)
75  }
76  revalidatePath('/cart')
77}
78
79export async function removeFromCart(itemId: string) {
80  const supabase = await createClient()
81  await supabase.from('cart_items').delete().eq('id', itemId)
82  revalidatePath('/cart')
83}

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(
7  process.env.NEXT_PUBLIC_SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const { cartId } = await req.json()
13
14  const { data: items } = await supabase
15    .from('cart_items')
16    .select('quantity, products(name, price_cents, image_url)')
17    .eq('cart_id', cartId)
18
19  if (!items || items.length === 0) {
20    return NextResponse.json({ error: 'Cart is empty' }, { status: 400 })
21  }
22
23  const lineItems = items.map((item: any) => ({
24    price_data: {
25      currency: 'usd',
26      product_data: {
27        name: item.products.name,
28        images: item.products.image_url ? [item.products.image_url] : [],
29      },
30      unit_amount: item.products.price_cents,
31    },
32    quantity: item.quantity,
33  }))
34
35  const session = await stripe.checkout.sessions.create({
36    payment_method_types: ['card'],
37    line_items: lineItems,
38    mode: 'payment',
39    success_url: `${req.nextUrl.origin}/order/success?session_id={CHECKOUT_SESSION_ID}`,
40    cancel_url: `${req.nextUrl.origin}/cart`,
41    metadata: { cart_id: cartId },
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(
7  process.env.NEXT_PUBLIC_SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const rawBody = await req.text()
13  const sig = req.headers.get('stripe-signature')!
14
15  let event: Stripe.Event
16  try {
17    event = stripe.webhooks.constructEvent(
18      rawBody,
19      sig,
20      process.env.STRIPE_WEBHOOK_SECRET!
21    )
22  } catch {
23    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
24  }
25
26  if (event.type === 'checkout.session.completed') {
27    const session = event.data.object as Stripe.Checkout.Session
28    const cartId = session.metadata?.cart_id
29
30    const { data: cartItems } = await supabase
31      .from('cart_items')
32      .select('product_id, quantity')
33      .eq('cart_id', cartId)
34
35    await supabase.from('orders').insert({
36      stripe_session_id: session.id,
37      total_cents: session.amount_total,
38      status: 'paid',
39    })
40
41    for (const item of cartItems ?? []) {
42      await supabase.rpc('decrement_stock', {
43        p_product_id: item.product_id,
44        p_quantity: item.quantity,
45      })
46    }
47
48    await supabase.from('cart_items').delete().eq('cart_id', cartId)
49  }
50
51  return NextResponse.json({ received: true })
52}