How to Create Custom Payments in FlutterFlow

Answer these four questions to pick the right payment pattern. Question 1 — Will this app be sold on the App Store or Google Play Store, and do you charge for subscriptions or digital content? If yes: you MUST use in-app purchases (in_app_purchase package) for digital goods and subscriptions — Apple and Google mandate this and take 15-30%. Physical goods and services are exempt. Question 2 — Do you need full payment UI inside your app with no redirect? If yes: use Stripe Payment Intent + CardField Custom Widget (available in FlutterFlow via Custom Widget with Stripe's Flutter SDK). Note: App Store and Google Play do not allow custom card entry forms for digital goods — only in-app purchase. Question 3 — Is simplest possible integration the priority, or do you sell physical goods/services? If yes: use Stripe Checkout — a Cloud Function creates a CheckoutSession, you get a URL, Launch URL opens Stripe's hosted payment page. Stripe handles PCI compliance, address collection, fraud detection. Question 4 — Does your audience prefer PayPal over card entry? PayPal via WebView is viable for web-first audiences or international markets where PayPal is dominant.

Stripe Checkout is a Stripe-hosted payment page — you create a session server-side and redirect the user to Stripe's URL. All card entry, fraud detection, address collection, and PCI compliance are handled by Stripe. Create a Cloud Function named createCheckoutSession. It receives: priceId (from your Stripe Dashboard product), quantity, successUrl, cancelUrl, and optionally customerId. The function calls Stripe's API to create a session and returns the URL. In FlutterFlow: add the createCheckoutSession API Call to your API Manager → TransactionService group. On your pricing or cart page, add a 'Buy Now' or 'Subscribe' button. Action Flow: call createCheckoutSession with the price ID and quantity, get the session URL from the response, then add a Launch URL action using the returned sessionUrl. The user is taken to Stripe's hosted page, pays, and Stripe redirects back to your successUrl. Create a Success page in FlutterFlow and use deep links or Firebase Dynamic Links to bring the user back into the app after payment.

1// functions/index.js — Stripe Checkout session creator
2// Install: cd functions && npm install stripe
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5const Stripe = require('stripe');
6
7admin.initializeApp();
8
9exports.createCheckoutSession = functions.https.onRequest(async (req, res) => {
10  res.set('Access-Control-Allow-Origin', '*');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  const stripe = new Stripe(functions.config().stripe.secret_key);
14  const {
15    priceId,
16    quantity = 1,
17    successUrl,
18    cancelUrl,
19    customerId,
20    userId,          // Firebase Auth UID for post-payment webhook
21    mode = 'payment' // 'payment' or 'subscription'
22  } = req.body;
23
24  try {
25    const session = await stripe.checkout.sessions.create({
26      mode,
27      line_items: [{ price: priceId, quantity }],
28      success_url: successUrl ||
29        'https://your-app.com/payment-success?session_id={CHECKOUT_SESSION_ID}',
30      cancel_url: cancelUrl ||
31        'https://your-app.com/payment-cancelled',
32      customer: customerId || undefined,
33      metadata: { userId }, // Pass userId for webhook
34      ...(mode === 'subscription' && {
35        subscription_data: { metadata: { userId } },
36      }),
37    });
38
39    res.json({
40      sessionId: session.id,
41      sessionUrl: session.url,
42    });
43  } catch (err) {
44    console.error('Checkout session error:', err);
45    res.status(500).json({ error: err.message });
46  }
47});
48
49// Set config: firebase functions:config:set stripe.secret_key='sk_test_...'

If your app has subscriptions or sells digital content (premium features, coins, additional storage) and will be distributed on the App Store or Google Play, you must use in-app purchases — Apple and Google require it for all digital goods sold in mobile apps. In FlutterFlow: Custom Code → Pubspec Dependencies → add in_app_purchase at the current version. Create a Custom Action named initializePurchases that sets up the purchase stream and listens for purchase updates. Create a Custom Action named purchaseProduct that takes a productId (the ID you created in App Store Connect or Google Play Console) and calls InAppPurchase.instance.buyNonConsumable or buyConsumable. Create a Custom Action named restorePurchases for the required 'Restore Purchases' button (App Store requirement). Configure products: in App Store Connect → your app → In-App Purchases → add a product with identifier (e.g., com.yourapp.premium_monthly). In Google Play Console → Monetize → Subscriptions. Test using Sandbox accounts (App Store) or test accounts (Google Play).

1// Custom Action: initializePurchases
2// Add to Pubspec: in_app_purchase: ^3.2.0
3import 'dart:async';
4import 'package:in_app_purchase/in_app_purchase.dart';
5
6// Call once on app init or on the pricing page
7Future<void> initializePurchases(
8  Future Function(PurchaseDetails) onPurchaseSuccess,
9) async {
10  final bool available = await InAppPurchase.instance.isAvailable();
11  if (!available) {
12    // Store not available (e.g., no Google Play on emulator)
13    return;
14  }
15
16  // Listen to purchase updates
17  InAppPurchase.instance.purchaseStream.listen(
18    (List<PurchaseDetails> purchaseDetailsList) async {
19      for (final purchase in purchaseDetailsList) {
20        if (purchase.status == PurchaseStatus.purchased ||
21            purchase.status == PurchaseStatus.restored) {
22          // Verify receipt server-side via Cloud Function
23          // then deliver the entitlement
24          await onPurchaseSuccess(purchase);
25          // MUST call completePurchase to finish the transaction
26          await InAppPurchase.instance.completePurchase(purchase);
27        } else if (purchase.status == PurchaseStatus.error) {
28          // Handle error
29          print('Purchase error: ${purchase.error}');
30        }
31      }
32    },
33  );
34}
35
36// Custom Action: purchaseProduct
37Future<void> purchaseProduct(String productId) async {
38  final ProductDetailsResponse response =
39      await InAppPurchase.instance.queryProductDetails({productId});
40
41  if (response.notFoundIDs.isNotEmpty) {
42    throw Exception('Product not found: $productId');
43  }
44
45  final ProductDetails product = response.productDetails.first;
46  final PurchaseParam params = PurchaseParam(productDetails: product);
47
48  // Use buyConsumable for one-time consumables (coins, credits)
49  // Use buyNonConsumable for permanent unlocks
50  await InAppPurchase.instance.buyNonConsumable(purchaseParam: params);
51}

If you need card entry inside your app (no redirect to a browser), use Stripe's Flutter SDK with the CardField widget — this is the only PCI-compliant way to accept card numbers in a custom UI. The CardField widget is provided by the flutter_stripe package and tokenizes the card data on-device before it ever leaves the phone — your Cloud Function never sees the raw card number. In FlutterFlow: Custom Code → Pubspec Dependencies → add flutter_stripe. Create a Custom Widget that embeds the CardField. The workflow: (1) Cloud Function creates a PaymentIntent and returns the clientSecret, (2) the CardField captures the card details, (3) the Custom Action calls Stripe.instance.confirmPayment(clientSecret, params) to process the payment, (4) on success the Custom Action returns the paymentIntentId to FlutterFlow. This pattern requires FlutterFlow Pro for downloading and testing the compiled custom widget, and additional Stripe SDK configuration in the iOS and Android platform files.

Regardless of which payment method you choose, confirm payment server-side via a webhook before granting access to paid features. Never trust the client to report its own payment status. After a Stripe Checkout payment completes, Stripe fires checkout.session.completed and payment_intent.succeeded webhooks to your Cloud Function endpoint (registered in Stripe Dashboard → Developers → Webhooks). Your Cloud Function handler: verify the Stripe-Signature header, extract the userId from session.metadata, update the user's Firestore document: subscriptionStatus: 'active', subscriptionTier: 'pro', subscriptionExpiry: (current date + 30 days for monthly). In FlutterFlow, the user's profile page has a real-time Backend Query on the users/{uid} document — when the webhook writes the update, FlutterFlow's listener sees it within 1-2 seconds and the UI updates to show the unlocked premium features automatically.