Stripe Checkout Integration

Integrate Stripe Checkout with embedded UI for secure payments.

Products Array Setup

Create a lib/products.ts file with your product catalog:

export interface Product {
  id: string
  name: string
  description: string
  priceInCents: number
  images?: string[]
}

// This is the source of truth for all products.
// All UI to display products should pull from this array.
// IDs passed to the checkout session should be the same as IDs from this array.
export const PRODUCTS: Product[] = [
  {
    id: 'plain-shirt',
    name: 'Plain T-Shirt',
    description: 'A plain white t-shirt',
    priceInCents: 999, // $9.99
    images: ['https://example.com/basic-plan.jpg'],
  },
  {
    id: 'spiral-shirt',
    name: 'Spiral T-Shirt',
    description: 'A spiral t-shirt',
    priceInCents: 2999, // $29.99
    images: ['https://example.com/pro-plan.jpg'],
  },
  {
    id: 'polo-shirt',
    name: 'Polo Shirt',
    description: 'A polo shirt',
    priceInCents: 9999, // $99.99
    images: ['https://example.com/enterprise-plan.jpg'],
  },
]

Usage

Pass a productId to the Checkout component:

<Checkout productId="spiral-shirt" />

Security Features

• •Server-side price validation: Product prices are stored and validated on the server
• •No client-side price manipulation: Users can only specify which product they want, not the price. The price however, can be sent to the client for display.
• •Product lookup: The server looks up product details from the secure products array

This approach prevents price tampering while keeping your product catalog simple and maintainable.

Environment Variables

The Stripe integration uses the following environment variables:

• •STRIPE_SECRET_KEY
• •STRIPE_PUBLISHABLE_KEY
• •NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY

Sandbox Workflow

By default, the Stripe integration creates a claimable sandbox. Users can claim this sandbox from the Connect section of the in-chat sidebar.

After claiming a sandbox, the user can go live with their project by replacing the Stripe test environment variables with the live environment variables from the Stripe dashboard.

Guidelines

• •Do NOT pass images when creating a checkout session. The relative URLs will break the checkout flow.
• •Do NOT try and turn on automatic tax calculation. The lack of an origin in our runtime environment will break the checkout flow.

Reference Files