# How to deploy a Next.js online store with Stripe **Author:** Ismael Rumzan --- ## Overview In this guide, you'll learn how to: - Deploy the Next.js Stripe template to Vercel using the Marketplace integration - Set up Stripe for payment processing with instant sandbox creation - Clone and run the project locally - Switch from sandbox to production when you're ready to accept real payments This template uses Next.js 14 with the App Router, Tailwind CSS v4 for styling and `shadcn/ui` components for accessible components. ## Prerequisites **For local development**: - Node.js 20+ installed - pnpm package manager - Vercel CLI (`npm install -g vercel`) ## Deploy the sandbox to Vercel Deploy this project to Vercel with one click: [Deploy with Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-stripe-template&project-name=nextjs-stripe-template&repository-name=nextjs-stripe-template&demo-title=Stripe+%26+Next.js+Starter+Template&demo-description=A+template+for+building+full-stack+Stripe+applications+using+Next.js+and+Vercel&demo-url=https%3A%2F%2Fnextjs-stripe-template.vercel.sh%2F&demo-image=https%3A%2F%2Fimages.stripeassets.com%2Ffzn2n1nzq965%2F4vVgZi0ZMoEzOhkcv7EVwK%2F74a13565998b4c56003c5ddc5aae43ce%2Ffavicon.png%3Fw%3D180%26h%3D180&products=%5B%7B%22integrationSlug%22%3A%22stripe%22%2C%22productSlug%22%3A%22stripe%22%2C%22protocol%22%3A%22other%22%2C%22type%22%3A%22integration%22%7D%5D) This will: - Fork the repository to your GitHub account - Create a new Vercel project - Provision a Stripe sandbox for testing - Configure environment variables automatically - Deploy your application Your online store will be live at `your-project.vercel.app` and you can test the checkout flow in Stripe test mode with these [test credit cards](https://docs.stripe.com/testing#cards) from Stripe. ### What gets created The Vercel Marketplace integration provisions: - **Vercel Project**: Your Next.js application deployed globally - **Stripe Sandbox**: A testing environment for payment functionality - **Environment Variables**: Automatically configured Stripe API keys - **GitHub Repository**: Forked copy you can customize When you're ready to launch, connect your existing Stripe account to replace the sandbox with live keys. ## Customize the template Bring the code locally to customize the application to your theme and functionality. ### 1\. Clone your repository Clone the repository that Vercel created: `git clone https://github.com/your-username/nextjs-stripe-template.git cd nextjs-stripe-template` ### 2\. Pull environment variables Download environment variables from your Vercel project: `vercel link vercel env pull` This downloads all environment variables, including Stripe API keys configured during deployment. **Required environment variables**: - `STRIPE_SECRET_KEY` - Your Stripe secret key for server-side operations - `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` - Your Stripe publishable key for client-side operations ### 3\. Install dependencies `pnpm install` ### 4\. Run the development server Start the development server: `pnpm run dev` Open `localhost:3000` to explore the following routes: - `/` - Homepage with product showcase - `/checkout` - Checkout page with Stripe integration - `/success` - Order confirmation page You can now update the code and test locally. ## Switching from sandbox to production Once you're happy with your local deployment and have tested in the Vercel preview environment, you're ready to accept real payments: 1. Go to the [Stripe installation page](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fintegrations%2Fstripe&title=Go+to+Stripe+Installation+Page). 2. Click the **Install** drop-down and select **Import Existing Stripe Account**. 3. Click **Continue to Stripe** and follow the steps to connect your existing Stripe account. 4. Click **Done** to proceed to the newly linked Stripe account page, where you can connect projects and manage environment variables. 5. Redeploy your application so it picks up the new live keys. Your site is now ready to take live payments. ### Managing your live keys After connecting your Stripe account, Vercel automatically configures your live API keys as environment variables. If you need to rotate them, go to the **Settings** page of your Stripe resource from the [Vercel Stripe integrations page](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fintegrations%2Fstripe&title=Go+to+Stripe+Installation+Page). ## How it works ### Project structure `app/ ├── actions/ │ └── stripe.ts # Server actions for Stripe operations ├── checkout/ │ └── page.tsx # Checkout page with payment form ├── success/ │ └── page.tsx # Order confirmation page ├── layout.tsx # Root layout with theme provider └── page.tsx # Homepage with product display` ### Stripe integration The template uses Stripe's official React libraries: - `@stripe/stripe-js`: Client-side Stripe.js wrapper for secure payment collection - `@stripe/react-stripe-js`: React components for payment forms - `stripe`: Server-side Node.js library for API operations Server actions in `app/actions/stripe.ts` handle: - Creating payment intents - Processing payments securely - Handling webhooks for payment status ## Deploying with the CLI and AI agents If you already have a Vercel project and want to add Stripe to it, you can use the Vercel CLI: `vercel link vercel integration add stripe` This installs the Stripe integration, provisions a sandbox, connects it to your linked project, and syncs `STRIPE_SECRET_KEY` and `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` to `.env.local` . ### Using the CLI with an AI agent Add a skill file to your project so AI agents can provision Stripe on demand: ``--- name: stripe-setup description: Provision the Stripe integration for this project using the Vercel CLI --- Run these commands in order to set up Stripe: ```bash # Confirm Stripe is available vercel integration discover --format json # Provision Stripe and connect it to this project vercel integration add stripe --name my-store-stripe --format json # Get Next.js setup code vercel integration guide stripe --framework nextjs # Verify the resource is connected vercel integration list --format json vercel env ls ``` After provisioning, `STRIPE_SECRET_KEY` and `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` are available in `.env.local`.`` An agent can invoke this skill when setting up payments for the first time, without it being loaded on every session. ## Next steps - [View the live demo](https://nextjs-stripe-template.vercel.sh/) - [Explore Stripe in Vercel Marketplace](https://vercel.com/marketplace/stripe) - [Read Stripe documentation](https://stripe.com/docs) --- [View full KB sitemap](/kb/sitemap.md)