Docs

New

Getting Started

Supabase

Authentication

Stripe

Stripe Checkout Integration with Framergenie

Framergenie makes it simple to accept payments in your Framer projects by connecting your Stripe Products with Supabase. Use our Checkout Button Component to trigger Stripe Checkout, then automatically update your Supabase user tier via webhooks to control access using variants.

Framergenie’s Stripe Checkout Button is fully integrated with Supabase. It tracks authenticated users securely and automatically upgrades their access level after a successful purchase.


Why Authentication Matters


The Stripe Checkout Button is only shown to logged-in users. This ensures:

  • The user’s Supabase Auth ID is injected into the Stripe Checkout session

  • That same ID is used as the client_reference in Stripe metadata

  • You can confidently upgrade the correct user in your Supabase users table after purchase


How the Flow Works


Step

What Happens

1

A logged-in user clicks the Checkout Button

2

Framergenie adds the user’s Supabase Auth ID into the Stripe session as client_reference_id

3

On successful payment, Stripe sends a webhook with that client_reference_id

4

Your system uses the ID to upgrade the user's tier in Supabase


What You’ll Need


  • A Stripe account

  • A Supabase project

  • Framergenie Stripe Checkout Button component

  • A tier column in your Supabase users table (e.g. free, basic, pro)


Setup Overview


Step

Task

1

Create a Product and Price in your Stripe Dashboard

2

Copy the Product ID, Price ID, and Stripe Publishable Key

3

Paste them into the Framergenie Checkout Button component

4

Ensure the user is authenticated before showing the button

5

Configure a Stripe webhook to trigger after checkout

6

Use Supabase Functions, Make.com, Zapier, or Pipedream to update users.tier


Configure Supabase User Table

Your users table must include a tier column to track the user’s access level.


Recommended values:
free  basic  pro


Setting Up a Stripe Webhook

After a successful checkout, Stripe should notify Supabase to update the user’s tier.


In Stripe:

  1. Go to Developers → Webhooks

  2. Add this endpoint:
    https://<your-supabase-project>.functions.supabase.co/stripe-webhook

  3. Listen for the following events:

    • checkout.session.completed

    • customer.subscription.updated

    • invoice.payment_succeeded

  4. In your Supabase Function (stripe-webhook), update the correct user record based on the metadata.


Pro Tip:
When creating the Checkout Session, add metadata like:
customer_reference: user.id and product_id: xyz


How to Use the Tier Switcher Component


  • Drop in the Tier Switcher from Framergenie

  • Set which variant (Free, Basic, Pro) should show specific content

  • The component reads the current user's tier from Supabase

  • Instantly displays the correct version of your UI


✅ Summary


Task

Description

Stripe Product

Create and copy price_id, product_id

Supabase Setup

Add tier column to the users table

Framergenie

Paste Stripe details into the Checkout Button

Supabase Function

On Stripe webhook, update the user’s tier

UI in Framer

Use Tier Switcher to show/hide content per plan


Optional: Use No-Code Automation Tools


You can use no-code tools to handle tier updates without writing any Supabase Functions yourself.


Tool

Use Case

Make.com

Trigger a scenario when Stripe checkout completes and call the Supabase API to update user.tier

Zapier

Use prebuilt Stripe → Supabase workflows to sync user tiers

Pipedream

Write logic to handle webhooks and update Supabase with REST


Best Practices


  • Use useSession() in Framer to get the current Supabase Auth user ID

  • Never show the Stripe button to guests or logged-out users

  • Always include a client_reference_id (user ID) in your Stripe session metadata

  • Automate tier updates using Supabase Functions or no-code tools like Make.com, Zapier, or Pipedream!


Example: Stripe checkout.session.completed Webhook Payload

Below is a real-world example of the webhook payload Stripe sends when a checkout session is completed. You can use this to map and extract user metadata (like Supabase Auth ID from client_reference_id) to upgrade user tiers.


{
  "id": "evt_1234567890abcdef",
  "object": "event",
  "api_version": "2023-08-16",
  "created": 1745114069,
  "type": "checkout.session.completed",
  "data": {
    "object": {
      "id": "cs_live_ABC1234567890xyz",
      "object": "checkout.session",
      "amount_total": 9900,
      "currency": "usd",
      "payment_status": "paid",
      "customer": "cus_ABC123XYZ456",
      "client_reference_id": "user-abc123-supabase-id",
      "payment_intent": "pi_1234567890abcdef",
      "livemode": true,
      "status": "complete",
      "metadata": {},
      "customer_details": {
        "email": "[email protected]",
        "name": "John Doe",
        "address": {
          "city": "Sample City",
          "country": "US",
          "line1": "123 Demo Street",
          "postal_code": "12345",
          "state": "NY"
        }
      }
    }
  }
}


Key Fields


Field

Description

client_reference_id

Use this to track the Supabase user.id

payment_status

Should be "paid" to confirm payment

customer_details.email

Email of the customer

amount_total

Charged amount in cents (e.g., 9900 = $99.00)


@Framergenie

@Framergenie