How to deploy a Next.js online store with Stripe

Copy link to headingOverview

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.

Copy link to headingPrerequisites

For local development:

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

Copy link to headingDeploy the sandbox to 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.

Copy link to headingWhat 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.

Copy link to headingCustomize the template

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

Copy link to heading1. Clone your repository

Clone the repository that Vercel created:

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

Copy link to heading2. 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

Copy link to heading3. Install dependencies

pnpm install

Copy link to heading4. 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.

Copy link to headingSwitching 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.
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.

Copy link to headingManaging 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.

Copy link to headingHow it works

Copy link to headingProject 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

Copy link to headingStripe 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

Copy link to headingDeploying 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 .

Copy link to headingUsing 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.

Copy link to headingNext steps

• View the live demo
• Explore Stripe in Vercel Marketplace
• Read Stripe documentation