🚀 How to Use FlutterFlow, Supabase Auth, and Stripe Payment (With Apple Pay & Google Pay Support)

🚀 Complete Guide: Stripe Payments with Supabase Auth in FlutterFlow (Including Apple Pay & Google Pay)

If you're building an app with FlutterFlow, want to handle authentication with Supabase, and integrate secure payments via Stripe, this guide shows exactly how I did it — including Apple Pay, Google Pay, and using Supabase Edge Functions.

📊 Tech Stack

Supabase: Auth + database
Stripe: Payments (via Flutter SDK)
Edge Functions: Supabase serverless functions for secure backend logic

✅ Step 1: Setup Supabase Auth in FlutterFlow

Go to FlutterFlow > Settings > Authentication
Choose Supabase

✅ Step 2: Setup Stripe Edge Function in Supabase

Create an Edge Function named initStripePayment. Here's a working version:

import { serve } from "https://deno.land/std/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
import Stripe from "https://esm.sh/[email protected]";

const stripe = new Stripe(Deno.env.get("STRIPE_SECRET_KEY")!, {
  apiVersion: "2020-08-27",
});

serve(async (req) => {
  const supabase = createClient(
    Deno.env.get("SUPA_URL")!,
    Deno.env.get("SUPA_ANON_KEY")!,
    {
      global: {
        headers: { Authorization: req.headers.get("Authorization")! },
      },
    }
  );

  const {
    data: { user },
    error,
  } = await supabase.auth.getUser();

  if (error || !user) {
    return new Response(JSON.stringify({ success: false, error: "Unauthorized" }), { status: 401 });
  }

  const body = await req.json();
  const customer = await stripe.customers.create({ email: body.email });

  const ephemeralKey = await stripe.ephemeralKeys.create(
    { customer: customer.id },
    { apiVersion: "2020-08-27" }
  );

  const paymentIntent = await stripe.paymentIntents.create({
    amount: body.amount,
    currency: body.currency,
    customer: customer.id,
    description: body.description,
  });

  return new Response(JSON.stringify({
    success: true,
    paymentId: paymentIntent.id,
    paymentIntent: paymentIntent.client_secret,
    ephemeralKey: ephemeralKey.secret,
    customer: customer.id,
  }), { status: 200 });
});

Add the environment variables:

SUPA_URL=https://your-project.supabase.co
SUPA_ANON_KEY=your-anon-key
STRIPE_SECRET_KEY=your-secret-key

✅ Step 3: Custom Actions in FlutterFlow

1. Stripe Init Action (`initStripe`)

Call this once in main.dart (via Custom Action):

import 'package:flutter_stripe/flutter_stripe.dart';

Future initStripe() async {
  Stripe.publishableKey = 'pk_test_...';
  Stripe.merchantIdentifier = 'merchant.com.mycompany.hippomarket';
  await Stripe.instance.applySettings();
}

2. Stripe Payment Action (`universalStripePayment`)

Future universalStripePayment(
  BuildContext context,
  String supabaseFunctionUrl,
  String jwt,
  int amount,
  String currency,
  String email,
  String name,
  String description,
  bool isProd,
  String merchantName,
  bool allowGooglePay,
  bool allowApplePay,
  String? buttonColorHex,
  String? buttonTextColorHex,
) async {
  try {
    final response = await http.post(
      Uri.parse(supabaseFunctionUrl),
      headers: {
        'Authorization': 'Bearer $jwt',
        'Content-Type': 'application/json',
      },
      body: jsonEncode({
        'amount': amount,
        'currency': currency,
        'email': email,
        'name': name,
        'description': description,
        'isProd': isProd,
      }),
    );

    final data = jsonDecode(response.body);
    if (!data['success']) return false;

    if (allowApplePay) {
      // need to follow the next step or comment this 
      Stripe.merchantIdentifier = 'merchant.com.mycompany.appname'; 
     } else {
      Stripe.merchantIdentifier = '';
     }

    await Stripe.instance.initPaymentSheet(
      paymentSheetParameters: SetupPaymentSheetParameters(
        paymentIntentClientSecret: data['paymentIntent'],
        customerEphemeralKeySecret: data['ephemeralKey'],
        customerId: data['customer'],
        merchantDisplayName: merchantName,
        googlePay: allowGooglePay ? PaymentSheetGooglePay(
          merchantCountryCode: 'FR', currencyCode: currency, testEnv: !isProd) : null,
        applePay: allowApplePay ? PaymentSheetApplePay(merchantCountryCode: 'FR') : null,
        appearance: PaymentSheetAppearance(
          primaryButton: PaymentSheetPrimaryButtonAppearance(
            colors: PaymentSheetPrimaryButtonTheme(
              light: PaymentSheetPrimaryButtonThemeColors(
                background: _hexToColor(buttonColorHex),
                text: _hexToColor(buttonTextColorHex),
              ),
              dark: PaymentSheetPrimaryButtonThemeColors(
                background: _hexToColor(buttonColorHex),
                text: _hexToColor(buttonTextColorHex),
              ),
            ),
          ),
        ),
      ),
    );

    await Stripe.instance.presentPaymentSheet();
    return true;
  } catch (e) {
    print('Payment error: $e');
    return false;
  }
}

Color? _hexToColor(String? hex) {
  if (hex == null || hex.isEmpty) return null;
  hex = hex.replaceFirst('#', '');
  if (hex.length == 6) hex = 'FF$hex';
  return Color(int.parse(hex, radix: 16));
}

🚀 Enable Apple Pay (Optional but Powerful)

To set up Apple Pay, follow this FlutterFlow guide up to section 2.2: https://docs.flutterflow.io/integrations/payments/stripe/#2-apple-pay-setup-optional
Add this to your Runner.entitlements in FlutterFlow:

<key>com.apple.developer.in-app-payments</key>
<array>
  <string>merchant.com.mycompany.appname</string>
</array>

🚀 Call `universalStripePayment` to make a payment

If the function returns true, it means the payment was successful.

🎉 That's It!

You now have:

Supabase Auth managing login & token
Secure Stripe server-side function
Custom Stripe payment flow with Apple Pay / Google Pay support
A working Payment Sheet from inside FlutterFlow

Feel free to reach out to me at [email protected] if you have any questions.