A complete file storage solution with Stripe Payment Element and checkout support. Includes payment components, order management, and example pages.
Install the stripe-ui component using the shadcn CLI:
pnpm dlx shadcn@latest add https://stripe-ui-component.desishub.com/r/stripe-ui-component.jsonEverything you need for a complete Stripe checkout experience in your Next.js application.
Follow these steps to add Stripe checkout to your Next.js project.
This component requires better-auth-ui (for authentication & Prisma setup) and zustand-cart (for cart state management) to be installed first.
pnpm dlx shadcn@latest add https://better-auth-ui.desishub.com/r/auth-components.jsonpnpm dlx shadcn@latest add https://jb.desishub.com/r/zustand-cart.jsonpnpm dlx shadcn@latest add https://stripe-ui-component.desishub.com/r/stripe-ui-component.jsonAdd the following models to your prisma/schema.prisma file. Also add orders Order[] to your User model.
model Category {
id String @id @default(cuid())
name String
slug String @unique
image String?
description String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
products Product[]
}
model Product {
id String @id @default(cuid())
name String
description String?
price Float
image String
stripeProductId String?
stripePriceId String?
categoryId String?
category Category? @relation(fields: [categoryId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
orderItems OrderItem[]
}
model Order {
id String @id @default(cuid())
userId String
user User @relation(fields: [userId], references: [id])
status String @default("pending")
paymentStatus String @default("unpaid")
paymentIntentId String? @unique
totalAmount Float
shippingAddress String?
items OrderItem[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model OrderItem {
id String @id @default(cuid())
orderId String
order Order @relation(fields: [orderId], references: [id], onDelete: Cascade)
productId String
product Product @relation(fields: [productId], references: [id])
quantity Int
price Float
}Add your Stripe keys to .env. Get your keys from the Stripe Dashboard.
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...npx prisma generate
npx prisma migrate dev --name add_stripe_modelsOptionally, seed your database with sample products using the included seed file.
Add your product image domains to next.config.ts.
const nextConfig = {
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'images.unsplash.com' },
// Add your image domains here
],
},
};After installation, these components and pages are ready to use.
import { ProductGrid } from "@/components/stripe/product-grid";
// Fetch products from your database
const products = await db.product.findMany({
include: { category: true },
});
<ProductGrid products={products} />import { CheckoutPage } from "@/components/stripe/checkout-page";
// The checkout page handles everything:
// - Cart items display with images
// - Shipping address form
// - Stripe Payment Element
// - Payment confirmation & redirect
<CheckoutPage />import { OrderHistory } from "@/components/stripe/order-history";
const orders = await db.order.findMany({
where: { userId: session.user.id },
include: { items: { include: { product: true } } },
orderBy: { createdAt: "desc" },
});
<OrderHistory orders={orders} />Files added to your project after installation.
components/stripe/
├── stripe-provider.tsx # Stripe Elements wrapper
├── checkout-form.tsx # Payment Element form
├── checkout-page.tsx # Full checkout layout
├── address-form.tsx # Shipping address inputs
├── order-summary.tsx # Cart items display
├── order-confirmation.tsx # Post-payment verification
├── order-history.tsx # Orders table
├── product-grid.tsx # Product cards with cart
└── index.ts # Barrel export
lib/
└── stripe.ts # Server-side Stripe instance
app/api/stripe/
├── create-payment-intent/
│ └── route.ts # Create PaymentIntent + Order
└── verify-payment/
└── route.ts # Verify payment & update order
app/
├── products/page.tsx # Product listing page
├── checkout/page.tsx # Checkout page (protected)
├── order-confirmation/
│ └── page.tsx # Payment confirmation
└── dashboard/orders/
├── page.tsx # My Orders list
└── [id]/page.tsx # Order detail viewTry out the demo pages included with the component.