Dodo Payments Storefront

Simple, branded, mobile‑first storefront for selling one‑time and subscription products with Dodo Payments. Built with Next.js App Router, TypeScript, shadcn/ui, Radix UI, and Tailwind CSS.

Overview

The Storefront lets you publish products from your Dodo Payments dashboard without building a full website. Customers can browse products and purchase via Dodo’s secure checkout.

For full product docs, see the Storefront guide: docs.dodopayments.com/features/storefront.

Key Features

• Branded storefront: Store name, logo, and cover image
• Product segregation: One‑time vs subscription sections
• Simple checkout: "Buy Now" redirects to Dodo checkout
• Publish/unpublish: Control what’s visible from the dashboard
• No extra CMS: Manage products where you already set pricing and details
• Mobile‑friendly: Responsive layout for all devices
• Test Mode: Separate test and live storefronts

Tech Stack

• Runtime: Next.js 15 (App Router), React 19
• Language: TypeScript
• UI: shadcn/ui, Radix UI, Tailwind CSS
• State/Utils: Redux Toolkit, zod, date‑fns

---

Getting Started

1. Install dependencies

   npm install

2. Start the development server

   npm run dev

3. Create a storefront
   Set up a new storefront in your Dodo Payments dashboard.

4. Access your storefront
   Open http://localhost:3000/[slug], replacing [slug] with your storefront's slug from the dashboard.

Scripts

• npm run dev: Start dev server
• npm run build: Create production build
• npm run start: Start production server
• npm run lint: Lint codebase

---

Translations (Lingo.dev Compiler)

This app uses Lingo.dev Compiler to localize UI text at build time without changing components. The compiler extracts strings from src/app/, generates dictionaries under lingo/, and injects translations during build.

Setup

• API key: Obtain from Lingo.dev Engine and set the environment variable before running builds/dev:

export LINGO_API_KEY="<your_api_key>"

• Locales: Source locale is en. Target locales configured in next.config.ts are de and es for this PR.

Run

• Development:

npm run dev

• Production build:

npm run build
npm start

The compiler will create/update dictionaries in the lingo/ directory and use them to render localized content.

Switch locales

• The current locale is read from the lingo-locale cookie (defaults to en). You can switch locales by setting this cookie in the browser DevTools Application tab, or via a simple link/action that sets the cookie on the server using setUserLocale(locale) from src/lib/i18n-helper.ts.

Examples:

• Set to German: lingo-locale=de
• Set to Spanish: lingo-locale=es

Reload the page after changing the cookie.

Notes

• Dictionaries are versioned by content fingerprint; only changed strings retranslate.
• If you see missing translations during development, rebuild or refresh once the dictionary updates.

---

Project Structure

Key folders:

• src/app: Next.js App Router pages, layouts, and route handlers
• src/components: UI components (custom, product, and shadcn‑based primitives)
• src/lib and src/constants: Utilities and constants
• public: Static assets (logos, banners, images)

Example brand assets used in docs/social embeds live under public/images/brand-assets/.

---

Storefront Basics

This repository focuses on the customer‑facing storefront. Product data, pricing, and publish/unpublish are managed in your Dodo Payments dashboard. Customers select quantity and proceed to secure checkout on Dodo. After payment, Dodo shows confirmation and can optionally redirect back to your storefront.

Refer to the Storefront documentation for end‑to‑end setup and merchant workflows: docs.dodopayments.com/features/storefront.

---

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for local setup, coding style, and pull request guidelines. For issue/PR authoring, use the templates in .github/.

We take inspiration for structure and DX from the Billing SDK project: dodopayments/billingsdk.

---

Security

If you discover a vulnerability, please review SECURITY.md for our coordinated disclosure process.

---

License

Licensed under the GPL‑3.0. See LICENSE for details.