How to Set Up Webhooks for External Services in FlutterFlow

A webhook is an HTTP POST request that an external service (like Stripe) sends to your server when an event happens — a payment succeeds, an order ships, a user unsubscribes. For this to work, your 'server' must have a permanent public URL that accepts HTTP requests at any moment. A FlutterFlow app runs on the user's iPhone or Android device — it does not have a public URL, it is not always running, and it sleeps when in the background. Even if it did have an IP address, the user's device changes networks constantly. The solution is a three-layer architecture: (1) External service sends webhook → (2) Firebase Cloud Function receives it, verifies the signature, and writes to Firestore → (3) FlutterFlow app reads from Firestore via a real-time listener and updates the UI. The Cloud Function is the server layer — it has a permanent HTTPS URL, is always available, and scales automatically. Firestore is the message bus — once the Cloud Function writes the event, all connected FlutterFlow app instances see the update within 100-300ms.

In your Firebase project, open the functions/index.js file (or create one with firebase init functions). Write an HTTPS onRequest function that accepts POST requests from your chosen external service. The function should: log the incoming request for debugging, verify the webhook signature (covered in the next step), parse the event type from the payload, write the relevant data to a Firestore collection, and return a 200 response quickly. Returning 200 is critical — external services retry webhooks if they do not receive a 200 within their timeout window (Stripe: 20 seconds, Shopify: 5 seconds). Process the actual work after you return 200, or use a Firestore write to queue work for a separate background function. Deploy with: firebase deploy --only functions. The deployed function URL appears in the Firebase Console → Functions → Dashboard. Copy this URL — it looks like https://us-central1-{project}.cloudfunctions.net/webhookHandler.

1// functions/index.js — Generic webhook receiver
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4
5admin.initializeApp();
6
7exports.webhookHandler = functions.https.onRequest(async (req, res) => {
8  // Always respond quickly — return 200 before heavy processing
9  // External services retry if they don't get 200 within their timeout
10
11  if (req.method !== 'POST') {
12    res.status(405).send('Method Not Allowed');
13    return;
14  }
15
16  const db = admin.firestore();
17
18  try {
19    // Step 1: Verify signature (see next step for Stripe example)
20    // const isValid = verifySignature(req);
21    // if (!isValid) { res.status(401).send('Invalid signature'); return; }
22
23    // Step 2: Parse the event
24    const event = req.body;
25    const eventType = event.type || event.event || 'unknown';
26    const eventId = event.id || db.collection('webhook_events').doc().id;
27
28    // Step 3: Prevent duplicate processing (idempotency)
29    const existingDoc = await db.collection('webhook_events').doc(eventId).get();
30    if (existingDoc.exists) {
31      res.status(200).send('Already processed');
32      return;
33    }
34
35    // Step 4: Write to Firestore
36    await db.collection('webhook_events').doc(eventId).set({
37      eventType,
38      payload: event,
39      receivedAt: admin.firestore.FieldValue.serverTimestamp(),
40      processed: false,
41    });
42
43    // Step 5: Return 200 immediately
44    res.status(200).json({ received: true });
45
46    // Step 6: Process the event AFTER returning (fire-and-forget)
47    await processWebhookEvent(db, eventType, event);
48
49  } catch (err) {
50    console.error('Webhook error:', err);
51    // Return 200 even on processing errors to prevent retries
52    // Log to a dead_letter_queue for manual inspection
53    res.status(200).json({ received: true, processingError: err.message });
54  }
55});
56
57async function processWebhookEvent(db, eventType, event) {
58  if (eventType === 'payment_intent.succeeded') {
59    const pi = event.data?.object;
60    await db.collection('payments').doc(pi.id).set({
61      status: 'succeeded',
62      amount: pi.amount,
63      currency: pi.currency,
64      customerId: pi.customer,
65      updatedAt: admin.firestore.FieldValue.serverTimestamp(),
66    });
67  } else if (eventType === 'checkout.session.completed') {
68    const session = event.data?.object;
69    await db.collection('orders').doc(session.id).set({
70      status: 'paid',
71      customerEmail: session.customer_email,
72      amountTotal: session.amount_total,
73      updatedAt: admin.firestore.FieldValue.serverTimestamp(),
74    });
75  }
76  // Add more event types as needed
77}

Without signature verification, anyone who discovers your Cloud Function URL can POST fake payment events, fake order completions, or any data they choose. Every serious webhook provider signs their payloads — Stripe uses HMAC-SHA256 with a signing secret, Shopify uses X-Shopify-Hmac-Sha256, GitHub uses X-Hub-Signature-256. For Stripe: get your webhook signing secret from Stripe Dashboard → Developers → Webhooks → your endpoint → Signing secret. Store it in Firebase config: firebase functions:config:set stripe.webhook_secret='whsec_YOUR_SECRET'. In the Cloud Function, use Stripe's official SDK to verify: the raw request body (not parsed JSON) must be passed to stripe.webhooks.constructEvent(). This is why you must use express.raw() middleware for the webhook route — normal JSON parsing corrupts the raw body that signature verification requires.

1// Stripe webhook signature verification
2// Install: cd functions && npm install stripe
3const stripe = require('stripe')(functions.config().stripe.secret_key);
4
5exports.stripeWebhook = functions.https.onRequest(
6  // CRITICAL: Use raw body for Stripe signature verification
7  // In firebase.json, add rewrite or use express with raw body parser
8  async (req, res) => {
9    const sig = req.headers['stripe-signature'];
10    const webhookSecret = functions.config().stripe.webhook_secret;
11
12    let event;
13    try {
14      // req.rawBody is the raw Buffer — required for HMAC verification
15      // Firebase Functions automatically provides req.rawBody
16      event = stripe.webhooks.constructEvent(
17        req.rawBody,
18        sig,
19        webhookSecret
20      );
21    } catch (err) {
22      console.error('Stripe signature verification failed:', err.message);
23      res.status(400).send(`Webhook Error: ${err.message}`);
24      return;
25    }
26
27    // Signature verified — safe to process
28    const db = admin.firestore();
29    res.status(200).json({ received: true });
30
31    // Process after returning 200
32    if (event.type === 'payment_intent.succeeded') {
33      const paymentIntent = event.data.object;
34      const userId = paymentIntent.metadata?.userId;
35
36      await db.collection('payments').doc(paymentIntent.id).set({
37        userId,
38        status: 'succeeded',
39        amount: paymentIntent.amount / 100, // cents to dollars
40        currency: paymentIntent.currency.toUpperCase(),
41        createdAt: admin.firestore.FieldValue.serverTimestamp(),
42      });
43
44      if (userId) {
45        // Update user subscription status if applicable
46        await db.collection('users').doc(userId).update({
47          subscriptionStatus: 'active',
48          lastPaymentAt: admin.firestore.FieldValue.serverTimestamp(),
49        });
50      }
51    }
52  }
53);

Copy your Cloud Function's HTTPS URL from Firebase Console → Functions → Dashboard → webhookHandler or stripeWebhook URL. For Stripe: go to Stripe Dashboard → Developers → Webhooks → Add endpoint. Paste the Cloud Function URL. Under 'Listen to' select 'Events on your account'. Choose the specific events you need: checkout.session.completed, payment_intent.succeeded, customer.subscription.updated, invoice.payment_failed. Click Add endpoint. Stripe immediately shows you the Signing secret — click Reveal and copy it, then store it: firebase functions:config:set stripe.webhook_secret='whsec_...' and redeploy. For Shopify: Shopify Admin → Settings → Notifications → Webhooks → Create webhook → choose event (e.g., orders/create) → paste Cloud Function URL → choose JSON format. For SendGrid: Settings → Mail Settings → Event Webhook → HTTP Post URL → paste URL → enable the events you want (delivered, opened, clicked, bounced). After registering, use each service's 'Send test webhook' button to verify your Cloud Function processes it correctly.

Now that webhooks write to Firestore, configure FlutterFlow to display this data and react to changes in real-time. Create a PaymentStatus page (or add to your order confirmation page). Add a Backend Query on the page bound to the Firestore collection your webhook writes to — for payments, query the payments collection WHERE userId equals the current logged-in user's ID, ordered by createdAt descending. In the Backend Query settings, enable 'Single Time Query' OFF (leave it off to use real-time updates) — this makes FlutterFlow use a Firestore real-time listener that updates automatically when new documents arrive. Add a ListView or conditional Column that displays different content based on the payment status field. For example: if status == 'succeeded' show a green success card with the amount, if status == 'pending' show a loading spinner, if status == 'failed' show a red error message. This creates the effect of the app updating the moment Stripe confirms the payment — the webhook fires, Cloud Function writes to Firestore, Firestore listener in FlutterFlow triggers a UI update, all within 1-3 seconds.