How I Added a Razorpay Paywall to My React App in 10 Minutes

#react #javascript #webdev #opensource

Every time I built a new app, I copy-pasted the same paywall code.

The Razorpay subscription logic. The gate component that blocks UI for free users. The pricing modal with the monthly/yearly toggle. The usePro hook that checks localStorage and optionally pings a verification endpoint.

Same code. Every app. Every time.

So I extracted it all into react-premium-gate — a zero-dependency React library with three exports that handle the entire Razorpay subscription flow.

What's in the box

Three things and nothing else:

usePro — a hook that manages Pro status. It reads a subscription ID from localStorage, optionally verifies it against your backend, and gives you isPro, loading, activatePro, and deactivatePro.

PremiumGate — a component that replaces any Pro-only UI with a paywall card. Fully customisable title, description, icon, button text, and accent colour.

PricingModal — a bottom-sheet pricing modal with a monthly/yearly plan toggle, a save badge, and a loading state for while the Razorpay checkout is opening.

Plus three copy-paste Vercel API templates for creating subscriptions, verifying HMAC payment signatures, and checking subscription status server-side.

Install

npm install react-premium-gate

Zero runtime dependencies. Works with React 17+.

The flow in plain English

User hits a Pro feature → PremiumGate shows instead of the real UI
User clicks Upgrade → PricingModal opens
User picks a plan → your handler calls /api/create-subscription
Razorpay checkout opens → user pays
Razorpay calls your handler → you call /api/verify-payment
Signature is valid → call activatePro(subscriptionId)
isPro flips to true → real UI renders, modal closes

That's the entire flow. The library handles steps 1, 2, and 7. The templates handle steps 3 and 5. You wire them together in about 10 minutes.

Why Razorpay

If you're building for Indian users, Razorpay is the only serious option. Stripe doesn't support INR subscriptions properly. Razorpay has native UPI, net banking, and card support, plus a generous free tier.

The HMAC signature verification in the template is the part most tutorials get wrong — they skip it entirely, which means anyone can fake a successful payment. The template handles it correctly with crypto.createHmac.

Customisation

Every visual element is a prop. Swap the accent colour from the default gold to match your brand. Change the icon from 👑 to whatever fits. Override the button text to show your price — "Upgrade to Pro — ₹399/mo" converts better than a generic label.

The usePro hook's storageKey is configurable so it doesn't clash if you're running multiple apps on the same domain.