[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 type { productSchema } from "@/lib/schema" import Image from "next/image" import type { 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 type { productListSchema } from "@/lib/schema" import Link from "next/link" import type { 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 type 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}

) }

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This