Back to components
Commerce component
Stripe UI
Production-ready Stripe checkout with Payment Element + order management.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://stripe-ui-component.desishub.com/r/stripe-ui-component.jsonWhat it does
- Embedded Stripe Payment Element with multi-method support and 3D Secure
- Complete checkout: order summary, shipping, payment processing
- Order management with history tracking and verification
- Server-side API routes for secure payment intent creation
- Responsive product grid integrated with Zustand cart
When to use
Use it
E-commerce platforms, SaaS payment systems, digital product stores needing full Stripe checkout flows.
Skip it
Simple donations, subscription-only products (use Stripe subscriptions directly), or markets needing Mobile Money (use DGateway).
Prerequisites
- shadcn/ui initialized
- JB Better Auth UI installed
- Zustand Cart installed
- PostgreSQL database
- Stripe API keys
Environment variables
| Name | Description |
|---|---|
| STRIPE_SECRET_KEY | Server-side key (sk_test_ or sk_live_) |
| NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY | Client-side key (pk_test_ or pk_live_) |
Files & routes added
- /products, /checkout, /order-confirmation, /dashboard/orders, /dashboard/orders/[id]
- /api/stripe/create-payment-intent, /api/stripe/verify-payment
- Prisma: Category, Product, Order, OrderItem models