Paddle Billing Next.js Starter Kit

The Paddle Billing Next.js Starter Kit is a Boilerplate for building a subscription SaaS product on Next.js, with Paddle Billing as the merchant of record for payments, taxes, and billing.

What is the Paddle Billing Next.js Starter Kit?

The Paddle Billing Next.js Starter Kit is a publicly available GitHub repository from PaddleHQ that gives you a complete starting point for a Next.js SaaS app integrated with Paddle Billing. It includes a three-tier pricing page localized for over 200 markets via Paddle.js, a checkout built with Paddle Checkout, and ready-made subscription management screens. The app is deployed on Vercel, uses Supabase for authentication and user management, and is styled with Tailwind CSS and shadcn/ui components. A live demo is hosted at https://paddle-billing.vercel.app/.

Key Features

• Localized three-tier pricing page — Built with Paddle.js, it automatically displays prices for over 200 markets without manual currency conversion.
• Paddle Checkout integration — Customers pay through a self-serve checkout that supports cards, Apple Pay, Google Pay, and PayPal.
• Supabase authentication — User sign-up, sign-in, and account management are handled by Supabase, pre-integrated into the app.
• Subscription management screens — Ready-made pages show customers their current plan, itemized product charges, next payment date, and payment history.
• Webhook data synchronization — Paddle webhooks automatically sync customer and subscription data into your Supabase database.
• Environment variable configuration — Four environment variables connect the app to your Paddle sandbox or production account: PADDLE_API_KEY, NEXT_PUBLIC_PADDLE_CLIENT_TOKEN, PADDLE_NOTIFICATION_WEBHOOK_SECRET, and NEXT_PUBLIC_PADDLE_ENV.

Who is this starter kit for?

• SaaS founders and product owners — Launch a subscription business quickly with billing, tax, and payment compliance handled by Paddle, instead of building them from scratch.
• Next.js developers — Get a project structure with the Paddle Billing API, Supabase auth, and Vercel deployment pre-configured, so you can focus on your product logic.
• Teams migrating from Paddle Classic — Use this kit to rebuild your subscription integration on Paddle Billing, which is the version this starter kit supports exclusively.

What can you do with it?

• Start collecting subscription payments — Deploy the kit, create products and prices in Paddle, and go live with a compliant payment flow.
• Test the full subscription lifecycle — Use the sandbox account and test card details provided (for example, 4242 4242 4242 4242) to verify checkout, webhook sync, and customer billing pages.
• Customize pricing plans — Edit the pricing-tier.ts constants file to define your own plan names, prices, and billing intervals.

How does it work?

The setup flow is documented in the README. You deploy the repository to Vercel, which creates a new project and integrates with Supabase to create the required database schemas. Then you set the Paddle environment variables in Vercel, create products and prices in the Paddle dashboard, and paste your price IDs into pricing-tier.ts. Finally, you add your Vercel domain to Paddle for website approval and run a test checkout with sandbox credentials.

FAQ

Does this starter kit work with Paddle Classic?

No. It is built specifically for Paddle Billing. Paddle Classic users should refer to the Paddle Classic developer documentation instead.

What Node.js version do I need?

Node.js version 20 or later is recommended for local development, along with npm, Yarn, or pnpm as your package manager.

How do I get the required Paddle credentials?

Create an API key and client-side token in Paddle under Developer tools > Authentication. Create a webhook secret under Developer tools > Notifications. Set these values as environment variables in Vercel.

Can I see a live example?

Yes, the Paddle team hosts a demo at https://paddle-billing.vercel.app/ showing the pricing page and subscription management screens.

Where can I get help?

Contact the Paddle developer experience team at [email protected].