End-to-end proof of concept showcasing UPI deep-link creation, QR rendering, and native sharing in a modern React + TypeScript app.
- UPI deep link generation (
upi://pay?...) - Dynamic QR “preview” and copy/share actions (Web Share API + clipboard fallback)
- Form validation for VPA and amount
- Clean, responsive UI with Tailwind CSS
- Simple state management via a custom React hook
- Frontend: React 19, TypeScript, Vite
- UI: Tailwind CSS, Lucide icons, small component primitives
- Integration: Explored Setu developer environment and a simple backend API integration approach (dev sandbox, endpoints, payloads) to understand how a real gateway would plug in
Watch the demo on Google Drive: View Demo
Note: This POC focuses on the client flow and a thin integration layer. It intentionally avoids exposing secrets in the frontend and keeps the backend interaction simple for demonstration.
# install
npm install
# start dev server
npm run dev
# build
npm run build
# preview production build
npm run previewsrc/
components/
forms/ # FormField, PaymentForm, FeaturesBanner
ui/ # OutputCard, layout pieces
hooks/ # usePaymentForm (state, validation, generation)
services/ # setuApi.ts (integration surface)
assets/ # static assets
If you wire a backend for signing/forwarding API calls, expose only public-safe values to the client and keep credentials server-side. The included services/setuApi.ts illustrates the shape of an integration layer.
- The basics of how UPI deep links work (payer address, amount, note, currency)
- A developer-friendly API workflow: reading docs, mapping parameters, and validating payloads
- Setu’s developer environment to understand how a simple backend could integrate endpoints without going deep into the entire payment ecosystem
- Swap QR icon preview with actual generated QR bitmap
- Add server-backed link creation + webhooks
- Enhance validation and analytics
Built by Swastik — GitHub: @Swastik1