Back to components
Commerce component
DGateway Shop
E-commerce + Mobile Money + Stripe — built for African markets.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://ui-components.desishub.com/r/dgateway-shop.jsonWhat it does
- Product catalog at /shop with sample products
- Cart with persistent localStorage and floating cart drawer
- Two payment methods: Mobile Money (UGX) + Stripe (USD)
- Real-time payment status polling with success/failure screens
- Auto-installs zustand, @stripe/react-stripe-js, @stripe/stripe-js
When to use
Use it
African market payments, multi-currency (UGX + USD), marketplaces targeting mobile money users.
Skip it
Complex inventory, subscriptions, or Stripe-only markets (use Stripe UI instead).
Prerequisites
- Next.js App Router
- DGateway account with API credentials
Environment variables
| Name | Description |
|---|---|
| DGATEWAY_API_URL | DGateway API endpoint (e.g. https://dgatewayapi.desispay.com) |
| DGATEWAY_API_KEY | API auth key from DGateway Dashboard |
Files & routes added
- /shop, /checkout
- /api/checkout (POST), /api/checkout/status (POST)
- components/cart-drawer.tsx
- lib/dgateway.ts, lib/cart-store.ts
- data/shop-products.ts