Implementing Stripe subscriptions in FlutterFlow for web

Stripe subscriptions can add a valuable layer of monetization to your FlutterFlow web app, especially if you’re building a SaaS, membership-based service, or any recurring payment platform. While FlutterFlow doesn’t offer a direct integration for managing subscriptions out of the box (other than RevenueCat), it allows you to leverage Stripe’s subscription capabilities through custom actions, API integrations, and on-load actions to give users a seamless subscription experience. Here’s a quick overview of how you can set up Stripe subscriptions on a FlutterFlow web app.

Why web-only?

Stripe subscriptions in FlutterFlow work best on web apps because Stripe’s API for managing subscriptions requires client-side JavaScript for the checkout process. On mobile apps, implementing a subscription would generally require native SDKs or WebView setups, which can often be restricted by Apple's and Google's store policies. For native SDKs, we recommend using a service like RevenueCat.

Setting up a Stripe integration in FlutterFlow

To get started, you’ll need to set up Stripe integration in FlutterFlow using the API Connector. Here’s a step-by-step guide on how to handle it:

1. Create a Stripe account and API key

• Start by signing up for a Stripe account if you don’t have one.
• Go to Developers > API keys in the Stripe Dashboard to get your publishable key (for the frontend) and secret key (for backend calls).

2. Set up Stripe products and prices

• In the Stripe Dashboard, go to Products and create your subscription products.
• Define different pricing plans for each product, such as monthly or yearly rates.

3. Configure a FlutterFlow API connector

• Go to API Connector in FlutterFlow.
• Add a new API collection for Stripe and include endpoints for creating a customer, creating a subscription, and handling webhooks if needed.
• Create customer - this will let you set up a new Stripe customer when a user registers.
• Create subscription - this will start a new subscription for the customer, using their payment method.

Implementing Stripe subscriptions in FlutterFlow

1. On-load actions for Stripe subscriptions
   • To manage subscriptions effectively, you’ll likely want to run a subscription status check as an on-load action for each relevant page. This can verify whether a user has an active subscription and restrict or grant access based on their status.
   • In the Actions panel, set up a custom action to call Stripe’s API and check the user’s subscription status. This can involve querying your database for the user’s Stripe Customer ID, calling Stripe’s API to check their subscription, and then updating the app state accordingly.
2. Creating Subscription pages and buttons
   • Design subscription pages in FlutterFlow where users can select a subscription plan. Each plan should correspond to the product IDs and prices you set up in Stripe.
   • Use a custom action to handle the subscription button, which should trigger the Stripe API call for creating a subscription.
   • After successful subscription creation, update the user’s subscription status in your database (Firebase or Supabase).
3. Handling payments and webhooks
   • While Stripe handles payments, you’ll want to monitor payment statuses and act on subscription changes (e.g., cancellations or renewals). Stripe webhooks allow you to receive real-time updates on these events.
   • Set up a Cloud Function to handle Stripe’s webhooks. This will allow you to listen for subscription events like successful payments, failed payments, cancellations, etc., and update your database in real time.
4. Managing subscription data in your database
   • Keep track of user subscriptions in your database (e.g., Firebase or Supabase) with fields for subscription status, plan type, renewal date, etc.
   • You may also want to add logic in FlutterFlow’s on-load actions or conditional visibility to hide/show content based on the subscription status.

Benefits of using Stripe for subscriptions

Stripe is a powerful tool for managing subscriptions due to its flexibility, security, and global reach. By integrating Stripe in FlutterFlow, you can:

• Offer a secure payment experience - Stripe is PCI-compliant and takes care of payment security.
• Easily handle recurring payments - Stripe automatically manages subscription renewals, billing cycles, and payment methods.
• Expand globally - Stripe supports payments in many currencies, which is essential if you’re targeting a global audience.

With these basics, you’ll be well on your way to adding robust, subscription-based monetization to your FlutterFlow web app. If you need more advanced features, like custom subscription management or in-depth analytics, FlutterFlow’s flexibility with APIs makes it possible to integrate even the most complex setups.

Final thoughts

Stripe subscriptions can add immense value to your FlutterFlow web app, and setting it up through API integration is a great way to add recurring revenue. If you're interested in a fully custom setup or want to explore advanced subscription features, feel free to reach out to our team for professional assistance with Stripe and FlutterFlow integrations.