How to Integrate FlutterFlow with Stripe for Payments

In your Stripe Dashboard (dashboard.stripe.com), go to Developers → API Keys. Copy the Secret key (starts with sk_test_ for test mode). In your Firebase project's Cloud Functions, set this as an environment variable using the Firebase CLI: firebase functions:config:set stripe.secret_key='sk_test_YOUR_KEY_HERE'. Never paste this key into FlutterFlow or any client-side code. Your publishable key (pk_test_) is safe to store in FlutterFlow Secrets (Settings → Secrets → STRIPE_PK) — it is designed to be public. Create Products and Prices in Stripe Dashboard → Products before writing any code. Copy the Price ID (price_xxx) for use in the Checkout Session.

Create a Firebase Cloud Function named createCheckoutSession. Install the Stripe SDK: npm install stripe in your functions directory. The function accepts priceId (the Stripe price_xxx ID), userId (Firebase Auth UID), and successUrl and cancelUrl as parameters. It creates a Stripe Customer for the user if one doesn't exist yet (store stripeCustomerId on the Firestore user document), then calls stripe.checkout.sessions.create with mode: 'payment' for one-time or mode: 'subscription' for recurring, customer: stripeCustomerId, line_items with the price ID and quantity, success_url pointing to your app's success deep link, and cancel_url pointing back to your pricing page. Return the session.url to FlutterFlow.

1const functions = require('firebase-functions');
2const admin = require('firebase-admin');
3const Stripe = require('stripe');
4admin.initializeApp();
5
6const stripe = new Stripe(functions.config().stripe.secret_key);
7
8exports.createCheckoutSession = functions.https.onRequest(async (req, res) => {
9  res.set('Access-Control-Allow-Origin', '*');
10  if (req.method === 'OPTIONS') return res.status(204).send('');
11
12  const { priceId, userId, successUrl, cancelUrl } = req.body;
13  if (!priceId || !userId) {
14    return res.status(400).json({ error: 'priceId and userId required' });
15  }
16
17  const userRef = admin.firestore().collection('users').doc(userId);
18  const userDoc = await userRef.get();
19  let customerId = userDoc.data()?.stripeCustomerId;
20
21  if (!customerId) {
22    const customer = await stripe.customers.create({
23      metadata: { firebaseUid: userId },
24    });
25    customerId = customer.id;
26    await userRef.update({ stripeCustomerId: customerId });
27  }
28
29  const session = await stripe.checkout.sessions.create({
30    customer: customerId,
31    payment_method_types: ['card'],
32    line_items: [{ price: priceId, quantity: 1 }],
33    mode: 'payment',
34    success_url: successUrl || 'https://yourapp.com/success',
35    cancel_url: cancelUrl || 'https://yourapp.com/cancel',
36  });
37
38  res.json({ sessionUrl: session.url, sessionId: session.id });
39});

In FlutterFlow's API Manager, create an API Group named PaymentAPI with your Cloud Function's base URL. Add a POST call named createCheckoutSession. Set the request body as JSON with fields priceId (Variable), userId (Variable — bind to the current authenticated user's UID from Authenticated User > User Reference > uid), successUrl and cancelUrl (fixed values pointing to your app's deep link URLs). Add the call to an Action Flow on your Buy Now button. After the API call succeeds, add a Launch URL action binding the URL to the API response field sessionUrl. Set the URL mode to In App Browser (WebView) so users don't leave your app entirely, or External Browser if you prefer the full browser experience.

Create a second Cloud Function named stripeWebhook. This function receives events from Stripe after payment is completed. In Stripe Dashboard → Developers → Webhooks → Add endpoint, paste your Cloud Function's HTTPS URL and select the events: checkout.session.completed, payment_intent.succeeded, customer.subscription.updated, customer.subscription.deleted. Copy the Webhook Signing Secret (whsec_xxx) and add it to Cloud Function environment: firebase functions:config:set stripe.webhook_secret='whsec_xxx'. In the function, verify the event signature using stripe.webhooks.constructEvent(req.rawBody, sig, webhookSecret) — this prevents fake webhook calls. On checkout.session.completed, look up the Firebase user by stripeCustomerId and update their Firestore document: isPaid: true, paymentDate: serverTimestamp(), orderId: session.id.

For subscription products, users need to manage their billing — change plans, update payment method, cancel. Stripe's Customer Portal provides this automatically. Create a third Cloud Function named createPortalSession that accepts a userId, looks up their stripeCustomerId from Firestore, calls stripe.billingPortal.sessions.create({ customer: customerId, return_url: yourAppUrl }), and returns the portal URL. In FlutterFlow, add a Manage Subscription button (visible only to users where isPaid is true) with an Action Flow that calls createPortalSession and launches the returned URL. The portal handles all subscription lifecycle events and sends webhooks back to your stripeWebhook function for changes.