How to Build a Digital Downloads with Lovable

1Create a digital downloads schema in Supabase:
2
3Tables:
4- digital_products: id (uuid pk), name (text), description (text), price_cents (int), currency (text default 'usd'), stripe_price_id (text), file_path (text, the storage path), file_size_bytes (bigint), file_type (text: pdf|zip|mp3|mp4|epub|other), preview_image_url (text nullable), download_limit (int nullable, null=unlimited), is_active (bool default true), created_at
5- purchases: id (uuid pk), user_id (uuid references auth.users nullable), customer_email (text), product_id (uuid references digital_products), stripe_session_id (text unique), stripe_payment_intent_id (text), amount_paid_cents (int), currency (text), status (text default 'pending'), download_count (int default 0), created_at
6- download_events: id (uuid pk), purchase_id (uuid references purchases), user_id (uuid references auth.users nullable), ip_address (text nullable), user_agent (text nullable), signed_url_expires_at (timestamptz), created_at
7
8RLS:
9- digital_products: public SELECT for is_active=true
10- purchases: users can SELECT their own (by user_id OR by email match). Service role full access.
11- download_events: service role only (no user reads needed for security)
12
13Storage bucket setup:
14- Create a private bucket named 'digital-downloads'
15- No public policies — access only via signed URLs from Edge Functions
16- Files organized as: {product_id}/{filename}

1Build a digital products catalog page at src/pages/Store.tsx.
2
3Requirements:
4- Fetch all is_active digital_products from Supabase
5- Display each as a shadcn/ui Card:
6  - Preview image (or a file type icon if no image)
7  - Product name (font-semibold)
8  - Description (text-muted-foreground, truncated at 100 chars)
9  - File type Badge (PDF=blue, ZIP=yellow, MP3=green, MP4=purple, EPUB=orange)
10  - File size formatted (e.g., '2.4 MB')
11  - Price formatted as currency
12  - 'Buy Now' Button (full width, primary variant)
13- Clicking Buy Now:
14  1. If user is not authenticated, prompt them to sign in with a Dialog
15  2. Call the create-download-checkout Edge Function with productId
16  3. Show a loading Spinner on the button: 'Preparing checkout...'
17  4. Redirect to session.url on success
18
19Also build a product detail page at src/pages/ProductDetail.tsx:
20- Full description, all product details
21- A 'Table of Contents' or 'What's included' section if the product has a contents JSONB column
22- Sample preview section (if preview_url is set, show an embedded viewer)
23- Buy Now button with the same flow

1Create two Supabase Edge Functions:
2
31. supabase/functions/create-download-checkout/index.ts
4- Accept: { productId: string }
5- Fetch product from Supabase to get price_cents and stripe_price_id
6- Create Stripe Checkout Session:
7  - mode: 'payment'
8  - line_items: [{ price: stripe_price_id, quantity: 1 }]
9  - success_url: ${APP_URL}/downloads?session_id={CHECKOUT_SESSION_ID}
10  - cancel_url: ${APP_URL}/store
11  - customer_email from the authenticated user's JWT (parse from Authorization header)
12  - metadata: { productId, userId }
13- Insert a pending purchase row in Supabase
14- Return: { url: session.url }
15
162. supabase/functions/download-webhook/index.ts
17- Verify Stripe signature using constructEventAsync
18- Handle checkout.session.completed:
19  - Extract metadata.productId and metadata.userId
20  - Update purchase row: status='completed', stripe_payment_intent_id
21  - Return 200
22- Return 200 for all unhandled events

1// supabase/functions/generate-download-url/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
11const EXPIRY_SECONDS = 3600 // 1 hour
12
13serve(async (req: Request) => {
14  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
15
16  const authHeader = req.headers.get('Authorization') ?? ''
17  const userClient = createClient(Deno.env.get('SUPABASE_URL') ?? '', Deno.env.get('SUPABASE_ANON_KEY') ?? '', {
18    global: { headers: { Authorization: authHeader } },
19  })
20  const { data: { user } } = await userClient.auth.getUser()
21  if (!user) return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: corsHeaders })
22
23  const { purchaseId } = await req.json()
24  const supabase = createClient(Deno.env.get('SUPABASE_URL') ?? '', Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? '')
25
26  const { data: purchase } = await supabase
27    .from('purchases')
28    .select('id, user_id, customer_email, status, download_count, product_id, digital_products(file_path, download_limit, name)')
29    .eq('id', purchaseId)
30    .single()
31
32  if (!purchase) return new Response(JSON.stringify({ error: 'Purchase not found' }), { status: 404, headers: corsHeaders })
33  if (purchase.status !== 'completed') return new Response(JSON.stringify({ error: 'Payment not completed' }), { status: 403, headers: corsHeaders })
34  if (purchase.user_id && purchase.user_id !== user.id) return new Response(JSON.stringify({ error: 'Access denied' }), { status: 403, headers: corsHeaders })
35
36  const product = purchase.digital_products as { file_path: string; download_limit: number | null; name: string }
37  if (product.download_limit !== null && purchase.download_count >= product.download_limit) {
38    return new Response(JSON.stringify({ error: 'Download limit reached' }), { status: 403, headers: corsHeaders })
39  }
40
41  const { data: signedData, error: signError } = await supabase.storage
42    .from('digital-downloads')
43    .createSignedUrl(product.file_path, EXPIRY_SECONDS)
44
45  if (signError || !signedData?.signedUrl) {
46    return new Response(JSON.stringify({ error: 'Failed to generate download link' }), { status: 500, headers: corsHeaders })
47  }
48
49  await supabase.from('purchases').update({ download_count: purchase.download_count + 1 }).eq('id', purchaseId)
50  await supabase.from('download_events').insert({
51    purchase_id: purchaseId,
52    user_id: user.id,
53    ip_address: req.headers.get('x-forwarded-for'),
54    user_agent: req.headers.get('user-agent'),
55    signed_url_expires_at: new Date(Date.now() + EXPIRY_SECONDS * 1000).toISOString(),
56  })
57
58  return new Response(JSON.stringify({ url: signedData.signedUrl, expiresIn: EXPIRY_SECONDS }), { headers: corsHeaders })
59})

1Build a downloads page at src/pages/MyDownloads.tsx. Require authentication.
2
3Requirements:
4- Fetch all completed purchases for the current user joined with digital_products
5- Display as a grid of Cards, each showing:
6  - Product name, file type Badge, file size
7  - Purchase date formatted as 'Purchased on March 15, 2026'
8  - Download count and limit: 'Downloaded 2 of 5 times' (or 'Downloaded 2 times' if no limit)
9  - A 'Download' Button that calls the generate-download-url Edge Function
10  - Loading Spinner on the button while the signed URL is being generated
11  - On success: window.open(url, '_blank') to trigger the download
12  - If download limit is reached: show a disabled Button with text 'Download limit reached'
13- Empty state if no purchases: 'No purchases yet' with a 'Browse Store' Button
14- Add a Tabs component at the top: 'All Downloads' and 'Recent (30 days)'
15- Show a Toast notification: 'Download link ready — the link expires in 60 minutes'