Back
Stripe UI Component
Full-featured Stripe payment integration with checkout flow, order management, product grid, and cart powered by Zustand. Includes server-side API routes and auth-protected checkout.
Next.jsPayments
What's Included
Stripe Payment Element
Checkout Flow with Intent
Order Management & History
Product Grid Display
Zustand Shopping Cart
Server-side API Routes
Auth-Protected Checkout
Webhook Handling
Installation
terminal
$ pnpm dlx shadcn@latest add https://stripe-ui-component.desishub.com/r/stripe-ui-component.jsonHow to Use
1
Install the component
Run the shadcn CLI to add the Stripe UI component.
pnpm dlx shadcn@latest add https://stripe-ui-component.desishub.com/r/stripe-ui-component.json2
Configure Stripe keys
Add your Stripe API keys and webhook secret to environment variables.
STRIPE_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."3
Set up database
Run Prisma migrations to create product and order tables.
npx prisma migrate dev --name add-stripe
npx prisma generate4
Use the components
Import the product grid and checkout components.
import { ProductGrid } from '@/components/stripe/product-grid'
import { CheckoutForm } from '@/components/stripe/checkout-form'
// Products page
export default function ProductsPage() {
return <ProductGrid />
}Free
Open source component
Free to use · MIT License
CategoryPayments
PlatformsNext.js
Features8
Resources