WeWeb Membership and Subscription Sites with Stripe

In the Supabase Dashboard → SQL Editor, create a subscriptions table to track each user's plan status. This table is the source of truth for access control — Stripe is the payment source, but your database determines what content users can access. Required columns: id (uuid, primary key), user_id (uuid, references auth.users, unique), stripe_customer_id (text), stripe_subscription_id (text), plan_id (text — matches your Stripe Price IDs, e.g., 'price_basic', 'price_pro'), status (text — values: 'active', 'trialing', 'past_due', 'cancelled', 'none'), current_period_end (timestamptz), updated_at (timestamptz). Enable RLS: users can only read their own subscription row. The service role key (used in Edge Functions) can read and write all rows.

1-- Injection point: Supabase Dashboard → SQL Editor
2
3CREATE TABLE public.subscriptions (
4  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
5  user_id UUID REFERENCES auth.users(id) UNIQUE NOT NULL,
6  stripe_customer_id TEXT,
7  stripe_subscription_id TEXT,
8  plan_id TEXT DEFAULT 'none',
9  status TEXT DEFAULT 'none'
10    CHECK (status IN ('active', 'trialing', 'past_due', 'cancelled', 'none')),
11  current_period_end TIMESTAMPTZ,
12  updated_at TIMESTAMPTZ DEFAULT NOW()
13);
14
15ALTER TABLE public.subscriptions ENABLE ROW LEVEL SECURITY;
16
17-- Users can read their own subscription
18CREATE POLICY "Users read own subscription"
19ON public.subscriptions FOR SELECT
20USING ((SELECT auth.uid()) = user_id);
21
22-- Only service role can write (via Edge Functions)
23-- No INSERT/UPDATE policy for anon/authenticated role intentionally
24
25-- Insert empty subscription row when user signs up
26CREATE OR REPLACE FUNCTION public.handle_new_user()
27RETURNS TRIGGER LANGUAGE plpgsql SECURITY DEFINER AS $$
28BEGIN
29  INSERT INTO public.subscriptions (user_id)
30  VALUES (NEW.id)
31  ON CONFLICT (user_id) DO NOTHING;
32  RETURN NEW;
33END;
34$$;
35
36CREATE TRIGGER on_auth_user_created
37AFTER INSERT ON auth.users
38FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

In WeWeb, navigate to Plugins → Authentication → Supabase Auth → click Generate if you haven't already (creates the roles and users_roles tables). For membership, you will not use the standard roles table — instead, use subscription status from the subscriptions table. However, WeWeb's User Groups require roles from the auth system. The cleanest approach: when a subscription becomes active, also update the user's role in the users_roles table to 'member' (or 'pro_member', 'basic_member' etc.). Do this from your Stripe webhook Edge Function. In WeWeb, go to the Users section of Plugins → Authentication panel and create User Groups: 'Free Users' (no roles or role = 'free'), 'Basic Members' (role = 'basic_member'), 'Pro Members' (role = 'pro_member'). Navigate to each gated page's settings → Page settings → Access → set Restrict access → select the appropriate member group.

Create a 'Pricing' page accessible to everyone (no access restriction). Design three pricing tier cards side by side (free, basic at $9/mo, pro at $29/mo) using a horizontal flexbox container. Each card has: plan name heading, price, feature list (Text elements with checkmarks), and a Subscribe button. For the free tier, bind the button to a Navigate action pointing to the signup page. For paid tiers, the Subscribe button's On click workflow calls a Supabase Edge Function 'create-checkout-session' passing: plan_id (the Stripe Price ID), user_id, user_email, and return URLs. The Edge Function creates or retrieves the Stripe customer, creates a Checkout Session in 'subscription' mode, and returns the session URL. WeWeb's workflow then navigates to that URL. Add a Conditional Rendering check: if the user is already on a given plan, show 'Current Plan' text instead of the Subscribe button.

In Supabase Dashboard → Edge Functions → New Function, create 'create-checkout-session'. Add your Stripe secret key as an Edge Function secret: Supabase Dashboard → Settings → Edge Functions → Secrets → add STRIPE_SECRET_KEY. Also add STRIPE_WEBHOOK_SECRET for Step 5. This function receives plan_id, user_id, and user_email, creates or retrieves a Stripe customer, creates a Checkout Session with mode: 'subscription', and returns the session URL. The success_url should include ?session_id={CHECKOUT_SESSION_ID} so you can look up the subscription after redirect. Store the Edge Function URL — you will call it from WeWeb workflows via the Supabase Invoke Edge Function action.

1// Injection point: Supabase Edge Function → supabase/functions/create-checkout-session/index.ts
2import Stripe from 'https://esm.sh/stripe@14';
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
4
5const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!);
6const supabase = createClient(
7  Deno.env.get('SUPABASE_URL')!,
8  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
9);
10
11const corsHeaders = {
12  'Access-Control-Allow-Origin': '*',
13  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type'
14};
15
16Deno.serve(async (req) => {
17  if (req.method === 'OPTIONS') {
18    return new Response('ok', { headers: corsHeaders });
19  }
20
21  const { plan_id, user_id, user_email, success_url, cancel_url } = await req.json();
22
23  // Get or create Stripe customer
24  const { data: sub } = await supabase
25    .from('subscriptions')
26    .select('stripe_customer_id')
27    .eq('user_id', user_id)
28    .single();
29
30  let customerId = sub?.stripe_customer_id;
31  if (!customerId) {
32    const customer = await stripe.customers.create({ email: user_email, metadata: { user_id } });
33    customerId = customer.id;
34    await supabase.from('subscriptions').update({ stripe_customer_id: customerId }).eq('user_id', user_id);
35  }
36
37  const session = await stripe.checkout.sessions.create({
38    customer: customerId,
39    mode: 'subscription',
40    line_items: [{ price: plan_id, quantity: 1 }],
41    success_url: success_url + '?session_id={CHECKOUT_SESSION_ID}',
42    cancel_url,
43    metadata: { user_id }
44  });
45
46  return new Response(JSON.stringify({ url: session.url }), {
47    headers: { ...corsHeaders, 'Content-Type': 'application/json' }
48  });
49});

This is the most critical step. Create a second Edge Function named 'stripe-webhook'. Register this as a webhook endpoint in your Stripe Dashboard: Developers → Webhooks → Add endpoint → URL: your Edge Function URL (format: https://[project-ref].supabase.co/functions/v1/stripe-webhook). Subscribe to events: customer.subscription.created, customer.subscription.updated, customer.subscription.deleted, invoice.payment_failed. This function receives Stripe events, verifies the signature using the STRIPE_WEBHOOK_SECRET, and updates the subscriptions table accordingly. When status becomes 'active' or 'trialing', it also updates the user's role in users_roles to grant access. When status becomes 'cancelled' or 'past_due', it removes the role. WeWeb automatically picks up the role change on the next page load because the Supabase Auth plugin re-reads user data.

1// Injection point: Supabase Edge Function → supabase/functions/stripe-webhook/index.ts
2import Stripe from 'https://esm.sh/stripe@14';
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
4
5const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!);
6const supabase = createClient(
7  Deno.env.get('SUPABASE_URL')!,
8  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
9);
10
11Deno.serve(async (req) => {
12  const signature = req.headers.get('stripe-signature')!;
13  const body = await req.text();
14
15  let event: Stripe.Event;
16  try {
17    event = await stripe.webhooks.constructEventAsync(
18      body, signature, Deno.env.get('STRIPE_WEBHOOK_SECRET')!
19    );
20  } catch (err) {
21    return new Response(`Webhook signature failed: ${err.message}`, { status: 400 });
22  }
23
24  const subscription = event.data.object as Stripe.Subscription;
25  const userId = subscription.metadata?.user_id
26    || (await supabase.from('subscriptions').select('user_id')
27        .eq('stripe_customer_id', subscription.customer).single()).data?.user_id;
28
29  if (!userId) return new Response('User not found', { status: 400 });
30
31  const status = subscription.status;
32  const planId = subscription.items.data[0]?.price?.id || 'none';
33  const periodEnd = new Date(subscription.current_period_end * 1000).toISOString();
34
35  await supabase.from('subscriptions').upsert({
36    user_id: userId,
37    stripe_subscription_id: subscription.id,
38    plan_id: planId,
39    status,
40    current_period_end: periodEnd,
41    updated_at: new Date().toISOString()
42  }, { onConflict: 'user_id' });
43
44  return new Response(JSON.stringify({ received: true }), { status: 200 });
45});

Create a 'Member Portal' page accessible only to users with active subscriptions. In the Data panel, create a 'mySubscription' collection: Supabase → subscriptions table → filter user_id = plugins['supabase-auth'].user.id. Add elements showing: plan name (bound to mySubscription.data[0].plan_id), status badge (color-coded by status: green for 'active', yellow for 'past_due', grey for 'cancelled'), and next billing date (mySubscription.data[0].current_period_end, formatted as a date). Add a 'Manage Billing' button whose On click workflow invokes a 'create-portal-session' Edge Function that calls stripe.billingPortal.sessions.create({ customer: stripeCustomerId, return_url }) and navigates to the returned URL. The Stripe Customer Portal allows users to update payment methods, download invoices, and cancel their subscription — all handled by Stripe's hosted UI without any additional WeWeb work.

For sites with multiple subscription tiers (basic vs pro), use Conditional Rendering to show/hide content blocks based on the user's plan. Create a page-level variable 'userPlan' on each premium page. On page load workflow: read mySubscription.data[0].plan_id and set userPlan. For pro-only content sections, set Conditional Rendering condition to: userPlan == 'price_pro_monthly'. For content that requires only an active subscription (any paid plan): userPlan != 'none' AND collections['mySubscription'].data[0].status == 'active'. For users on a lower tier trying to access pro content, show a teaser container (the first 20% of content) with a locked overlay. The locked overlay has a Conditional Rendering condition that is the inverse: NOT (userPlan == 'price_pro_monthly'). Add an 'Upgrade to Pro' button on the overlay. Security reminder: this is UX-layer enforcement — combine with Supabase RLS to prevent the API from returning pro-only data to basic users.