React 앱에 Razorpay 결제벽을 10분 만에 추가한 방법

Source: Dev.to

새로운 앱을 만들 때마다 같은 페이월 코드를 복사‑붙여넣기 했습니다.
Razorpay 구독 로직, 무료 사용자 UI를 차단하는 게이트 컴포넌트, 월/연간 전환이 가능한 가격 모달, localStorage를 확인하고 필요 시 검증 엔드포인트에 ping을 보내는 usePro 훅.
똑같은 코드. 모든 앱에, 매번.

그래서 저는 이를 react-premium-gate 라는 제로‑디펜던시 React 라이브러리로 추출했습니다. 전체 Razorpay 구독 흐름을 처리하는 세 가지 내보내기만 제공하죠.

세 가지 기능, 그 외는 없습니다

• usePro — Pro 상태를 관리하는 훅. localStorage에서 구독 ID를 읽고, 필요하면 백엔드와 검증하며 isPro, loading, activatePro, deactivatePro 를 반환합니다.
• PremiumGate — Pro 전용 UI를 페이월 카드로 대체하는 컴포넌트. 제목, 설명, 아이콘, 버튼 텍스트, 강조 색상을 완전히 커스터마이징할 수 있습니다.
• PricingModal — 월/연간 플랜 토글, 저장 배지, Razorpay 결제창이 열리는 동안의 로딩 상태를 제공하는 바텀‑시트 모달입니다.

또한 구독 생성, HMAC 결제 서명 검증, 서버‑사이드 구독 상태 확인을 위한 세 개의 Vercel API 템플릿을 함께 제공합니다.

npm install react-premium-gate

• 런타임 디펜던시 0개. React 17+와 호환됩니다.

흐름 예시

1. 사용자가 Pro 기능을 시도 → PremiumGate 가 실제 UI 대신 표시됩니다.

2. 사용자가 “Upgrade” 클릭 → PricingModal 이 열립니다.

3. 플랜 선택 → 여러분의 핸들러가 /api/create-subscription 을 호출합니다.

4. Razorpay 결제창이 열리고 → 사용자가 결제합니다.

5. Razorpay 가 여러분의 핸들러에 호출 → /api/verify-payment 를 호출합니다.

6. 서명이 유효하면 → activatePro(subscriptionId) 호출.

7. isPro 가 true 로 전환 → 실제 UI 가 렌더링되고 모달이 닫힙니다.

전체 흐름은 이렇습니다. 라이브러리가 1, 2, 7 단계를, 템플릿이 3, 5 단계를 담당합니다. 약 10분이면 모두 연결할 수 있습니다.

인도 사용자를 대상으로 한다면 Razorpay 가 유일한 실질적인 선택입니다. Stripe 는 INR 구독을 제대로 지원하지 않으며, Razorpay 은 네이티브 UPI, 인터넷 뱅킹, 카드 결제를 제공하고 무료 티어도 관대합니다.

템플릿에 포함된 HMAC 서명 검증은 대부분 튜토리얼이 놓치는 부분입니다. 검증을 생략하면 누구든 결제를 위조할 수 있지만, 여기서는 crypto.createHmac 으로 올바르게 처리합니다.

모든 시각 요소는 prop 으로 제공됩니다. 기본 골드 색상 대신 브랜드 색상으로 강조 색을 바꾸고, 👑 아이콘을 원하는 아이콘으로 교체하고, 버튼 텍스트에 가격을 넣어 보세요. 예: “Upgrade to Pro — ₹399/mo” 가 일반 라벨보다 전환율이 높습니다.

usePro 훅의 storageKey 도 설정 가능해 같은 도메인에 여러 앱을 배포해도 충돌하지 않습니다.

npm install react-premium-gate

GitHub + 전체 예제: github.com/iamadhitya1/react-premium-gate

저는 이 라이브러리를 Rewrite Labs 앱 스위트 전반에 걸쳐 프로덕션에서 사용하고 있습니다. Razorpay 로 결제 시스템을 갖춘 React SaaS 를 만들면서 페이월 구현을 고민하고 싶다면, 바로 이 라이브러리를 활용해 보세요.