How to Build a Donation System with Replit

1// Prompt to type into Replit Agent:
2// Build a donation system with Express and PostgreSQL using Drizzle ORM.
3// Create these tables in shared/schema.ts:
4// - campaigns: id serial pk, creator_id text, title text, description text,
5//   goal_amount integer (cents), current_amount integer default 0,
6//   image_url text, status text default 'active' (draft/active/completed/cancelled),
7//   end_date timestamp, created_at timestamp
8// - donors: id serial pk, user_id text nullable, email text not null,
9//   name text, is_anonymous boolean default false,
10//   stripe_customer_id text, total_donated integer default 0, created_at timestamp
11// - donations: id serial pk, campaign_id integer references campaigns,
12//   donor_id integer references donors, amount integer (cents),
13//   is_recurring boolean default false,
14//   stripe_payment_intent_id text, stripe_subscription_id text,
15//   message text, status text default 'pending' (pending/completed/failed/refunded),
16//   created_at timestamp
17// - recurring_donations: id serial pk, donor_id integer references donors,
18//   campaign_id integer references campaigns, amount integer,
19//   stripe_subscription_id text unique, interval text default 'monthly',
20//   status text default 'active' (active/cancelled/past_due), created_at timestamp
21// - webhook_events: id serial pk, stripe_event_id text unique, event_type text, processed_at timestamp
22// Then type /stripe to set up Stripe integration.

1const Stripe = require('stripe');
2const stripe = Stripe(process.env.STRIPE_SECRET_KEY);
3const { db } = require('../db');
4const { campaigns, donors, donations } = require('../../shared/schema');
5const { eq } = require('drizzle-orm');
6
7router.post('/api/donate', async (req, res) => {
8  const { campaignId, amount, isRecurring, message, name, email, isAnonymous } = req.body;
9
10  if (!amount || amount < 100) return res.status(400).json({ error: 'Minimum donation is $1.00' });
11
12  const [campaign] = await db.select().from(campaigns).where(eq(campaigns.id, Number(campaignId)));
13  if (!campaign || campaign.status !== 'active') {
14    return res.status(404).json({ error: 'Campaign not found or inactive' });
15  }
16
17  // Find or create donor record
18  let [donor] = await db.select().from(donors).where(eq(donors.email, email));
19  if (!donor) {
20    [donor] = await db.insert(donors).values({ email, name, isAnonymous, userId: req.user?.id }).returning();
21  }
22
23  const mode = isRecurring ? 'subscription' : 'payment';
24  const lineItems = [{
25    price_data: {
26      currency: 'usd',
27      product_data: { name: campaign.title, description: message || undefined },
28      unit_amount: Number(amount),
29      ...(isRecurring ? { recurring: { interval: 'month' } } : {})
30    },
31    quantity: 1
32  }];
33
34  const session = await stripe.checkout.sessions.create({
35    mode,
36    line_items: lineItems,
37    customer_email: email,
38    metadata: { campaignId: String(campaign.id), donorId: String(donor.id), message: message || '' },
39    success_url: `${process.env.APP_URL}/campaigns/${campaign.id}?donated=true`,
40    cancel_url: `${process.env.APP_URL}/campaigns/${campaign.id}`
41  });
42
43  res.json({ url: session.url });
44});

1// IMPORTANT: This route must use express.raw() BEFORE express.json()
2// Add this BEFORE app.use(express.json()) in server/index.js:
3// app.use('/api/webhooks/stripe', express.raw({ type: 'application/json' }));
4
5router.post('/api/webhooks/stripe', async (req, res) => {
6  const sig = req.headers['stripe-signature'];
7  let event;
8
9  try {
10    // Use constructEvent (SYNC) — not constructEventAsync
11    event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_WEBHOOK_SECRET);
12  } catch (err) {
13    console.error('Webhook signature failed:', err.message);
14    return res.status(400).json({ error: 'Webhook signature verification failed' });
15  }
16
17  // Idempotency check — skip if already processed
18  const existing = await db.select().from(webhookEvents)
19    .where(eq(webhookEvents.stripeEventId, event.id));
20  if (existing.length > 0) return res.json({ received: true, status: 'duplicate' });
21
22  // Log the event first
23  await db.insert(webhookEvents).values({ stripeEventId: event.id, eventType: event.type });
24
25  if (event.type === 'checkout.session.completed') {
26    const session = event.data.object;
27    const { campaignId, donorId, message } = session.metadata;
28    const amount = session.amount_total;
29
30    // Insert donation record
31    await db.insert(donations).values({
32      campaignId: Number(campaignId),
33      donorId: Number(donorId),
34      amount,
35      isRecurring: session.mode === 'subscription',
36      stripePaymentIntentId: session.payment_intent,
37      stripeSubscriptionId: session.subscription,
38      message,
39      status: 'completed'
40    });
41
42    // Atomically increment campaign total
43    await db.execute(
44      require('drizzle-orm').sql`UPDATE campaigns SET current_amount = current_amount + ${amount} WHERE id = ${Number(campaignId)}`
45    );
46
47    // Update donor total
48    await db.execute(
49      require('drizzle-orm').sql`UPDATE donors SET total_donated = total_donated + ${amount} WHERE id = ${Number(donorId)}`
50    );
51  }
52
53  if (event.type === 'invoice.paid') {
54    const invoice = event.data.object;
55    if (invoice.subscription) {
56      const sub = await stripe.subscriptions.retrieve(invoice.subscription);
57      const { campaignId, donorId } = sub.metadata;
58      if (campaignId && donorId) {
59        const amount = invoice.amount_paid;
60        await db.insert(donations).values({
61          campaignId: Number(campaignId), donorId: Number(donorId), amount,
62          isRecurring: true, stripeSubscriptionId: invoice.subscription, status: 'completed'
63        });
64        await db.execute(
65          require('drizzle-orm').sql`UPDATE campaigns SET current_amount = current_amount + ${amount} WHERE id = ${Number(campaignId)}`
66        );
67      }
68    }
69  }
70
71  res.json({ received: true });
72});

1// Prompt to type into Replit Agent:
2// Build these React components:
3//
4// 1. CampaignPage at client/src/pages/CampaignPage.jsx:
5//    - Fetch GET /api/campaigns/:id on load
6//    - Show: title, description, image, creator name
7//    - Progress section:
8//      * Current amount in dollars (current_amount / 100)
9//      * Goal amount in dollars
10//      * Progress bar: width = (current_amount / goal_amount * 100)%
11//      * Donor count from GET /api/campaigns/:id/donors?count=true
12//    - Donate section:
13//      * Preset amount buttons: $10, $25, $50, $100, Other
14//      * Custom amount input (shown when 'Other' selected)
15//      * Monthly/One-time toggle
16//      * Name input, Email input
17//      * Anonymous checkbox
18//      * Message textarea (optional)
19//      * Donate button → POST /api/donate → redirect to session.url
20//
21// 2. DonorWall component:
22//    - Fetch GET /api/campaigns/:id/donors (shows approved completed donations)
23//    - Show last 20 donors in a scrollable list
24//    - Each donor: avatar initials circle, name (or 'Anonymous'), amount, message, time ago
25//    - 'Be the first to donate' empty state
26//
27// Add route: GET /api/campaigns/:id/donors
28//   Join donations + donors WHERE campaign_id=:id AND status='completed'
29//   Return is_anonymous ? {name: 'Anonymous', ...} : actual donor info
30//   Order by created_at DESC, limit 20

1// Step-by-step deployment checklist:
2//
3// 1. Open Replit Secrets (lock icon in sidebar) and verify these exist:
4//    - STRIPE_SECRET_KEY (set by /stripe command)
5//    - STRIPE_PUBLISHABLE_KEY (set by /stripe command)
6//    - APP_URL — your Replit deployment URL (add this after first deploy)
7//    - SESSION_SECRET — any 32-character random string
8//
9// 2. Deploy to Autoscale: click Deploy → Autoscale in the top-right menu
10//    Your app URL will be: https://your-repl-name.your-username.repl.co
11//
12// 3. Go to Stripe Dashboard → Developers → Webhooks → Add endpoint
13//    Endpoint URL: https://your-deployment-url.repl.co/api/webhooks/stripe
14//    Events: checkout.session.completed, invoice.paid
15//    Click Add endpoint
16//
17// 4. Copy the Signing secret shown on the webhook details page
18//    Add it to Replit Secrets as: STRIPE_WEBHOOK_SECRET
19//
20// 5. Test: visit your deployment URL, go to a campaign, donate $1 with test card
21//    4242 4242 4242 4242, any future expiry, any CVC
22//    Check Stripe Dashboard → Webhooks to see the event delivered successfully