[V0_FILE]typescriptreact:file="components/hero.tsx" export function Hero() { return (

Spring 2025 Collection

Shop our latest collection of essential items for the season.

) } [V0_FILE]typescriptreact:file="components/product-buy-form.tsx" 'use client' import { Button } from '@/components/ui/button' import { checkoutAction } from '@/lib/actions' import { useActionState } from 'react' export function ProductBuyForm({ priceId }: { priceId: string }) { const [, formAction, isPending] = useActionState(checkoutAction, null) return ( ) } [V0_FILE]typescriptreact:file="components/product-list-thumbnail.tsx" import { ProductBuyForm } from '@/components/product-buy-form' import { productSchema } from '@/lib/schema' import Image from 'next/image' import { z } from 'zod' export function ProductListThumbnail({ product, }: { product: z.infer }) { return (

{product.name}

{product.price.display_amount}

) } export function ProductListThumbnailSkeleton() { return

} [V0_FILE]typescriptreact:file="components/product-list.tsx" import { Button } from '@/components/ui/button' import { ProductListThumbnail, ProductListThumbnailSkeleton, } from '@/components/product-list-thumbnail' import { productListSchema } from '@/lib/schema' import Link from 'next/link' import { z } from 'zod' export function ProductList({ list, }: { list: z.infer }) { return (

{list.data.length > 0 ? ( <>

{list.data.map(product => ( ))}

) : ( <>

{Array.from({ length: 3 }).map((_, index) => ( ))}

No products found.

Add products to your store to get started.

)}

) } [V0_FILE]typescriptreact:file="components/site-header.tsx" import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { cn } from '@/lib/utils' import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' import { Menu, Search } from 'lucide-react' import Link from 'next/link' import { Cart } from '@/components/cart' import { Logo } from '@/components/logo' export function SiteHeader() { return (

Acme

) } function SearchBar({ className }: { className?: string }) { return (

) } function Sidebar() { return ( Menu ) } [V0_FILE]typescriptreact:file="components/cart.tsx" import { Button } from '@/components/ui/button' import { Sheet, SheetContent, SheetTitle, SheetTrigger, } from '@/components/ui/sheet' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' export function Cart() { return ( Cart Cart

No items in your cart.

) } function CartIcon({ className, ...props }: React.SVGProps) { return ( ) } [V0_FILE]typescriptreact:file="components/logo.tsx" export function Logo({ className, ...props }: React.ComponentProps<'svg'>) { return ( ) } [V0_FILE]typescriptreact:file="lib/actions.ts" 'use server' import { createCheckoutSession } from '@/lib/stripe' export async function checkoutAction(_prevState: unknown, formData: FormData) { const priceId = formData.get('priceId') as string await createCheckoutSession({ priceId }) } [V0_FILE]typescriptreact:file="lib/products.ts" import { productListSchema } from '@/lib/schema' import { stripe } from '@/lib/stripe' import Stripe from 'stripe' export async function getProducts( options: Pick = { limit: 6, } ) { const products = await stripe.products.list({ limit: options.limit, active: true, expand: ['data.default_price'], }) return productListSchema.parse({ data: products.data.map(product => { const price = product.default_price as Stripe.Price const amount = price.unit_amount ? price.unit_amount / 100 : null return { id: product.id, name: product.name, description: product.description, images: product.images, price: { id: price.id, amount, display_amount: amount?.toLocaleString('en-US', { style: 'currency', currency: 'USD', }), }, } }), has_more: products.has_more, starting_after: products.data[products.data.length - 1]?.id, }) } [V0_FILE]typescriptreact:file="lib/schema.ts" import { z } from 'zod' export const productSchema = z.object({ id: z.string(), name: z.string(), description: z.string().nullish(), images: z.array(z.string()).optional(), price: z.object({ id: z.string(), amount: z.number().optional(), display_amount: z.string().optional(), }), }) export const productListSchema = z.object({ data: z.array(productSchema), has_more: z.boolean(), starting_after: z.string().optional(), }) [V0_FILE]typescriptreact:file="lib/stripe.ts" import { redirect } from 'next/navigation' import Stripe from 'stripe' export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!) export async function createCheckoutSession({ priceId }: { priceId: string }) { const session = await stripe.checkout.sessions.create({ payment_method_types: ['card'], line_items: [ { price: priceId, quantity: 1, }, ], mode: 'payment', success_url: 'https://v0.dev', }) redirect(session.url!) } [V0_FILE]typescriptreact:file="app/page.tsx" entry="true" import { Hero } from '@/components/hero' import { ProductList } from '@/components/product-list' import { getProducts } from '@/lib/products' export default async function Page() { const products = await getProducts() return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" entry="true" import { cn } from '@/lib/utils' import { SiteHeader } from '@/components/site-header' import { TooltipProvider } from '@/components/ui/tooltip' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Stripe Products and Checkout', description: 'A template to showcase Stripe products, Next.js Server Actions, and a checkout flow.', } export default function Layout({ children }: { children: React.ReactNode }) { return (

{children}

) }