Overview
This tutorial covers building the frontend payment UI from scratch. You will create a React component that handles the full payment lifecycle: session creation, QR code display, status polling, success confirmation, and expiry handling.
What You Will Build
- A
<PaymentModal /> component with live countdown timer - QR code generation using
qrcode.react - Polling hook that checks payment status every 5 seconds
- Success and expired states with appropriate UI
Chapters
- Project setup with Vite + React (0:00)
- Creating the payment session (4:15)
- QR code display with copy-to-clipboard (9:40)
- Building the countdown timer hook (15:00)
- Polling for payment confirmation (20:30)
- Handling success, expiry, and errors (26:15)
- Styling with Tailwind CSS (31:00)
- Testing with sandbox mode (36:45)