WeWeb Marketplace: Build a Multi-Vendor Platform with Stripe Connect

All database work happens in the Supabase Dashboard SQL Editor, not in WeWeb. Your marketplace needs these core tables: vendors (id, user_id references auth.users, business_name, description, stripe_account_id, onboarding_complete, commission_rate), products (id, vendor_id, title, description, price, inventory_count, images array, category, status), orders (id, buyer_id, total_amount, platform_fee, stripe_payment_intent_id, status), order_items (id, order_id, product_id, vendor_id, quantity, unit_price, vendor_payout_amount). Enable RLS on all tables. The core security principle: vendors can only read and write their own products and see only their own orders. Buyers can read all active products but only their own orders. Admins (using a service role key via Edge Functions) can read everything.

1-- Injection point: Supabase Dashboard → SQL Editor
2-- Core marketplace schema
3
4CREATE TABLE public.vendors (
5  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
6  user_id UUID REFERENCES auth.users(id) UNIQUE NOT NULL,
7  business_name TEXT NOT NULL,
8  description TEXT,
9  stripe_account_id TEXT,
10  onboarding_complete BOOLEAN DEFAULT FALSE,
11  commission_rate NUMERIC(4,2) DEFAULT 10.00,
12  created_at TIMESTAMPTZ DEFAULT NOW()
13);
14
15CREATE TABLE public.products (
16  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
17  vendor_id UUID REFERENCES public.vendors(id) NOT NULL,
18  title TEXT NOT NULL,
19  description TEXT,
20  price NUMERIC(10,2) NOT NULL,
21  inventory_count INTEGER DEFAULT 0,
22  category TEXT,
23  status TEXT DEFAULT 'active' CHECK (status IN ('active', 'inactive', 'draft')),
24  created_at TIMESTAMPTZ DEFAULT NOW()
25);
26
27ALTER TABLE public.vendors ENABLE ROW LEVEL SECURITY;
28ALTER TABLE public.products ENABLE ROW LEVEL SECURITY;
29
30-- Vendors manage own profile
31CREATE POLICY "Vendors manage own profile"
32ON public.vendors FOR ALL
33USING ((SELECT auth.uid()) = user_id);
34
35-- All authenticated users can view vendor profiles
36CREATE POLICY "Public vendor profiles"
37ON public.vendors FOR SELECT
38USING (TRUE);
39
40-- Products: public read for active, vendor write for own
41CREATE POLICY "Public can view active products"
42ON public.products FOR SELECT
43USING (status = 'active');
44
45CREATE POLICY "Vendors manage own products"
46ON public.products FOR ALL
47USING ((SELECT auth.uid()) = (SELECT user_id FROM vendors WHERE id = vendor_id));

In WeWeb, navigate to Plugins → Authentication → Supabase Auth → click Generate to create the roles and users_roles tables in Supabase. Create three roles in the Supabase Dashboard: go to the roles table (created by WeWeb's Generate button) and insert rows for 'buyer', 'seller', and 'admin'. In WeWeb, navigate to the User Groups panel (look for Users icon in left sidebar or in Plugins → Authentication settings). Create three User Groups: 'Buyers' (condition: user has role 'buyer'), 'Sellers' (condition: user has role 'seller'), 'Admins' (condition: user has role 'admin'). Now configure page access: for your Vendor Dashboard page, go to Page settings → Access control → Restrict to User Groups → select Sellers and Admins. For your Admin panel page, restrict to Admins only. The buyer-facing marketplace pages (product listing, cart) can remain public or require login.

Create a new page named 'Marketplace' in WeWeb. In the Data panel, create a collection named 'products' connected to your Supabase products table with filter status = 'active'. Create page-level variables: 'searchQuery' (Text), 'selectedCategory' (Text), 'cartItems' (Array, app-level so it persists across pages). Add a search Input element at the top of the page — bind its On input workflow to change the 'searchQuery' variable and trigger a collection refetch with the search filter applied. Add a Select element for category filtering. Below, add a Container set to 'Repeat items' bound to collections['products'].data. Design the product card template inside this container: product image (bound to item.images[0]), title (item.title), price ('$' + item.price), and an 'Add to Cart' button. The Add to Cart button's On click workflow: Change variable value → append to cartItems array → push { productId: item.id, title: item.title, price: item.price, quantity: 1, vendorId: item.vendor_id }.

Create a Cart page. Bind a repeating container to the cartItems app variable. Add quantity increment/decrement buttons with On click workflows that use Change variable value → update the specific item's quantity in the cartItems array (use a map formula to update the matching item). Add a Remove button that filters the item out of cartItems. Show order total using a formula: reduce(cartItems, (sum, item) => sum + (item.price * item.quantity), 0). The Checkout button triggers a Supabase Edge Function (rather than direct Stripe from WeWeb) because Stripe Connect checkout requires server-side session creation. In the On click workflow: Supabase → Invoke Edge Function → 'create-checkout-session' with body: { items: cartItems, buyerId: user.id }. The Edge Function creates a Stripe Checkout Session with line items and Stripe Connect transfer data, then returns the session URL. Follow with a Navigate action using the returned URL to redirect to Stripe.

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
11Deno.serve(async (req) => {
12  const { items, buyerId } = await req.json();
13  const origin = req.headers.get('origin') || 'https://yourapp.com';
14
15  // Group items by vendor for split payments
16  const vendorGroups = items.reduce((groups, item) => {
17    if (!groups[item.vendorId]) groups[item.vendorId] = [];
18    groups[item.vendorId].push(item);
19    return groups;
20  }, {});
21
22  // For simplicity: process first vendor (multi-vendor checkout needs Stripe Transfer Groups)
23  const lineItems = items.map(item => ({
24    price_data: {
25      currency: 'usd',
26      product_data: { name: item.title },
27      unit_amount: Math.round(item.price * 100)
28    },
29    quantity: item.quantity
30  }));
31
32  const session = await stripe.checkout.sessions.create({
33    mode: 'payment',
34    line_items: lineItems,
35    success_url: `${origin}/order-success?session_id={CHECKOUT_SESSION_ID}`,
36    cancel_url: `${origin}/cart`,
37    metadata: { buyer_id: buyerId, items: JSON.stringify(items) }
38  });
39
40  return new Response(JSON.stringify({ url: session.url }), {
41    headers: { 'Content-Type': 'application/json' }
42  });
43});

Create a 'Vendor Registration' page restricted to logged-in users. The registration form collects business_name and description. On submit workflow: Action 1 → Supabase Database Insert → vendors table → insert row with user_id and business details. Action 2 → Invoke Supabase Edge Function → 'create-stripe-connect-account' with the user's email. This Edge Function calls stripe.accounts.create({ type: 'express', email }) and returns an account link URL for Stripe's hosted onboarding. Action 3 → Navigate to the returned Stripe Connect onboarding URL. When vendors complete Stripe onboarding, Stripe redirects to your return_url — set this to a WeWeb page named 'vendor-onboarding-complete'. On that page's On page load workflow, invoke another Edge Function that retrieves the account status and updates the vendor's onboarding_complete field and stripe_account_id in Supabase.

Create a 'Vendor Dashboard' page with access restricted to the Sellers User Group. In the Data panel, create a 'myProducts' collection: Supabase → products table → filter vendor_id equals the current user's vendor ID. To get the vendor ID: create a 'myVendor' collection pointing to the vendors table filtered by user_id equals the authenticated user's ID. Use myVendor.data[0].id as the vendor_id filter for myProducts. Add a DataGrid element bound to myProducts.data showing all vendor's products. Add an 'Add Product' button that opens a popup with a product creation form. The form's submit workflow calls Supabase Database Insert → products table → include vendor_id from myVendor.data[0].id. Add an orders DataGrid showing only order_items where vendor_id matches — create an 'myOrders' Supabase collection with the vendor_id filter applied.

Create an 'Admin' page restricted to the Admins User Group. In the Data panel, create collections: 'allOrders' (Supabase orders table, no filter — admin sees everything), 'allVendors' (vendors table, no filter), 'platformRevenue' (Supabase view or RPC that sums platform fees). Add a DataGrid showing all orders with vendor name, order amount, platform fee, and payout status. Add a 'Mark Paid' button in each row's workflow that updates the order's payout_status to 'paid'. Use a formula to compute total platform revenue: reduce(collections['allOrders'].data, (sum, o) => sum + o.platform_fee, 0). Display this as a KPI card at the top. Security note: admin collections rely on Supabase RLS policies using the service role. Add an Edge Function for any bulk admin operations rather than calling Supabase directly from WeWeb with the anon key — admin operations should use the service role key which must never be exposed client-side.