Many banks in India allow customers to pay their credit card bills directly via UPI by sending money to specific, structured UPI IDs (VPA). For example, paying an HDFC credit card bill can be done by sending funds to CC.XXXXXX@hdfcbank (where XXXXXX is the card number).However, manually typing a 16-digit card number and a bank VPA into a UPI app is slow and risky...a single typo can send money to the wrong account.This project is a React web utility that automates this process. The user inputs their mobile number, card number, and selects their card issuer. The application validates the card BIN, dynamically constructs the bank-specific UPI ID, and generates a standard UPI deep-link URL. It displays this link as a scanable QR code or a direct "Pay" button that launches UPI apps on mobile devices.Important Note: This tool is not a payment gateway. It does not handle, store, or process transactions. The actual financial transaction occurs entirely within the user's chosen UPI app (like GPay, PhonePe, or BHIM) using the standard, secure UPI infrastructure.
Technical Implementation
1. Card Validation & Auto BIN Detection
To prevent users from entering invalid card numbers, the application employs a multi-step validation layer:
Luhn Algorithm Check: A client-side check to verify the mathematical validity of the credit card number before any API calls are made.
BIN Lookup: When the first 6 digits (the Bank Identification Number) are entered, the app checks a local registry of Indian credit card BIN ranges to auto-detect the card issuer (e.g., ICICI, HDFC, SBI) and card scheme (Visa, Mastercard, RuPay).
2. VPA Construction Patterns
Each bank has its own VPA structure for receiving credit card payments. The core utility handles these templates:
The application inputs are run through a builder function that formats the VPA according to the selected bank's specifications.
3. UPI Deep Linking & QR Generation
A standard UPI URL is generated following the official NPCI specifications: upi://pay?pa={UPI_ID}&pn={NAME}&am={AMOUNT}&cu=INR
pa (Payment Address): The generated bank-specific credit card VPA.
pn (Payee Name): The name of the cardholder or the bank.
am (Amount): The optional bill amount.
For desktop users, the URL is encoded into a QR code using the qrcode.react package. For mobile users, the app exposes a button containing the upi:// protocol link, allowing them to launch their preferred local payment application with a single tap.
Technology Stack
Frontend: React 18, TypeScript, Tailwind CSS
Animations: Framer Motion for inputs and card detection feedback
QR Codes:qrcode.react
State Management: React Context to manage input steps and validation states
Challenges and Solutions
VPA Format Updates: Banks occasionally change their credit card payment VPA formats. To make the app maintainable, I separated the VPA patterns and bank configurations into a single static banks.ts configuration file, allowing for easy updates without changing the core React components.
Form UX: Entering 16 digits without spaces is difficult to read. I built a custom input formatter that automatically chunks the card number input into groups of four digits (XXXX XXXX XXXX XXXX) and handles backspaces correctly.
