Bollard UI

Implementation guide

Validate a UPI ID input in React

Help people enter a well-formed UPI ID without incorrectly rejecting an unfamiliar but valid VPA in an offline client-side form.

The mistake this stops

A payment form blocks an unfamiliar UPI ID just because it is not in a local demo list.

Format guidance in the browser and a clear handoff to your payment provider for real account verification.

Read the UPI ID Input component docs for its live preview, API, accessibility notes, dependencies, and limitations.

Install the component

pnpm dlx shadcn@latest add https://bollard-ui.vercel.app/r/upi-id-input.json

Use it safely

  1. Install the input and use it for VPA entry.
  2. Treat a well-formed unknown ID as unverified, not invalid.
  3. Confirm the payee and payment eligibility with your PSP or provider before moving money.