Scaffold the Next.js app with Clerk

~15 min

Create a Next.js project and integrate Clerk for authentication.

1. Create a new Next.js project: npx create-next-app@latest marketplace --typescript --tailwind --app
2. Install Clerk: npm install @clerk/nextjs
3. Create a Clerk application at clerk.com and get your API keys
4. Add Clerk keys to .env.local
5. Wrap your app with in the root layout
6. Add Clerk middleware to protect routes

npx create-next-app@latest marketplace --typescript --tailwind --app
cd marketplace
npm install @clerk/nextjs

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Set up the Supabase database schema

~20 min

Create the database tables for listings, orders, and seller profiles.

1. Create a Supabase project and install @supabase/supabase-js
2. Create a sellers table (user_id, stripe_account_id, store_name, approved)
3. Create a listings table (seller_id, title, description, price, images, status)
4. Create an orders table (buyer_id, listing_id, amount, stripe_payment_id, status)
5. Enable Row Level Security on all tables
6. Write RLS policies: sellers can CRUD their own listings, buyers can read all active listings

CREATE TABLE sellers (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id TEXT UNIQUE NOT NULL,
  stripe_account_id TEXT,
  store_name TEXT NOT NULL,
  approved BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE listings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  seller_id UUID REFERENCES sellers(id),
  title TEXT NOT NULL,
  description TEXT,
  price INTEGER NOT NULL,
  images TEXT[],
  status TEXT DEFAULT 'active',
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE orders (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  buyer_id TEXT NOT NULL,
  listing_id UUID REFERENCES listings(id),
  amount INTEGER NOT NULL,
  stripe_payment_id TEXT,
  status TEXT DEFAULT 'pending',
  created_at TIMESTAMPTZ DEFAULT now()
);

Set up Stripe Connect for split payments

~30 min

Enable Stripe Connect so sellers can receive payments with your platform taking a fee.

1. Enable Connect in your Stripe Dashboard under Connect → Settings
2. Choose "Express" onboarding (Stripe handles seller KYC)
3. Install Stripe: npm install stripe
4. Create an API route to generate seller onboarding links
5. Create a webhook handler for account.updated events to track seller verification
6. Set your platform fee percentage (e.g. 10%)

import Stripe from 'stripe'
import { NextResponse } from 'next/server'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: Request) {
  const { sellerId } = await req.json()
  const account = await stripe.accounts.create({ type: 'express' })
  const link = await stripe.accountLinks.create({
    account: account.id,
    refresh_url: `${process.env.NEXT_PUBLIC_URL}/seller/onboard`,
    return_url: `${process.env.NEXT_PUBLIC_URL}/seller/dashboard`,
    type: 'account_onboarding'
  })
  // Save account.id to the seller's record in Supabase
  return NextResponse.json({ url: link.url })
}

Build the marketplace checkout

~30 min

Create a checkout flow that splits payments between your platform and the seller.

1. Create a checkout API route that creates a Stripe Checkout Session with payment_intent_data.transfer_data
2. Set the application_fee_amount to your platform fee (e.g. 10% of the listing price)
3. Set transfer_data.destination to the seller's Stripe Connect account ID
4. Build a product detail page with a "Buy Now" button that calls your checkout API
5. Create success and cancel pages for post-checkout redirects

const session = await stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: [{
    price_data: {
      currency: 'usd',
      product_data: { name: listing.title },
      unit_amount: listing.price
    },
    quantity: 1
  }],
  payment_intent_data: {
    application_fee_amount: Math.round(listing.price * 0.10),
    transfer_data: { destination: seller.stripe_account_id }
  },
  success_url: `${process.env.NEXT_PUBLIC_URL}/orders/{CHECKOUT_SESSION_ID}`,
  cancel_url: `${process.env.NEXT_PUBLIC_URL}/listings/${listing.id}`
})

Deploy to Vercel

~15 min

Deploy your marketplace with all environment variables configured.

1. Push to GitHub and import into Vercel
2. Add all environment variables (Clerk, Supabase, Stripe keys)
3. Configure your Stripe webhook endpoint for production
4. Test a full buyer flow: browse → buy → seller gets paid
5. Test a full seller flow: onboard → list product → receive payment