Stripe-Supabase Subscription Access Setup

I need an end-to-end Stripe subscription flow wired into my existing React SaaS web app that runs on Supabase. Users must be able to purchase or upgrade the three plans I already have in Stripe—Basic, Standard and Premium—through Checkout and manage them later in the Billing Portal. This is NOT a WordPress/PHP job. Strong experience with Stripe subscriptions, webhooks, and Supabase (PostgreSQL + RLS) is required. Once a payment event fires, a webhook should update Supabase so the user’s record immediately reflects the correct status. From there, the app must enforce access in three ways at once: • Role-based (e.g., admin, editor, viewer) • Feature-based (turning individual features on/off) • Tier-based access by plan, where Basic, Standard and Premium control available modules, limits and subscription status. I’ll provide the Stripe products, Supabase project, and codebase access. Your job is to: 1. Wire up Checkout, Billing Portal and webhooks. 2. Create or adjust Supabase tables, policies and RLS rules to store subscription and role data securely. 3. Expose that data to the React front-end via Supabase client helpers and protect routes/components accordingly. 4. Ship concise setup docs so I can replicate the flow in staging and production. Acceptance criteria • Access must be enforced server-side (via Supabase RLS) and not rely solely on front-end checks. • Access must be enforced server-side (via Supabase RLS) and not rely solely on front-end checks. • Successful purchase, upgrade, downgrade and cancel flows across all three plans. • Instant permission changes after webhook processing (Stripe → Supabase update must be the single source of truth, tested with Stripe CLI). • Front-end hides or reveals features exactly as defined by roles, features and tiers. • No unauthorised API or database access when subscriptions lapse. Tech on the table: Stripe, Supabase (Auth, DB, Edge Functions), React, TypeScript and preferably Next.js-style middleware, though plain CRA logic is fine if you keep it modular. If this is in your wheelhouse, tell me how you would structure the Stripe webhook handler, Supabase schema, and RLS policies. Marketing site and app integration: The CPQ marketing site is built in WordPress/Elementor and the CPQ web app is separate. I need the subscription flow to connect both properly. Users should be able to: View plans on the WordPress marketing site Click a plan button Go through Stripe Checkout Be redirected to the CPQ app after payment/trial signup Log in or create an account Have their Supabase user record matched to the correct Stripe subscription and plan Access the correct CPQ features based on their plan Please allow for clear staging and production setup, including separate Stripe test/live keys, redirect URLs, webhook endpoints, and environment variables. Also please quote the Stripe/Supabase/app integration and the WordPress marketing site updates separately. Additional (minor) website updates (WordPress): In addition to the SaaS integration, I need a few small updates on the CPQ marketing site (WordPress/Elementor): • Replace existing pricing table to reflect Basic, Standard and Premium plans • Fix internal links/navigation issues • Rename a few pages and adjust menu labels • Minor layout/content clean-up where required These are straightforward changes and should be scoped separately from the core integration work. Please briefly describe your experience with Stripe webhooks and Supabase RLS.

Project ID: 40406434