https://github.com/yournextstore/yournextstore Skip to content Navigation Menu Toggle navigation Sign in * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + GitHub Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions By size + Enterprise + Teams + Startups By industry + Healthcare + Financial services + Manufacturing By use case + CI/CD & Automation + DevOps + DevSecOps * Resources Topics + AI + DevOps + Security + Software Development + View all Explore + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Enterprise + Enterprise platform AI-powered developer platform Available add-ons + Advanced Security Enterprise-grade security features + GitHub Copilot Enterprise-grade AI features + Premium Support Enterprise-grade 24/7 support * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up Reseting focus You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} yournextstore / yournextstore Public * Notifications You must be signed in to change notification settings * Fork 212 * Star 2.3k Modern Commerce with Next.js and Stripe as the backend. demo.yournextstore.com License AGPL-3.0, Unknown licenses found Licenses found AGPL-3.0 LICENSE-AGPL.md Unknown LICENSE-Commercial.md 2.3k stars 212 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 8 * Pull requests 2 * Actions * Security * Insights Additional navigation options * Code * Issues * Pull requests * Actions * Security * Insights yournextstore/yournextstore This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main BranchesTags Go to file Code Folders and files Name Name Last commit Last commit message date Latest commit History 61 Commits .github/workflows .github/workflows .husky .husky .vscode .vscode messages messages public public src src yns.inlang yns.inlang .env.example .env.example .eslintrc.json .eslintrc.json .gitignore .gitignore .lintstagedrc.js .lintstagedrc.js .npmrc .npmrc .prettierignore .prettierignore CHANGELOG.md CHANGELOG.md LICENSE-AGPL.md LICENSE-AGPL.md LICENSE-Commercial.md LICENSE-Commercial.md README.md README.md SECURITY.md SECURITY.md commitlint.config.ts commitlint.config.ts components.json components.json global.d.ts global.d.ts i18n.d.ts i18n.d.ts mdx-components.tsx mdx-components.tsx next-fix.d.ts next-fix.d.ts next.config.mjs next.config.mjs package.json package.json pnpm-lock.yaml pnpm-lock.yaml postcss.config.cjs postcss.config.cjs prettier.config.js prettier.config.js tailwind.config.ts tailwind.config.ts tsconfig.json tsconfig.json vitest.config.ts vitest.config.ts View all files Repository files navigation * README * Code of conduct * AGPL-3.0 license * License * Security Your Next Store Join Deploy with Your Next Store - E-Commerce with Stripe as the Discord Vercel backend | Product Hunt demo.yournextstore.com Demo demo-yns.mp4 Prerequisites Node.js 20+ We officially support the current LTS version - 20 at the time of writing. YNS should work on versions 18, 20, and 22. If you're using one of those versions and encounter a problem, please report it! Installing Node.js Follow the instructions for your operating system found here: nodejs.org/en/download pnpm 9+ We officially support pnpm version 9, but we will do our best to keep it compatible with npm and yarn. Installing pnpm The easiest way to install pnpm is via Node.js Corepack. Inside the folder with YNS, run these commands: corepack enable corepack install Alternatively, follow the instructions for your operating system found here: pnpm.io/installation Create Stripe account YNS is tightly integrated with Stripe, so you need a Stripe account to use Your Next Store. Follow the instructions from Stripe to create an account. It's important to remember that Stripe works in two different modes: Test Mode and Production Mode. For local development and testing purposes, you should use the Test Mode. This way, Stripe will never charge real money, and you can use special test credentials such as credit card numbers and BLIK numbers to complete payments. For more detailed information, please refer to the Stripe documentation at docs.stripe.com/testing. Once you're ready to sell your products to real customers, you must switch Test Mode to Production Mode in Stripe and generate new credentials. Tip This step will require additional verification from Stripe, so we suggest you start the process immediately. Add Environment Variables For YNS to work, you'll need to define a few environmental variables. For local development and testing, you may create an empty .env file and copy the contents of .env.example into it. To set env variables in production, you'll need to consult the documentation of your chosen hosting provider. Required Environment Variables * ENABLE_EXPERIMENTAL_COREPACK - Vercel only: Set to 1 to enable Corepack * NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - Publishable key from Stripe. * STRIPE_SECRET_KEY - Secret key from Stripe. * STRIPE_CURRENCY - This is used to determine your store's currency. Currently, only a single currency is allowed, and it should be a three-letter ISO code (e.g., usd). * NEXT_PUBLIC_URL - Optional on Vercel The address of your store without the trailing slash, i.e., https://demo.yournextstore.com. When building for the first time, you should set it to any valid URL, i.e. http://localhost:3000. yns-setup-env-variables.mp4 Optional Environment Variables * NEXT_PUBLIC_UMAMI_WEBSITE_ID - Umami website ID for analytics * NEXT_PUBLIC_NEWSLETTER_ENDPOINT - Preview: The endpoint for the newsletter form in the future. It should accept POST requests with a JSON { email: string } and return JSON { status: number }. * STRIPE_WEBHOOK_SECRET - Preview: Stripe Webhook secret for handling events from Stripe. Read more below. * ENABLE_STRIPE_TAX - Preview: Set to any value (i.e., 1) to enable Stripe Tax in YNS. Read more below. * NEXT_PUBLIC_LANGUAGE - The language of the store. Run the store After following the above steps, run pnpm install to install the required dependencies, and then run pnpm dev to start the development server on your machine. Your Next Store will be available at localhost:3000 Add products Your Next Store gets all the products, prices, descriptions, and categories from Stripe. So, if you know Stripe already, you'll feel right at home! You need to add products to the Stripe Dashboard to show in YNS. After logging in, click More in the left sidebar and select Product catalogue. You may also use the direct link: * In Test Mode: dashboard.stripe.com/test/products * In Production Mode: dashboard.stripe.com/products Then, click on Add product and fill in all the required information: * name, * description, * price - currently, only One-off payments are supported, * a product image. Metadata Additionally, Your Next Store uses product metadata to provide more context information about the products. You can specify the following metadata fields: Field Required Description slug Yes The product slug is used for URLs. Needs to be unique except for variants. category No The product category used for grouping products. order No The product order used for sorting products. Lower numbers are displayed first. variant No The product variant slug. Read below for details. Now you should see all added products in Your Next Store. Variants Your Next Store supports simple product variants. To create a product with variants, you must add multiple products to Stripe with the same slug metadata field. YNS uses the variant metadata field to distinguish between different variants of the same product. For example, if you have a T-shirt in multiple sizes, you can create three products with the slug of t-shirt and variant values of small, medium, and large. Variants are displayed on the product page. Variants can have different prices, descriptions, and images. It's important to note that the category should be the same for all variants of the same product for the best browsing experience. Note In the future, we plan to add the possibility of editing products and variants inside a built-in admin dashboard. If you have any ideas or suggestions, please let us know! Stripe Webhooks Your Next Store uses Stripe Webhooks to handle events from Stripe. Currently, the endpoint is used to automatically revalidate cart page and to create tax transaction (if enabled). To set up Webhooks, follow the Stripe docs. The exact steps depend on whether you've activated Stripe Workbench in your Stripe account: docs.stripe.com/ webhooks#add-a-webhook-endpoint. The endpoint for the webhook is https://{YOUR_DOMAIN}/api/ stripe-webhook. The only required event is payment_intent.succeeded. When the webhook is configured in Stripe, set the STRIPE_WEBHOOK_SECRET environment variable to the secret key created by Stripe. Note In the future, we plan to add more events to the webhook to improve the user experience. Stripe Tax Your Next Store comes with a preview of Stripe Tax support. To enable it, set the ENABLE_STRIPE_TAX environment variable to any value (i.e., 1). For this feature to work, you must set your Tax settings in Stripe Dashboard: dashboard.stripe.com/register/tax. When enabled and configured, taxes will be automatically calculated and added to the total price of the product based on: * product pricing - tax can be inclusive or exclusive * product tax code * customer's address * customer's tax ID Warning This feature is still in the early stage, and there could be edge cases that are not supported. We're actively working on it, so if you encounter any problems or have any suggestions, please let us know! Production Deployment Vercel To deploy on Vercel, click the following button, set up your GitHub repository and environment variables, and click Deploy. Make sure to set the ENABLE_EXPERIMENTAL_COREPACK variable to 1. Deploy with Vercel Your Own VPS Description coming soon. Docker Description coming soon. That's all YNS evolves each day, and we actively seek feedback on what to improve. If you have any questions or problems, don't hesitate to get in touch with us on our Discord Server. FAQ Sometimes, you use structuredClone to pass data from server to client components. Why? Only certain types of data can be passed from the server to the client directly. Data from Stripe SDK often contains class instances. To work around this, we use structuredClone to eliminate them and pass just plain old objects to the client. About Modern Commerce with Next.js and Stripe as the backend. demo.yournextstore.com Topics typescript commerce stripe reactjs nextjs Resources Readme License AGPL-3.0, Unknown licenses found Licenses found AGPL-3.0 LICENSE-AGPL.md Unknown LICENSE-Commercial.md Code of conduct Code of conduct Security policy Security policy Activity Custom properties Stars 2.3k stars Watchers 20 watching Forks 212 forks Report repository Contributors 6 * @typeofweb * @zaiste * @morris * @eltociear * @Kungfoosian * @RedstonePfalz Languages * TypeScript 96.8% * JavaScript 1.9% * CSS 1.3% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.