Integrate Razorpay Standard Web Checkout into this codebase.
=== CREDENTIALS ===
RAZORPAY_KEY_ID: rzp_test_TWMxuLsAyJey9M
RAZORPAY_KEY_SECRET: HGOI8fqR09OdjKdxzg3xp2Ir
=== TASK ===
Detect the project stack and implement Razorpay Standard Checkout with:
1. Backend endpoint to create orders
2. Frontend checkout button with payment modal
3. Backend endpoint to verify payment signature
=== IMPLEMENTATION DETAILS ===
STEP 1: BACKEND – Create Order
– Endpoint: POST /api/create-order (or framework equivalent)
– Call Razorpay API: POST https://api.razorpay.com/v1/orders
– Request: { amount (paise), currency, receipt }
– Return: { order_id, amount, currency }
– Minimum amount: 100 paise
STEP 2: FRONTEND – Checkout
– Script: <script src=”https://checkout.razorpay.com/v1/checkout.js”></script>
– On button click: call create-order, then open Razorpay modal with order_id
– On success: receive razorpay_payment_id, razorpay_order_id, razorpay_signature
– Send all three to verify endpoint
STEP 3: BACKEND – Verify Signature
– Endpoint: POST /api/verify-payment (or framework equivalent)
– Algorithm: HMAC-SHA256(order_id + “|” + payment_id, KEY_SECRET)
– Compare generated signature with razorpay_signature
– Return success only if signatures match
=== ENVIRONMENT SETUP ===
Create .env file:
RAZORPAY_KEY_ID=rzp_test_TWMxuLsAyJey9M
RAZORPAY_KEY_SECRET=HGOI8fqR09OdjKdxzg3xp2Ir
Frontend framework prefixes (KEY_ID only, never KEY_SECRET):
– Next.js: NEXT_PUBLIC_RAZORPAY_KEY_ID
– Vite: VITE_RAZORPAY_KEY_ID
– CRA: REACT_APP_RAZORPAY_KEY_ID
Add .env to .gitignore.
=== SDK INSTALLATION ===
Node.js: npm install razorpay
Python: pip install razorpay
PHP: composer require razorpay/razorpay
Ruby: gem install razorpay
Go: go get github.com/razorpay/razorpay-go
=== OPERATION ORDER ===
Execute in this sequence:
1. Install dependencies first
2. Create .env file
3. Create or modify code files
4. Verify setup
=== ERROR HANDLING ===
Backend – Create Order:
– Validate amount >= 100 paise
– Handle Razorpay API errors (return 500)
– Handle auth failures (return 401)
Backend – Verify Signature:
– Signature mismatch: return 400, do NOT mark as paid
– Missing fields: return 400
Frontend:
– Handle modal dismiss (user cancelled)
– Handle payment.failed event
– Show error messages to user
=== EDGE CASES ===
If no backend framework detected:
– Stop and explain that Razorpay requires a backend for order creation
– Suggest serverless functions (Vercel/Netlify) or Razorpay Payment Links
If Razorpay already integrated:
– Do not duplicate code
– Only fix or complete missing parts
If static site only:
– Suggest adding serverless API routes
– Or suggest Razorpay Payment Links as alternative
=== REQUIREMENTS ===
– Never hardcode credentials in source files
– KEY_SECRET must never reach frontend code
– Use environment variables everywhere
– Follow existing code style in the project
– Do not create database tables unless project already has a database
=== REFERENCE ===
Documentation: https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/integration-steps/
=== OUTPUT ===
After completing integration:
1. List files created or modified
2. Explain how to test (e.g., start server, click pay button)
3. Note any manual steps required
Begin integration now.
