Stripe
Set up Stripe to enable secure payment processing in your Floot app.
By default on the paywall, Stripe is used for all platforms except mobile (Android & iOS), the latter uses RevenueCat. But you can still use Stripe on mobile by following this section.
Requirements
To set up Stripe for your Floot app, you will need:
- A Stripe account.
- The Stripe CLI installed on your machine.
Setup
Secret Key
Store your Stripe secret key securely in Supabase Vault by adding it to supabase/db_seeds/vault.sql.
Note: This file is git-ignored for your security. The secret is required by the Supabase Stripe Foreign Data Wrapper (FDW).
To find your secret key, go to your Stripe dashboard and copy the Secret Key.
-- Stripe secret key
SELECT vault.create_secret (
'sk_test_...', -- replace with your Stripe secret key
'STRIPE_SECRET_KEY',
'Stripe secret key used in Stripe Foreign Data Wrapper'
);Add the Stripe secret key to your Supabase local environment file.
STRIPE_SECRET_KEY="sk_test_..."Webhooks
Events Redirection
To handle Stripe webhooks, you need to set up event redirection to your Supabase instance. This allows your app to receive and process events from Stripe.
Here are the steps to receive Stripe events locally using the Stripe CLI.
Login to your Stripe account using the CLI.
stripe loginYou'll be prompted to open a browser window to complete the login process.
Redirect Stripe events to your Supabase local instance.
stripe listen --forward-to localhost:54321/functions/v1/stripe-webhookYou should see a message confirming that the webhook is set up and listening for events.
Ready! Your webhook signing secret is whsec_...You can now copy the whsec_... value and add it to your Supabase local environment file.
STRIPE_WEBHOOK_SECRET="whsec_..."Serve the Supabase functions locally to handle Stripe webhooks.
supabase functions serve --env-file .env.local --import-map ./functions/deno.json --no-verify-jwtEvents & Destination
Go to Stripe Dashboard → Developers (sidebar) → Webhooks → + Add destination → select these events:
| Event Name |
|---|
checkout.session.completed |
customer.created |
customer.deleted |
invoice.paid |
price.created |
price.deleted |
price.updated |
product.created |
product.deleted |
product.updated |
customer.subscription.created |
customer.subscription.deleted |
customer.subscription.updated |
→ Continue → Select Webhook endpoint as the destination type → Continue
Webhook Endpoint
In your Stripe Dashboard, set the Endpoint URL to your Supabase project's Stripe webhook:
https://<project-id>.supabase.co/functions/v1/stripe-webhookYou can find your exact webhook URL in the Supabase dashboard under
https://supabase.com/dashboard/project/<project-id>/functions → Details → Endpoint URL.
Tip
If you know your Supabase project ID, simply replace <project-id> in the URL above.
Webhook Secret
After creating the webhook, you will see a Signing secret. Copy this value and add it to your Supabase environment file: supabase/.env.
STRIPE_WEBHOOK_SECRET=Deployment
Make sure to deploy your Supabase functions after setting everything up.
supabase functions deploy stripe-webhook --no-verify-jwtEvents & Destination
Go to Stripe Dashboard → Developers (sidebar) → Webhooks → + Add destination → select these events:
| Event Name |
|---|
checkout.session.completed |
customer.created |
customer.deleted |
invoice.paid |
price.created |
price.deleted |
price.updated |
product.created |
product.deleted |
product.updated |
customer.subscription.created |
customer.subscription.deleted |
customer.subscription.updated |
→ Continue → Select Webhook endpoint as the destination type → Continue
Webhook Endpoint
In your Stripe Dashboard, set the Endpoint URL to this:
https://<your-domain>:54321/functions/v1/stripe-webhookWebhook Secret
After creating the webhook, you will see a Signing secret. Copy this value and add it to your Supabase environment file: supabase/.env.
STRIPE_WEBHOOK_SECRET=Deployment
Make sure to deploy your Supabase functions to your self-hosted instance after setting everything up.
App URL Scheme (optional)
Before You Proceed
Only mandatory if you did not provide a custom organization at Floot app creation! More info on that here! You can also skip this step if you are not using deep links (e.g., for web apps).
The app URL scheme enables users to be redirected back to your app via deep links after completing a Stripe payment outside of web platforms. This should match the deep linking scheme configured in your Flutter application.
# Your app URL scheme (e.g. "com.mycompany.app")
APP_URL_SCHEME=Products & prices
Important
Do not create customers from your Stripe dashboard, let the app take care of it, because it attaches useful metadata to them in the creation process.
Once you've completed the steps above, connect your Stripe account and create your products and prices. These will automatically sync with your local Supabase instance and appear in your app's paywall.
Here is a guide on how to manage products and prices in Stripe.
Handling business logic
Subscriptions
Subscription access is managed automatically based on the duration you configure when creating your offering. If you need to implement additional logic, such as awarding credits, coins, or other custom actions for subscribers, handle it in the following file: supabase/functions/stripe-webhook/_events/subscription_events.ts.
One time payments
To handle one-time payments, edit the file supabase/functions/stripe-webhook/_events/checkout_events.ts and follow the instructions marked with comments starting with // ! ....
Stripe on Mobile
To use Stripe on mobile, its quite simple, you just need to activate it in your environment file.
ENABLE_STRIPE_MOBILE=trueSince payments on mobile are processed through an external webview, ensure your app's URL scheme is properly configured to redirect users back to the app after payment. Refer to the app URL scheme setup in this section.