How to Set Up a Donation Platform Within a FlutterFlow App

Create a causes collection with fields: title (String), description (String), imageUrl (String), goalAmount (double), raisedAmount (double, default 0), isActive (bool). Create a donations collection with fields: userId (String), causeId (String), amount (double), frequency (String: once, monthly), paymentId (String, Stripe session or subscription ID), isRecurring (bool), isAnonymous (bool), displayName (String, donor name or 'Anonymous'), timestamp (Timestamp), status (String: completed, cancelled). Add 3-4 sample causes with different goal amounts. Set Stripe up with a one-time price and a recurring monthly price for donation processing.

Create a CausesPage. Query the causes collection where isActive equals true. Display each cause as a Card: imageUrl at the top, title and description below, a LinearPercentIndicator showing raisedAmount divided by goalAmount as a percentage, and Text showing the dollar amounts (e.g., '$12,450 raised of $25,000 goal'). Add a Donate Now button on each card that navigates to the DonatePage passing the causeId. Sort causes by raisedAmount ascending to promote causes that need more support.

Create a DonatePage with Route Parameter causeId. Display the cause title and image at the top. Add preset amount buttons as tappable Containers in a Row: $5, $10, $25, $50. When tapped, set Page State selectedAmount. Add a Custom Amount TextField for other values. Below, add a recurring monthly Switch toggle with label 'Make this a monthly donation'. Add an anonymous Switch toggle with label 'Donate anonymously'. Show a summary: amount, frequency, and cause name. Add a Donate button. On tap, call a Cloud Function that creates a Stripe Checkout Session with mode payment for one-time or mode subscription for recurring, passing the amount, causeId, userId, isAnonymous, and displayName as metadata.

Create a Cloud Function that handles Stripe webhook events. On checkout.session.completed for one-time payments: read the metadata (causeId, userId, amount, isAnonymous, displayName), create a donations document with status completed and frequency once, and atomically increment the cause raisedAmount by the donation amount using FieldValue.increment. On invoice.paid for recurring subscriptions: do the same for each monthly payment. On customer.subscription.deleted: find the donation document by paymentId and update its status to cancelled so the app no longer shows the user as an active monthly donor. Verify the Stripe webhook signature for security.

1// Cloud Function: handleDonationWebhook
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
5admin.initializeApp();
6
7exports.handleDonationWebhook = functions.https.onRequest(async (req, res) => {
8  const sig = req.headers['stripe-signature'];
9  let event;
10  try {
11    event = stripe.webhooks.constructEvent(
12      req.rawBody, sig, process.env.STRIPE_WEBHOOK_SECRET
13    );
14  } catch (err) {
15    return res.status(400).send(`Webhook Error: ${err.message}`);
16  }
17
18  if (event.type === 'checkout.session.completed') {
19    const session = event.data.object;
20    const { causeId, userId, isAnonymous, displayName } = session.metadata;
21    const amount = session.amount_total / 100;
22
23    await admin.firestore().collection('donations').add({
24      userId, causeId, amount,
25      frequency: session.mode === 'subscription' ? 'monthly' : 'once',
26      paymentId: session.id,
27      isRecurring: session.mode === 'subscription',
28      isAnonymous: isAnonymous === 'true',
29      displayName: isAnonymous === 'true' ? 'Anonymous' : displayName,
30      timestamp: admin.firestore.FieldValue.serverTimestamp(),
31      status: 'completed',
32    });
33
34    await admin.firestore().collection('causes').doc(causeId)
35      .update({ raisedAmount: admin.firestore.FieldValue.increment(amount) });
36  }
37
38  if (event.type === 'customer.subscription.deleted') {
39    const sub = event.data.object;
40    const donations = await admin.firestore().collection('donations')
41      .where('paymentId', '==', sub.id).get();
42    donations.docs.forEach(d => d.ref.update({ status: 'cancelled' }));
43  }
44
45  res.status(200).send('OK');
46});

On each cause detail page, add a Donor Wall section. Query donations for the causeId ordered by timestamp descending, limit 20. Display each donation as a Row: donor displayName (or 'Anonymous' if isAnonymous), amount, and a relative time label. Add a monthly badge icon for recurring donors. For tax receipts, create a Cloud Function triggered on new donation documents. The function generates a PDF using the pdf package with the organization name, donor name, amount, date, cause title, and a tax-exempt statement. Upload the PDF to Firebase Storage and email the download link to the donor using SendGrid or a Firebase Extension. Store the receipt URL on the donation document.