How to Set Up a Content Subscription or Membership Site in FlutterFlow

Open the Firestore schema in FlutterFlow and add three fields to your users document: subscriptionTier (String, default 'free'), subscriptionExpiresAt (Timestamp, nullable), and stripeCustomerId (String, nullable). The subscriptionTier field will hold values like 'free', 'basic', or 'premium'. Create a content collection with fields: title (String), body (String), thumbnailUrl (String), requiredTier (String), and createdAt (Timestamp). This separation lets you gate individual content items by tier.

Create a new page called ContentLibrary. Add a Backend Query on a ListView that queries the content collection. Add a filter where requiredTier is less than or equal to the current user's subscriptionTier using a custom ordering (free=0, basic=1, premium=2 via a Custom Function that maps tier strings to integers). For a simpler approach, query all content and use Conditional Visibility on each list item to show a lock icon overlay on items above the user's tier. Display each item as a Container with the thumbnail, title, and a lock icon Stack overlay for gated items.

On the content detail page, wrap the main content Column in a Stack. Add a second child to the Stack: a Container with a BackdropFilter (Custom Widget using ImageFilter.blur with sigmaX and sigmaY set to 8) that covers the full page. Inside this blurred overlay, add a Column with a lock Icon, a Text widget reading 'Premium Content', a description of what the tier includes, and a Button labeled 'Upgrade Now'. Set Conditional Visibility on the blur Container to show only when currentUserDocument.subscriptionTier is less than the content's requiredTier.

Create a Cloud Function called createSubscriptionCheckout. It receives the userId and priceId as parameters. The function looks up or creates a Stripe Customer (storing stripeCustomerId on the user doc), then calls stripe.checkout.sessions.create with mode set to 'subscription', the priceId, success and cancel URLs pointing back to your app, and customer set to the Stripe customer ID. Return the session URL. In FlutterFlow, wire the Upgrade Now button to call this Cloud Function via an API Call action, then use a Launch URL action with the returned session URL to open the Stripe Checkout page.

1// Cloud Function: createSubscriptionCheckout
2const functions = require('firebase-functions');
3const stripe = require('stripe')(functions.config().stripe.secret_key);
4const admin = require('firebase-admin');
5admin.initializeApp();
6
7exports.createSubscriptionCheckout = functions.https.onCall(async (data, context) => {
8  const { priceId } = data;
9  const uid = context.auth.uid;
10  const userDoc = await admin.firestore().collection('users').doc(uid).get();
11  let customerId = userDoc.data().stripeCustomerId;
12
13  if (!customerId) {
14    const customer = await stripe.customers.create({
15      email: userDoc.data().email,
16      metadata: { firebaseUID: uid },
17    });
18    customerId = customer.id;
19    await admin.firestore().collection('users').doc(uid).update({ stripeCustomerId: customerId });
20  }
21
22  const session = await stripe.checkout.sessions.create({
23    mode: 'subscription',
24    customer: customerId,
25    line_items: [{ price: priceId, quantity: 1 }],
26    success_url: 'https://yourapp.com/subscription-success',
27    cancel_url: 'https://yourapp.com/pricing',
28  });
29
30  return { url: session.url };
31});

Create a second Cloud Function called stripeWebhook that listens for Stripe webhook events. Verify the webhook signature using stripe.webhooks.constructEvent. Handle the checkout.session.completed event: extract the customer ID, look up the user by stripeCustomerId, determine the tier from the priceId metadata, and update the user's subscriptionTier and subscriptionExpiresAt fields. Also handle customer.subscription.deleted to revert the user to the free tier. Register this webhook URL in your Stripe Dashboard under Developers > Webhooks.

1// Cloud Function: stripeWebhook
2exports.stripeWebhook = functions.https.onRequest(async (req, res) => {
3  const sig = req.headers['stripe-signature'];
4  let event;
5  try {
6    event = stripe.webhooks.constructEvent(req.rawBody, sig, functions.config().stripe.webhook_secret);
7  } catch (err) {
8    return res.status(400).send(`Webhook Error: ${err.message}`);
9  }
10
11  if (event.type === 'checkout.session.completed') {
12    const session = event.data.object;
13    const subscription = await stripe.subscriptions.retrieve(session.subscription);
14    const priceId = subscription.items.data[0].price.id;
15    const tier = priceId === 'price_premium_id' ? 'premium' : 'basic';
16    const usersRef = admin.firestore().collection('users');
17    const snapshot = await usersRef.where('stripeCustomerId', '==', session.customer).get();
18    if (!snapshot.empty) {
19      await snapshot.docs[0].ref.update({
20        subscriptionTier: tier,
21        subscriptionExpiresAt: admin.firestore.Timestamp.fromMillis(subscription.current_period_end * 1000),
22      });
23    }
24  }
25
26  if (event.type === 'customer.subscription.deleted') {
27    const subscription = event.data.object;
28    const usersRef = admin.firestore().collection('users');
29    const snapshot = await usersRef.where('stripeCustomerId', '==', subscription.customer).get();
30    if (!snapshot.empty) {
31      await snapshot.docs[0].ref.update({ subscriptionTier: 'free', subscriptionExpiresAt: null });
32    }
33  }
34
35  res.status(200).send('OK');
36});

On every protected page, add an On Page Load action that checks whether currentUserDocument.subscriptionExpiresAt is before the current timestamp. If expired, update subscriptionTier to 'free' via an Update Document action and show the paywall. For managing subscriptions, add a Manage Subscription button on the settings page. Create a Cloud Function called createPortalSession that calls stripe.billingPortal.sessions.create with the user's stripeCustomerId and returns the portal URL. Wire the button to call this function and open the returned URL, allowing users to cancel or change plans through Stripe's hosted portal.