Flutterflow Stripe Integration with Supabase

Overview

This guide explains how to integrate Stripe with Supabase using Edge Functions in FlutterFlow. You’ll learn to create and deploy Edge Functions, generate Stripe Checkout links, and use them as APIs in FlutterFlow.

What are Edge Functions?

Edge functions are lightweight, serverless code snippets that run on servers near the user for low-latency performance and secure operations.

Common Use Cases

API Routing & Request Modification
Authentication & Authorization
A/B Testing
Media Optimization
Geolocation-based content
Dynamic Caching

Benefits

Low latency
Serverless scaling
Event-driven
Fast and secure

Pre-requisites

Stripe Account – Create here
Supabase Account – Sign up
Docker – Install
VS Code – Download
Node.js – Download

Creating the Edge Function

Set up your folder and run:

npm install supabase --save-dev 
npx supabase init 
npx supabase functions new stripe-checkout 
npx supabase login

Add Deno extension in VS Code and enable TCP in Docker settings.
Add Stripe integration logic in index.ts. Replace stripe_live_key, success_url, and cancel_url with your values.

Example API code snippet:

const session = await stripe.checkout.sessions.create({ payment_method_types: ["card"], ... }); 
return new Response(JSON.stringify({ url: session.url }), { status: 200, headers: corsHeaders });

Test locally using:
```
npx supabase start 
npx supabase functions serve
```
- Test URL: http://127.0.0.1:54321/functions/v1/stripe-checkout
- Add header: Authorization: Bearer YOUR_PUBLIC_KEY
Deploy live:
npx supabase functions deploy stripe-checkout --project-ref YOUR_PROJECT_ID

Conclusion

You've now created, tested, and deployed an Edge Function to integrate Stripe with Supabase in FlutterFlow. This setup enables seamless, secure, and scalable payment workflows in your app.

For more detail please visit the following site.
https://www.flutterflowdevs.com/blog/flutterflow-stripe-integration-with-supabase