How to Add Payments to Your FlutterFlow Project

Sign up at stripe.com if you don't have an account. Verify your email. In the Stripe Dashboard, click Developers in the left sidebar, then API Keys. You'll see two key types: Publishable key (pk_test_xxx) — safe for client-side code, and Secret key (sk_test_xxx) — server-side only, never in app code. You're in test mode by default, which is correct for now. Copy your Secret key and save it somewhere secure (a password manager). In your Stripe Dashboard, also navigate to Products > Create a product to create at least one product with a price — you'll need the price ID (price_xxx) when creating Checkout Sessions.

In Firebase Console, go to Functions and click Get Started. Initialize functions in your terminal with 'firebase init functions' (select JavaScript). Install the Stripe SDK: 'npm install stripe' inside the functions/ directory. Set your Stripe secret key as a Firebase environment config variable: 'firebase functions:config:set stripe.secret_key=sk_test_xxx'. Deploy the createCheckoutSession function below. This function receives a price ID and user ID, creates a Stripe Checkout Session, and returns the session URL. Register the function URL in Stripe Webhooks after deployment.

1const functions = require('firebase-functions');
2const Stripe = require('stripe');
3const cors = require('cors')({ origin: true });
4
5exports.createCheckoutSession = functions.https.onRequest((req, res) => {
6  cors(req, res, async () => {
7    if (req.method !== 'POST') {
8      return res.status(405).send('Method Not Allowed');
9    }
10    try {
11      const stripe = Stripe(functions.config().stripe.secret_key);
12      const { priceId, userId, successUrl, cancelUrl } = req.body;
13
14      if (!priceId || !userId) {
15        return res.status(400).json({ error: 'Missing priceId or userId' });
16      }
17
18      const session = await stripe.checkout.sessions.create({
19        payment_method_types: ['card'],
20        mode: 'payment', // or 'subscription' for recurring
21        line_items: [{ price: priceId, quantity: 1 }],
22        metadata: { userId },
23        success_url: successUrl || 'https://yourapp.com/success',
24        cancel_url: cancelUrl || 'https://yourapp.com/cancel',
25      });
26
27      res.json({ sessionUrl: session.url, sessionId: session.id });
28    } catch (error) {
29      console.error('Checkout session error:', error);
30      res.status(500).json({ error: error.message });
31    }
32  });
33});

In FlutterFlow, go to Custom Code > Custom Actions and create a new action called 'initiateStripeCheckout'. This action takes the priceId as a parameter, calls your Cloud Function, and returns the checkout URL. Add the 'http' package to your project dependencies. The action posts to your Cloud Function URL with the priceId and currentUserUID, receives the session URL in the response, and returns it as a String. Keep your Cloud Function URL in a project constant (not hardcoded in the action) for easy updates between environments.

1import 'dart:convert';
2import 'package:http/http.dart' as http;
3
4Future<String> initiateStripeCheckout(String priceId) async {
5  const cloudFunctionUrl =
6      'https://us-central1-YOUR-PROJECT.cloudfunctions.net/createCheckoutSession';
7
8  try {
9    final response = await http.post(
10      Uri.parse(cloudFunctionUrl),
11      headers: {'Content-Type': 'application/json'},
12      body: jsonEncode({
13        'priceId': priceId,
14        'userId': currentUserUid, // FlutterFlow built-in
15        'successUrl': 'https://yourapp.com/payment-success',
16        'cancelUrl': 'https://yourapp.com/payment-cancel',
17      }),
18    );
19
20    if (response.statusCode == 200) {
21      final data = jsonDecode(response.body);
22      return data['sessionUrl'] as String;
23    } else {
24      debugPrint('Cloud Function error: ${response.statusCode} ${response.body}');
25      return '';
26    }
27  } catch (e) {
28    debugPrint('initiateStripeCheckout error: $e');
29    return '';
30  }
31}

On your product detail page or pricing page in FlutterFlow, select the Buy Now button. Open its On Tap action chain. Add these actions in sequence: (1) Show Loading overlay, (2) Call the initiateStripeCheckout Custom Action (pass your price ID), (3) Hide Loading overlay, (4) Add a Conditional action: if the returned URL is not empty, launch it using FlutterFlow's Launch URL action (set to open in a new tab/browser). If the URL is empty, show a SnackBar with an error message. The Launch URL action opens the Stripe-hosted checkout page in the browser where the user enters card details.

After Stripe processes a payment, your app needs to know about it. Create a second Cloud Function that receives Stripe webhook events and writes order records to Firestore. Register this function's URL as a webhook endpoint in Stripe Dashboard > Developers > Webhooks. Listen for the 'checkout.session.completed' event. Always verify the Stripe signature using your webhook signing secret (different from your API secret key) to prevent fake payment events. Once the signature is verified, create an order document in Firestore with status 'paid', the user ID from session.metadata.userId, the amount, and the Stripe session ID for reference.

Test your full payment flow using Stripe's test card numbers. In the Stripe Checkout page, enter card number 4242 4242 4242 4242, any future expiry date, any 3-digit CVC, and any postal code. This simulates a successful payment. Test a declined card with 4000 0000 0000 0002. After testing confirms the order flow works end-to-end, go live: activate your Stripe account (complete the account verification), get your live API keys from Stripe Dashboard, update your Firebase config: 'firebase functions:config:set stripe.secret_key=sk_live_xxx', update your webhook with the live signing secret, and redeploy your Cloud Functions.