{"id":24841633,"url":"https://github.com/devashish2024/paddle-nextjs-starter-kit","last_synced_at":"2025-07-26T13:39:36.178Z","repository":{"id":274792521,"uuid":"924080883","full_name":"devashish2024/paddle-nextjs-starter-kit","owner":"devashish2024","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-29T11:56:30.000Z","size":6483,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-29T15:15:30.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://paddle-nextjs-starter-kit-virid.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devashish2024.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-29T11:35:24.000Z","updated_at":"2025-01-29T11:56:33.000Z","dependencies_parsed_at":"2025-01-29T12:45:07.361Z","dependency_job_id":null,"html_url":"https://github.com/devashish2024/paddle-nextjs-starter-kit","commit_stats":null,"previous_names":["devashish2024/paddle-nextjs-starter-kit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devashish2024/paddle-nextjs-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devashish2024%2Fpaddle-nextjs-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devashish2024%2Fpaddle-nextjs-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devashish2024%2Fpaddle-nextjs-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devashish2024%2Fpaddle-nextjs-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devashish2024","download_url":"https://codeload.github.com/devashish2024/paddle-nextjs-starter-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devashish2024%2Fpaddle-nextjs-starter-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267175741,"owners_count":24047922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-31T07:20:14.825Z","updated_at":"2025-07-26T13:39:36.135Z","avatar_url":"https://github.com/devashish2024.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Paddle Billing subscriptions Next.js starter kit\n\n[Paddle Billing](https://www.paddle.com/billing?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit) is a complete digital product sales and subscription management platform, designed for modern software businesses. It helps you increase your revenue, retain customers, and scale your operations.\n\nThis is a complete starter kit that you can use to build and deploy a [Next.js](https://nextjs.org/) SaaS app powered by Paddle Billing.\n\n\u003e **Important:** This starter kit works with Paddle Billing. It does not support Paddle Classic. To work with Paddle Classic, see: [Paddle Classic API reference](https://developer.paddle.com/classic/api-reference/1384a288aca7a-api-reference?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit)\n\n## Demo\n\nSee it in action: [https://paddle-billing.vercel.app/](https://paddle-billing.vercel.app/?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit)\n\n![Illustration showing two screens from the starter kit. On the left is three-tier pricing page. On the right is a subscription page, showing an itemized list of products on the subscription, the next payment, and previous payments.](hero.png)\n\n## Features\n\n- Three-tier pricing page that's fully localized for 200+ markets using [Paddle.js](https://developer.paddle.com/paddlejs/overview).\n- An integrated checkout experience built with [Paddle Checkout](https://developer.paddle.com/concepts/sell/self-serve-checkout), with secure [optimized payments](https://developer.paddle.com/concepts/payment-methods/overview?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit) by card, Apple Pay, Google Pay, PayPal, and others.\n- User management and auth handled by [Supabase](https://supabase.com/).\n- Ready-made screens to let customers manage their payments and subscriptions.\n- Automatic syncing of customer and subscription data between Paddle and your app using [webhooks](https://developer.paddle.com/webhooks/overview?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit).\n\n## Stack\n\nThis starter kit is built with:\n\n- **Framework:** [Next.js](https://nextjs.org/)\n- **Auth and user management:** [Supabase](https://supabase.com/)\n- **Component library:** [Ant Design](https://ant.design/)\n- **CSS framework:** [Tailwind](https://tailwindcss.com/)\n- **Billing solution**: [Paddle Billing](https://www.paddle.com/billing?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit)\n\n## Prerequisites\n\n### Local dev environment\n\n- [Node.js](https://nodejs.org/en/download/package-manager/current) version \u003e `20`\n- [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), or [pnpm](https://pnpm.io/)\n\n### Accounts\n\n- [Vercel account](https://vercel.com/)\n- [Supabase account](https://supabase.com/)\n- [Paddle Billing](https://sandbox-login.paddle.com/signup?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit) — sandbox recommended\n\n## Step-by-step setup\n\n\u003e **Important:** If you're totally new to Next.js and Paddle, we have a more complete tutorial on our dev docs: [Build and deploy Next.js app with Vercel and Supabase](https://developer.paddle.com/build/nextjs-supabase-vercel-starter-kit?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit)\n\n### 1. Deploy on Vercel\n\n#### Start deploy\n\nClick this button to clone this repo and create a new project in your Vercel account:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FPaddleHQ%2Fpaddle-nextjs-starter-kit\u0026env=PADDLE_API_KEY,PADDLE_NOTIFICATION_WEBHOOK_SECRET,NEXT_PUBLIC_PADDLE_ENV,NEXT_PUBLIC_PADDLE_CLIENT_TOKEN\u0026integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6\u0026external-id=https%3A%2F%2Fgithub.com%2FPaddleHQ%2Fpaddle-nextjs-starter-kit%2Ftree%2Fmain)\n\nYou can also [create a new application manually](https://vercel.com/new).\n\n#### Configure project\n\nClick **Add** to walk through integrating with Supabase. You'll be asked to authenticate with Supabase and confirm creating the database schemas.\n\nThen, enter Paddle environment variables:\n\n| Variable                             | Used for                                                                                                                                                                                                                                                                   | How to get it                                                                                                                                                                                                                                                |\n| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `PADDLE_API_KEY`                     | An [API key](https://developer.paddle.com/api-reference/about/authentication?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit), used for interacting with Paddle data in the backend. For example, syncing customer and subscription data with Supabase.                 | Go to [**Paddle \u003e Developer tools \u003e Authentication**](https://sandbox-vendors.paddle.com/authentication-v2) and create a new API key.                                                                                                                        |\n| `NEXT_PUBLIC_PADDLE_CLIENT_TOKEN`    | A [client-side key](https://developer.paddle.com/api-reference/about/authentication?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit), used for interacting with Paddle in the frontend. For example, getting localized prices for pricing pages and opening a checkout. | Go to [**Paddle \u003e Developer tools \u003e Authentication**](https://sandbox-vendors.paddle.com/authentication-v2) and create a new client-side token.                                                                                                              |\n| `PADDLE_NOTIFICATION_WEBHOOK_SECRET` | A secret key used for verifying that [webhooks](https://developer.paddle.com/webhooks/notification-destinations?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit) came from Paddle and haven't been tampered with in transit. Important for security.                    | Go to [**Paddle \u003e Developer tools \u003e Notifications**](https://sandbox-vendors.paddle.com/notifications), create a new notification destination for your Vercel deploy URL + `/api/webhook`, then edit to copy the secret key. See below for more information. |\n| `NEXT_PUBLIC_PADDLE_ENV`             | Environment for our Paddle account. This should match the kind of Paddle account you signed up for.                                                                                                                                                                        | Enter `sandbox` for sandbox accounts or `production` for live accounts.                                                                                                                                                                                      |\n\nUse `https://\u003cPROJECTNAME\u003e.vercel.app/api/webhook` as the endpoint URL for your notification destination, where `\u003cPROJECTNAME\u003e` is the name of your project in Vercel. For example, `https://paddle-billing.vercel.app/api/webhook`.\n\nIf your project name isn't unique, your Vercel deploy URL may not match the URL you enter here. We can review and update this after deploy.\n\n#### Deploy\n\nClick **Deploy** when you're done. Wait for Vercel to build.\n\n### 2. Set up product catalog\n\n#### Clone locally\n\n1. Clone the repository you created earlier.\n\n   ```sh\n   git clone https://github.com/PATH_TO_YOUR_REPO\n   ```\n\n2. Install dependencies using npm, Yarn, or pnpm.\n\n   Install using npm:\n\n   ```sh\n   npm install\n   ```\n\n   Install using Yarn:\n\n   ```sh\n   yarn install\n   ```\n\n   Install using pnpm:\n\n   ```sh\n   pnpm install\n   ```\n\n#### Add products and prices\n\n[Create products and prices](https://developer.paddle.com/build/products/create-products-prices?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit) in Paddle for your subscription plans. We recommend creating three products for your plans, with two prices for each product to describe how you bill. For example, create a product called \"Pro plan\" with two prices for \"monthly\" and \"annual.\"\n\nNext, copy your price IDs and update the [`pricing-tier.ts`](src/constants/pricing-tier.ts) constants file with your new prices.\n\nCommit and push your changes to `main`.\n\n### 3. Add URL to Paddle and test\n\n#### Add deploy URL to Paddle\n\nYou must add URLs to Paddle before you can launch a checkout from them. This protects you as a seller, making sure that only you're able to sell your products.\n\n1. Go to [**Paddle \u003e Checkout \u003e Website approval**](https://sandbox-vendors.paddle.com/request-domain-approval), then enter your Vercel demo app link and click **Submit for approval**.\n2. Go to [**Paddle \u003e Checkout \u003e Checkout settings**](https://sandbox-vendors.paddle.com/checkout-settings), then enter your Vercel demo app link as your default payment link and click **Save**.\n3. Go to [**Paddle \u003e Developer tools \u003e Notifications**](https://sandbox-vendors.paddle.com/notifications), then check that the endpoint URL matches your Vercel demo app link domain.\n\n\u003e **Important:** Website approval is instant for sandbox accounts, but may take a little while for live accounts while the Paddle seller verification team check your website.\n\n#### Test\n\nOpen your Vercel demo site. You should notice that Paddle returns the prices you entered for each of your plans on your pricing page.\n\nClick **Get started** to launch a checkout for a plan, then take a test payment.\n\nIf you're using a sandbox account, you can take a test payment using [our test card details](https://developer.paddle.com/concepts/payment-methods/credit-debit-card?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit):\n\n| Field                      | Value                                 |\n| -------------------------- | ------------------------------------- |\n| **Email address**          | An email address you own              |\n| **Country**                | Any valid country supported by Paddle |\n| **ZIP code** (if required) | Any valid ZIP or postal code          |\n| **Card number**            | `4242 4242 4242 4242`                 |\n| **Name on card**           | Any name                              |\n| **Expiration date**        | Any valid date in the future.         |\n| **Security code**          | `100`                                 |\n\nAfter checkout is completed, head back to the homepage and click **Sign in**. Have a look at the subscriptions and payments pages. They pull information from Paddle about a customer's subscriptions and transactions.\n\n### 4. Next steps\n\nYou're done! 🎉 You can use this starter kit as a basis for building a SaaS app powered by Paddle Billing.\n\nOnce you've built your app, transition to a live account to start taking real payments:\n\n1. [Sign up for a live account](https://login.paddle.com/signup?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit), then follow our [go-live checklist](https://developer.paddle.com/build/onboarding/go-live-checklist) to transition from sandbox to live.\n2. Update your environment variables so they're for your live account.\n3. Create new schemas in Supabase for your live data.\n4. [Set up Paddle Retain](https://developer.paddle.com/build/retain/set-up-retain-profitwell) to handle payment recovery.\n\n## Get help\n\nFor help, contact the Paddle DX team at `team-dx@paddle.com`.\n\n## Learn more\n\n- [Build and deploy Next.js app with Vercel and Supabase](https://developer.paddle.com/build/nextjs-supabase-vercel-starter-kit?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit)\n- [Paddle API reference](https://developer.paddle.com/api-reference/overview?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit)\n- [Sign up for Paddle Billing](https://sandbox-login.paddle.com/signup?utm_source=dx\u0026utm_medium=paddle-nextjs-starter-kit)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevashish2024%2Fpaddle-nextjs-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevashish2024%2Fpaddle-nextjs-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevashish2024%2Fpaddle-nextjs-starter-kit/lists"}