Stripe Connect

Log in to your Stripe Dashboard at dashboard.stripe.com and navigate to Connect → Get started. Choose the Express account type — it handles KYC and identity verification on Stripe's side, which means you don't need to build that yourself. Once enabled, go to Developers → API keys. You'll see your publishable key (pk_test_* or pk_live_*) and your secret key (sk_test_* or sk_live_*). Copy both somewhere safe. The publishable key can be placed in FlutterFlow App State or App Values — it's safe for client use. The secret key must go into your backend environment: a Firebase Functions config value, a Supabase project secret, or an environment variable in your cloud functions deployment. Never paste sk_* anywhere inside FlutterFlow itself. Also note your platform's Stripe account ID (acct_*) from the Dashboard top-right — you may need it for some Connect API calls.

Create a Firebase Cloud Function (Node.js) or Supabase Edge Function (Deno) that handles three endpoints your FlutterFlow app will call: (1) POST /create-account — receives a seller's email and name, calls POST https://api.stripe.com/v1/accounts with account_type=express and the seller's details, then calls POST https://api.stripe.com/v1/account_links with the account ID plus a return_url and refresh_url that deep-link back into your app (use your app's universal link scheme, e.g. myapp://onboarding/complete). Return the account_links.url to the app so it can open the onboarding WebView. (2) POST /create-payment-intent — receives amount (in cents), currency, connected_account_id, and application_fee_amount; calls POST https://api.stripe.com/v1/payment_intents with transfer_data[destination] set to the seller's account ID. Return the client_secret to the app. (3) GET /account-status?account_id=acct_xxx — calls GET https://api.stripe.com/v1/accounts/{id} and returns payouts_enabled and charges_enabled so the app can show onboarding completion state. All three functions authenticate to Stripe using your sk_* from environment config. Store the proxy URLs (not the Stripe key) in FlutterFlow App Values.

1// Firebase Cloud Function example (Node.js)
2const functions = require('firebase-functions');
3const stripe = require('stripe')(functions.config().stripe.secret_key);
4const express = require('express');
5const cors = require('cors')({ origin: true });
6const app = express();
7app.use(cors);
8app.use(express.json());
9
10// 1. Create Express account + Account Link
11app.post('/create-account', async (req, res) => {
12  const { email, name } = req.body;
13  const account = await stripe.accounts.create({
14    type: 'express',
15    email,
16    capabilities: { card_payments: { requested: true }, transfers: { requested: true } },
17  });
18  const accountLink = await stripe.accountLinks.create({
19    account: account.id,
20    refresh_url: 'https://yourproxy.com/reauth',
21    return_url: 'myapp://onboarding/complete',
22    type: 'account_onboarding',
23  });
24  res.json({ account_id: account.id, onboarding_url: accountLink.url });
25});
26
27// 2. Create PaymentIntent with marketplace split
28app.post('/create-payment-intent', async (req, res) => {
29  const { amount, currency, destination_account, application_fee_amount } = req.body;
30  const paymentIntent = await stripe.paymentIntents.create({
31    amount,           // in cents, e.g. 5000 = $50.00
32    currency,
33    application_fee_amount, // e.g. 500 = $5.00 (10% fee)
34    transfer_data: { destination: destination_account },
35  });
36  res.json({ client_secret: paymentIntent.client_secret });
37});
38
39exports.stripeConnect = functions.https.onRequest(app);

In FlutterFlow, click API Calls in the left navigation panel. Click + Add and choose Create API Group. Name it StripeConnectProxy. Set the Base URL to your deployed proxy URL (e.g. https://us-central1-yourproject.cloudfunctions.net/stripeConnect or your Supabase Edge Function URL). You do not need any shared headers here — authentication happens inside the proxy, not from FlutterFlow. Now add individual API Calls within this group. First: click + Add Call → name it CreateAccount → set the Method to POST and the Path to /create-account. Switch to the Variables tab and add two Body variables: email (String) and name (String). In the Body tab, configure it as JSON with body { "email": "{{ email }}", "name": "{{ name }}" }. Click Response & Test, paste a sample response like { "account_id": "acct_xxx", "onboarding_url": "https://connect.stripe.com/express/onboarding/..." }, and click Generate JSON Paths. FlutterFlow will auto-generate $.account_id and $.onboarding_url paths you can bind to variables. Repeat this for CreatePaymentIntent (POST /create-payment-intent with amount, currency, destination_account, application_fee_amount body variables) and GetAccountStatus (GET /account-status with account_id as a query variable). Save all three API Calls.

1// Sample JSON response for CreateAccount — paste in Response & Test
2{
3  "account_id": "acct_1ExampleXXXXXXXX",
4  "onboarding_url": "https://connect.stripe.com/express/onboarding/o.abc123"
5}
6
7// Sample JSON response for CreatePaymentIntent
8{
9  "client_secret": "pi_3ExampleXXXXXXXX_secret_XXXXXX"
10}
11
12// Sample JSON response for GetAccountStatus
13{
14  "charges_enabled": true,
15  "payouts_enabled": true
16}

When a seller taps 'Connect your bank account' in the app, you need to open the Stripe Express onboarding URL returned by CreateAccount. In FlutterFlow, you have two solid options. Option A (simpler): use a url_launcher Custom Action. Go to Custom Code → + Add → Action, name it LaunchUrl, add the pub.dev package url_launcher (version: ^6.2.6) in the Dependencies field, then paste a short Dart snippet that calls launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication). Attach this action to the 'Connect Account' button's Actions panel → + Add Action → Custom Action → LaunchUrl, passing in the onboarding_url from App State. This opens Stripe's flow in the device's default browser. Option B (more integrated): add a WebView widget from the FlutterFlow widget panel (it's in the Layout / Container elements; search 'WebView'). Bind its URL property to the onboarding_url App State variable and place it on a dedicated OnboardingWebView page. Navigate to this page after the CreateAccount API call succeeds. When the seller completes onboarding, Stripe redirects to your return_url (myapp://onboarding/complete). Handle this deep link in your app by navigating back to the seller dashboard and calling GetAccountStatus to confirm charges_enabled and payouts_enabled are both true. Display a success banner when they are. If the seller abandons, Stripe redirects to refresh_url — call CreateAccount again to generate a new link.

1// Custom Action: LaunchUrl (url_launcher ^6.2.6)
2import 'package:url_launcher/url_launcher.dart';
3
4Future launchUrl(String url) async {
5  final uri = Uri.parse(url);
6  if (await canLaunchUrl(uri)) {
7    await launchUrl(uri, mode: LaunchMode.externalApplication);
8  } else {
9    throw Exception('Could not launch $url');
10  }
11}

When a buyer is ready to pay, your app needs to: (1) call CreatePaymentIntent on your proxy, passing the correct amount in cents (important: $29.99 = 2999, NOT 29.99 — this is the single most common beginner bug with Stripe), the destination connected account ID, and the application_fee_amount also in cents; (2) receive the client_secret back; (3) use the Stripe Flutter SDK to present the Payment Sheet to the buyer. In FlutterFlow, go to Custom Code → + Add → Action, name it ShowPaymentSheet, add the package flutter_stripe (^10.1.1) to Dependencies. In the Dart action, initialise Stripe with your publishable key (safe to hardcode or store in App Values), pass the client_secret received from the proxy into Stripe.instance.initPaymentSheet(), then call Stripe.instance.presentPaymentSheet(). The amount shown to the buyer is the full charge amount. The proxy handles the split: application_fee_amount goes to your platform account, (amount - application_fee_amount - Stripe fees) goes to transfer_data[destination]. Wire this Custom Action to your 'Pay Now' button in the Action Flow Editor. After presentPaymentSheet() completes without error, write the transaction record (PaymentIntent ID, seller ID, amount, status 'pending') to Firestore or Supabase from the app — you'll update it to 'succeeded' when the webhook fires.

1// Custom Action: ShowPaymentSheet (flutter_stripe ^10.1.1)
2import 'package:flutter_stripe/flutter_stripe.dart';
3
4Future<bool> showPaymentSheet(
5  String clientSecret,
6  String publishableKey,
7) async {
8  Stripe.publishableKey = publishableKey;
9  await Stripe.instance.initPaymentSheet(
10    paymentSheetParameters: SetupPaymentSheetParameters(
11      paymentIntentClientSecret: clientSecret,
12      merchantDisplayName: 'Your Platform Name',
13    ),
14  );
15  await Stripe.instance.presentPaymentSheet();
16  return true; // payment collected
17}

Stripe sends asynchronous webhook events to your backend when a payment succeeds (payment_intent.succeeded), when funds transfer to the seller (transfer.created), and when a connected account's status changes (account.updated). FlutterFlow cannot receive webhooks directly — they require a persistent HTTPS endpoint. Add a webhook handler to your Firebase or Supabase function. Register its URL in the Stripe Dashboard under Developers → Webhooks → Add endpoint. In the handler, verify the webhook signature using stripe.webhooks.constructEvent(body, signature, webhookSecret) — the webhookSecret is the whsec_* value Stripe shows you when you add the endpoint. On a verified payment_intent.succeeded event, update the transaction document in Firestore or the row in Supabase from status 'pending' to 'succeeded'. In FlutterFlow, set up a Firestore stream listener or a Supabase realtime subscription on the transactions table filtered to the current user. Bind the status field to a Text widget on the seller dashboard — it updates automatically when the webhook fires. For the buyer, show an 'Order confirmed' screen once the stream emits 'succeeded'. Test the entire flow in Stripe's test mode using test card 4242 4242 4242 4242 with any future expiry and CVC before switching to live mode.

1// Webhook handler addition to the Firebase Cloud Function (index.js)
2app.post('/webhook', express.raw({ type: 'application/json' }), async (req, res) => {
3  const sig = req.headers['stripe-signature'];
4  let event;
5  try {
6    event = stripe.webhooks.constructEvent(
7      req.body,
8      sig,
9      functions.config().stripe.webhook_secret
10    );
11  } catch (err) {
12    return res.status(400).send(`Webhook Error: ${err.message}`);
13  }
14  if (event.type === 'payment_intent.succeeded') {
15    const pi = event.data.object;
16    await admin.firestore()
17      .collection('transactions')
18      .doc(pi.id)
19      .update({ status: 'succeeded', settled_at: new Date() });
20  }
21  res.json({ received: true });
22});