How to Monitor Your FlutterFlow App's Payments

Log in to dashboard.stripe.com. The Home tab shows your key metrics: gross volume, net volume, successful payment rate, and dispute rate. Navigate to Payments > Reports to access Revenue, Payouts, and Reconciliation reports. Enable email alerts by going to Settings > Email Notifications and enabling: failed payments, disputes, refunds, and successful payouts. Set a spend threshold alert at Settings > Billing Alerts so you know when you hit monthly revenue milestones. Bookmark the Stripe Radar dashboard (Radar > Overview) if you're in a fraud-prone category — it shows suspicious activity patterns.

In FlutterFlow, open your Firestore schema and create an 'orders' collection with these fields: userId (String), productId (String), amount (double), currency (String), status (String — values: pending, paid, failed, refunded), stripePaymentIntentId (String), stripeSessionId (String), createdAt (Timestamp), paidAt (Timestamp, nullable). This schema lets you display order history to users and track payment status without exposing Stripe details. The stripePaymentIntentId and stripeSessionId fields let you look up the corresponding Stripe event for any order, which is essential for debugging payment disputes.

In Firebase Console, go to Functions and create a new Cloud Function. This function receives Stripe webhook events and writes order records to Firestore. Register the webhook endpoint URL in Stripe at Dashboard > Developers > Webhooks. Listen for these events: checkout.session.completed (creates the order document), payment_intent.payment_failed (updates status to failed), charge.refunded (updates status to refunded). Always verify the Stripe webhook signature using the webhook secret — this prevents attackers from faking payment success events.

1const functions = require('firebase-functions');
2const admin = require('firebase-admin');
3const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
4
5exports.stripeWebhook = functions.https.onRequest(async (req, res) => {
6  const sig = req.headers['stripe-signature'];
7  let event;
8  try {
9    event = stripe.webhooks.constructEvent(
10      req.rawBody,
11      sig,
12      process.env.STRIPE_WEBHOOK_SECRET
13    );
14  } catch (err) {
15    console.error('Webhook signature verification failed:', err.message);
16    return res.status(400).send(`Webhook Error: ${err.message}`);
17  }
18
19  const db = admin.firestore();
20
21  if (event.type === 'checkout.session.completed') {
22    const session = event.data.object;
23    await db.collection('orders').add({
24      userId: session.metadata.userId,
25      productId: session.metadata.productId,
26      amount: session.amount_total / 100,
27      currency: session.currency,
28      status: 'paid',
29      stripeSessionId: session.id,
30      createdAt: admin.firestore.FieldValue.serverTimestamp(),
31      paidAt: admin.firestore.FieldValue.serverTimestamp(),
32    });
33  }
34
35  if (event.type === 'payment_intent.payment_failed') {
36    const intent = event.data.object;
37    await db.collection('orders')
38      .where('stripePaymentIntentId', '==', intent.id)
39      .get()
40      .then(snapshot => {
41        snapshot.forEach(doc => {
42          doc.ref.update({
43            status: 'failed',
44            errorMessage: intent.last_payment_error?.message || 'Payment failed',
45          });
46        });
47      });
48  }
49
50  res.json({ received: true });
51});

In FlutterFlow, create an Order History page. Add a ListView with a Firestore query on the 'orders' collection filtered by userId == currentUserUID and ordered by createdAt descending. In each list item, display: amount formatted as currency, product name (look up from productId or denormalize the name into the order document), paidAt date, and a status badge. Style the status badge with conditional colors: green Container for 'paid', red for 'failed', orange for 'pending', grey for 'refunded'. This gives users a clear view of their payment history and resolves the most common support question — 'did my payment go through?'

For your admin or personal tracking, create a Payment Analytics page visible only to users with an 'admin' role. Use Firestore aggregate queries (via a Custom Action) to calculate: total revenue (sum of amount where status == paid), order count, average order value, and failure rate. Display these in metric cards using a Row of stat containers. For a simple revenue chart showing daily totals, use fl_chart in a Custom Widget — add fl_chart as a package dependency in your project settings. Alternatively, embed a Stripe Dashboard link in an iFrame for web deployments (Stripe allows this for internal tools).