FlutterFlow + RevenueCat: Complete Guide to Subscription Apps

#flutter #mobile #saas #tutorial

Introduction
If you’re building a SaaS or premium mobile app, subscriptions are one of the most reliable monetization models.

But implementing subscriptions correctly is not just about adding a payment button — it involves:

Secure validation
Real-time status updates
Handling edge cases (expiry, restore, refunds) In this guide, I’ll walk you through how I implemented a production-ready subscription system using FlutterFlow + RevenueCat + Firebase.

💰 Why RevenueCat?
Instead of directly handling App Store / Play Store billing, I used RevenueCat because it simplifies everything.

Key Benefits:

✅ Single integration for both iOS & Android
✅ Handles receipts, validation, and renewals
✅ Real-time subscription status via webhooks
✅ Reduces development complexity 👉 Without RevenueCat, managing subscriptions manually becomes very complex.

🏗️ System Architecture (Simple View)
Here’s how the system works:

FlutterFlow App (Frontend)
→ User interacts with UI (Upgrade, Restore)
RevenueCat SDK
→ Handles purchase flow
RevenueCat Server
→ Validates transactions
Firebase (Firestore + Cloud Functions)
→ Stores subscription status & triggers updates

🔄 Complete Subscription Flow
Here’s the exact flow I implemented:

1. User Action
User clicks “Upgrade to Premium”

2. Purchase Trigger
RevenueCat SDK opens native purchase screen (App Store / Play Store)

3. Payment Processing
Payment handled securely by Apple/Google
RevenueCat validates purchase
4. Webhook Trigger
RevenueCat sends event → Firebase Cloud Function

5. Firestore Update
User document is updated:

{
"isPremium": true,
"plan": "monthly",
"expiryDate": "timestamp"
}

6. UI Update

FlutterFlow listens to Firestore
Premium features unlock instantly 🧾 Firestore Database Structure To keep things scalable and clean, I used this structure:

🔹 users collection

{
"userId": "123",
"isPremium": true,
"plan": "yearly",
"expiryDate": "timestamp"
}

🔹 subscriptions collection

{
"planId": "monthly_001",
"price": 9.99,
"duration": "1 month"
}

🔹 events collection (VERY IMPORTANT)

{
"userId": "123",
"eventType": "PURCHASE",
"timestamp": "server_time"
}

👉 This helps in:

Tracking revenue
Debugging issues
Analytics ⚠️ Handling Edge Cases (Most Developers Miss This) This is where most apps fail ❌

1. Expired Subscription

Check expiryDate regularly
Disable premium access automatically
2. Restore Purchases
Add Restore button
Sync with RevenueCat
Update Firestore again

3. Cancelled Subscription

User cancels from App Store
RevenueCat webhook updates backend
Access removed after expiry
4. Refunds
RevenueCat sends refund event
Immediately update user access
🔐 Backend Validation (CRITICAL)
Never trust frontend logic ❌

Always validate subscription from backend using:

RevenueCat webhooks
Firebase Cloud Functions
👉 Why?
Prevents fake unlock hacks
Ensures real subscription status
Keeps your app secure
⚡ Performance & Cost Optimization
Here’s what I optimized:

🔹 Avoid Excessive Reads

Store only required subscription fields
Don’t fetch full history every time
🔹 Use Real-Time Listeners Smartly
Listen only to user document
Avoid unnecessary listeners
🔹 Cache Subscription Status
Reduce repeated API calls
🎯 UI Best Practices (Conversion Focused)
Subscription UI is not just design — it impacts revenue 💰