How to Build Donation system with V0

1// Paste this prompt into V0's AI chat:
2// Build a donation platform. Create a Supabase schema with:
3// 1. campaigns: id (uuid PK), title (text), description (text), goal_cents (int), raised_cents (int default 0), image_url (text), owner_id (uuid FK to auth.users), status (text default 'active'), end_date (timestamptz), created_at (timestamptz)
4// 2. donations: id (uuid PK), campaign_id (uuid FK to campaigns), donor_id (uuid FK to auth.users nullable), donor_name (text), donor_email (text), amount_cents (int), is_recurring (boolean default false), stripe_payment_intent_id (text), stripe_subscription_id (text), message (text), anonymous (boolean default false), created_at (timestamptz)
5// 3. recurring_donations: id (uuid PK), donor_id (uuid FK to auth.users), campaign_id (uuid FK to campaigns), stripe_subscription_id (text unique), amount_cents (int), interval (text default 'month'), status (text default 'active'), created_at (timestamptz)
6// Create a Supabase RPC function: increment_raised(campaign_id uuid, amount int) that does UPDATE campaigns SET raised_cents = raised_cents + amount WHERE id = campaign_id
7// Add RLS policies: anyone can read active campaigns, authenticated users can donate.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3import { Progress } from '@/components/ui/progress'
4import { Button } from '@/components/ui/button'
5import Link from 'next/link'
6
7export default async function CampaignsPage() {
8  const supabase = await createClient()
9
10  const { data: campaigns } = await supabase
11    .from('campaigns')
12    .select('*')
13    .eq('status', 'active')
14    .order('created_at', { ascending: false })
15
16  return (
17    <div className="container mx-auto py-8">
18      <h1 className="text-4xl font-bold mb-8">Support a cause</h1>
19      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
20        {campaigns?.map((campaign) => {
21          const percent = Math.min(
22            (campaign.raised_cents / campaign.goal_cents) * 100,
23            100
24          )
25          return (
26            <Link key={campaign.id} href={`/campaigns/${campaign.id}`}>
27              <Card className="hover:shadow-md transition-shadow">
28                {campaign.image_url && (
29                  <img
30                    src={campaign.image_url}
31                    alt={campaign.title}
32                    className="w-full h-48 object-cover rounded-t-lg"
33                  />
34                )}
35                <CardHeader>
36                  <CardTitle>{campaign.title}</CardTitle>
37                </CardHeader>
38                <CardContent>
39                  <Progress value={percent} className="mb-2" />
40                  <p className="text-sm text-muted-foreground">
41                    ${(campaign.raised_cents / 100).toLocaleString()} raised of $
42                    {(campaign.goal_cents / 100).toLocaleString()}
43                  </p>
44                </CardContent>
45              </Card>
46            </Link>
47          )
48        })}
49      </div>
50    </div>
51  )
52}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3
4const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
5
6export async function POST(req: NextRequest) {
7  const { campaignId, amountCents, isRecurring, donorName, donorEmail } =
8    await req.json()
9
10  if (!campaignId || !amountCents || amountCents < 100) {
11    return NextResponse.json(
12      { error: 'Invalid donation amount (minimum $1)' },
13      { status: 400 }
14    )
15  }
16
17  const sessionParams: Stripe.Checkout.SessionCreateParams = {
18    payment_method_types: ['card'],
19    customer_email: donorEmail,
20    metadata: { campaignId, donorName, isRecurring: String(isRecurring) },
21    success_url: `${req.nextUrl.origin}/donate/thank-you?session_id={CHECKOUT_SESSION_ID}`,
22    cancel_url: `${req.nextUrl.origin}/campaigns/${campaignId}`,
23  }
24
25  if (isRecurring) {
26    sessionParams.mode = 'subscription'
27    sessionParams.line_items = [
28      {
29        price_data: {
30          currency: 'usd',
31          unit_amount: amountCents,
32          recurring: { interval: 'month' },
33          product_data: { name: `Monthly donation` },
34        },
35        quantity: 1,
36      },
37    ]
38  } else {
39    sessionParams.mode = 'payment'
40    sessionParams.line_items = [
41      {
42        price_data: {
43          currency: 'usd',
44          unit_amount: amountCents,
45          product_data: { name: 'One-time donation' },
46        },
47        quantity: 1,
48      },
49    ]
50  }
51
52  const session = await stripe.checkout.sessions.create(sessionParams)
53
54  return NextResponse.json({ url: session.url })
55}

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.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const body = 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      body,
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 { campaignId, donorName, isRecurring } = session.metadata ?? {}
29    const amountCents = session.amount_total ?? 0
30
31    await supabase.from('donations').insert({
32      campaign_id: campaignId,
33      donor_name: donorName,
34      donor_email: session.customer_email,
35      amount_cents: amountCents,
36      is_recurring: isRecurring === 'true',
37      stripe_payment_intent_id: session.payment_intent as string,
38      stripe_subscription_id: session.subscription as string,
39    })
40
41    await supabase.rpc('increment_raised', {
42      campaign_id: campaignId,
43      amount: amountCents,
44    })
45  }
46
47  if (event.type === 'invoice.paid') {
48    const invoice = event.data.object as Stripe.Invoice
49    const subscription = await stripe.subscriptions.retrieve(
50      invoice.subscription as string
51    )
52    const campaignId = subscription.metadata.campaignId
53    const amountCents = invoice.amount_paid
54
55    if (campaignId) {
56      await supabase.from('donations').insert({
57        campaign_id: campaignId,
58        donor_email: invoice.customer_email,
59        amount_cents: amountCents,
60        is_recurring: true,
61        stripe_subscription_id: invoice.subscription as string,
62      })
63
64      await supabase.rpc('increment_raised', {
65        campaign_id: campaignId,
66        amount: amountCents,
67      })
68    }
69  }
70
71  return NextResponse.json({ received: true })
72}

1// Paste this prompt into V0's AI chat:
2// Build two components for the donation system:
3// 1. A 'use client' DonationForm component for the campaign detail page with:
4//    - RadioGroup with preset amounts: $10, $25, $50, $100
5//    - A "Custom" option that reveals an Input for entering a custom dollar amount
6//    - Switch toggle labeled "Make this monthly" for recurring donations
7//    - Textarea for an optional message to the campaign
8//    - Button labeled "Donate ${amount}" that POSTs to /api/donate and redirects to the returned Stripe Checkout URL
9//    - Show campaign Progress bar and current raised amount above the form
10//    - Use Card to wrap the entire form section
11// 2. A thank-you page at app/donate/thank-you/page.tsx that:
12//    - Reads session_id from searchParams and fetches session details from Stripe
13//    - Shows a success Card with the donation amount, campaign name, and a checkmark icon
14//    - Includes share Button components for Twitter, Facebook, and copy link
15//    - Links back to the campaign and to browse more campaigns