How to deploy a Next.js online store with Stripe

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.

For local development:

• Node.js 20+ installed
• pnpm package manager
• Vercel CLI (npm install -g vercel)

Deploy this project to Vercel with one click: Deploy with Vercel

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 from Stripe.

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.

Bring the code locally to customize the application to your theme and functionality.

Clone the repository that Vercel created:

git clone https://github.com/your-username/nextjs-stripe-template.git
cd nextjs-stripe-template

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

pnpm install

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.

Once you're happy with your local deployment and have tested in Vercel preview environment, you're ready to accept real payments:

1. Go to the 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.

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.

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

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

• View the live demo
• Explore Stripe in Vercel Marketplace
• Read Stripe documentation
• Use the Vercel integration CLI to connect your AI agent to the Stripe integration