How to Build a Checkout Flow with Lovable

1Create a checkout system schema in Supabase:
2
3Tables:
4- orders: id (uuid pk), user_id (uuid references auth.users nullable), stripe_session_id (text unique), stripe_payment_intent_id (text), status (text: pending|paid|failed|refunded), subtotal_cents (int), shipping_cents (int default 0), total_cents (int), currency (text default 'usd'), shipping_address (jsonb), customer_email (text), created_at, updated_at
5- order_items: id (uuid pk), order_id (uuid references orders), product_id (uuid references products), quantity (int), unit_price_cents (int), total_price_cents (int)
6
7RLS:
8- orders: authenticated users can SELECT their own orders (user_id = auth.uid()). Service role full access.
9- order_items: same as orders via join (use a policy that joins to orders table)
10
11Also create a CartContext in src/contexts/CartContext.tsx:
12- State: items array of { productId, quantity, name, price_cents, image_url }
13- Actions: addItem, removeItem, updateQuantity, clearCart
14- Persist cart to localStorage so it survives page refresh
15- Export a useCart hook

1Build a multi-step checkout page at src/pages/Checkout.tsx.
2
3Layout:
4- Two-column layout on desktop (checkout steps on left 60%, order summary on right 40%)
5- On mobile, summary collapses to an Accordion at the top
6
7Stepper at the top:
8- Three steps: 1. Cart Review, 2. Shipping, 3. Payment
9- Use shadcn/ui Progress bar and step indicators showing current step number
10- Previous step Button (disabled on step 1)
11
12Step 1 - Cart Review:
13- List all cart items from CartContext as rows: image, name, quantity Input (stepper), unit price, line total
14- Below the list: subtotal, estimated shipping (show 'Calculated in next step'), total
15- 'Continue to Shipping' Button, disabled if cart is empty
16
17Step 2 - Shipping:
18- react-hook-form + zod form with fields: firstName, lastName, email, address1, address2 (optional), city, state, postalCode, country (Select)
19- Persist form values to state so navigating back preserves them
20- 'Continue to Payment' Button triggers form validation before advancing
21
22Step 3 - Payment:
23- Show order summary: all items, shipping address, estimated total
24- A 'Proceed to Stripe Checkout' Button that calls the create-checkout-session Edge Function
25- Show a loading Spinner with 'Preparing secure checkout...' while waiting
26- On success, window.location.href = session.url to redirect to Stripe Checkout

1// supabase/functions/create-checkout-session/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8  'Content-Type': 'application/json',
9}
10
11serve(async (req: Request) => {
12  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
13
14  try {
15    const { cartItems, shippingAddress, customerEmail } = await req.json()
16    const stripeKey = Deno.env.get('STRIPE_SECRET_KEY') ?? ''
17    const appUrl = Deno.env.get('APP_URL') ?? ''
18
19    const supabase = createClient(Deno.env.get('SUPABASE_URL') ?? '', Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? '')
20
21    const productIds = cartItems.map((item: { productId: string }) => item.productId)
22    const { data: products, error } = await supabase
23      .from('products')
24      .select('id, name, price_cents, currency, stripe_price_id')
25      .in('id', productIds)
26      .eq('is_active', true)
27
28    if (error || !products?.length) {
29      return new Response(JSON.stringify({ error: 'Products not found' }), { status: 404, headers: corsHeaders })
30    }
31
32    const lineItems = cartItems.map((item: { productId: string; quantity: number }) => {
33      const product = products.find((p) => p.id === item.productId)
34      if (!product) throw new Error(`Product ${item.productId} not found`)
35      return {
36        price: product.stripe_price_id,
37        quantity: item.quantity,
38      }
39    })
40
41    const totalCents = products.reduce((sum: number, p) => {
42      const cartItem = cartItems.find((i: { productId: string }) => i.productId === p.id)
43      return sum + p.price_cents * (cartItem?.quantity ?? 1)
44    }, 0)
45
46    const { data: order } = await supabase.from('orders').insert({
47      status: 'pending',
48      subtotal_cents: totalCents,
49      total_cents: totalCents,
50      currency: 'usd',
51      shipping_address: shippingAddress,
52      customer_email: customerEmail,
53    }).select().single()
54
55    const params = new URLSearchParams()
56    params.append('mode', 'payment')
57    params.append('customer_email', customerEmail)
58    params.append('success_url', `${appUrl}/order-success?session_id={CHECKOUT_SESSION_ID}`)
59    params.append('cancel_url', `${appUrl}/checkout`)
60    params.append('metadata[orderId]', order.id)
61    lineItems.forEach((item: { price: string; quantity: number }, i: number) => {
62      params.append(`line_items[${i}][price]`, item.price)
63      params.append(`line_items[${i}][quantity]`, String(item.quantity))
64    })
65
66    const sessionRes = await fetch('https://api.stripe.com/v1/checkout/sessions', {
67      method: 'POST',
68      headers: {
69        Authorization: `Basic ${btoa(stripeKey + ':')}`,
70        'Content-Type': 'application/x-www-form-urlencoded',
71      },
72      body: params,
73    })
74    const session = await sessionRes.json()
75
76    await supabase.from('orders').update({ stripe_session_id: session.id }).eq('id', order.id)
77
78    return new Response(JSON.stringify({ url: session.url }), { headers: corsHeaders })
79  } catch (err) {
80    const message = err instanceof Error ? err.message : 'Internal error'
81    return new Response(JSON.stringify({ error: message }), { status: 500, headers: corsHeaders })
82  }
83})

1Create two things:
2
31. Supabase Edge Function at supabase/functions/checkout-webhook/index.ts:
4- Verify Stripe webhook signature using constructEventAsync with SubtleCryptoProvider
5- Handle checkout.session.completed event:
6  a. Extract session.metadata.orderId
7  b. Extract session.payment_intent (string)
8  c. Update orders: status='paid', stripe_payment_intent_id=payment_intent
9  d. Fetch line_items from Stripe: GET /v1/checkout/sessions/{id}/line_items
10  e. For each line item, insert into order_items with product_id (from price metadata), quantity, and price
11- Return 200 for all events including unhandled ones
12
132. Order success page at src/pages/OrderSuccess.tsx:
14- Read session_id from URL query params
15- Call a Supabase query to find the order by stripe_session_id
16- Show a loading Skeleton while the webhook may still be processing (poll every 2 seconds up to 10 seconds until status='paid')
17- Display: large green checkmark icon, 'Order Confirmed!', order ID, list of items, total paid, shipping address
18- Add 'View All Orders' Button linking to /orders and 'Continue Shopping' Button
19- Call clearCart() from CartContext after showing the confirmation