feat: integrate Razorpay payment gateway for web and mobile

Author: Mishra-coder

backend/.env.example

@@ -2,3 +2,5 @@ PORT=5001
 MONGO_URI=your_mongodb_atlas_uri_here
 JWT_SECRET=your_super_secret_key_here
 NODE_ENV=development
+RAZORPAY_KEY_ID=rzp_test_xxxxxxxxxxxxxx
+RAZORPAY_KEY_SECRET=your_key_secret_here

backend/package-lock.json

@@ -28,7 +28,8 @@
     "helmet": "^8.1.0",
     "jsonwebtoken": "^9.0.3",
     "mongoose": "^9.3.3",
-    "morgan": "^1.10.1"
+    "morgan": "^1.10.1",
+    "razorpay": "^2.9.6"
   },
   "devDependencies": {
     "nodemon": "^3.1.14"

backend/package.json

@@ -0,0 +1,40 @@
+const express = require('express');
+const router = express.Router();
+const Razorpay = require('razorpay');
+const crypto = require('crypto');
+
+const razorpay = new Razorpay({
+  key_id: process.env.RAZORPAY_KEY_ID,
+  key_secret: process.env.RAZORPAY_KEY_SECRET,
+});
+
+router.post('/create-order', async (req, res) => {
+  try {
+    const { amount } = req.body;
+    const order = await razorpay.orders.create({
+      amount: amount * 100,
+      currency: 'INR',
+      receipt: 'receipt_' + Date.now(),
+    });
+    res.json({ orderId: order.id, amount: order.amount, currency: order.currency });
+  } catch (err) {
+    res.status(500).json({ message: 'Failed to create order', error: err.message });
+  }
+});
+
+router.post('/verify', (req, res) => {
+  const { razorpay_order_id, razorpay_payment_id, razorpay_signature } = req.body;
+  const body = razorpay_order_id + '|' + razorpay_payment_id;
+  const expectedSignature = crypto
+    .createHmac('sha256', process.env.RAZORPAY_KEY_SECRET)
+    .update(body)
+    .digest('hex');
+
+  if (expectedSignature === razorpay_signature) {
+    res.json({ success: true, paymentId: razorpay_payment_id });
+  } else {
+    res.status(400).json({ success: false, message: 'Invalid signature' });
+  }
+});
+
+module.exports = router;

backend/routes/paymentRoutes.js

@@ -6,6 +6,7 @@ const morgan = require('morgan');
 const connectDB = require('./config/db');
 const userRoutes = require('./routes/userRoutes');
 const productRoutes = require('./routes/productRoutes');
+const paymentRoutes = require('./routes/paymentRoutes');
 
 dotenv.config();
 
@@ -23,6 +24,7 @@ if (process.env.NODE_ENV === 'development') {
 
 app.use('/api/users', userRoutes);
 app.use('/api/products', productRoutes);
+app.use('/api/payment', paymentRoutes);
 
 app.get('/', (req, res) => {
     res.send("API is running...");

backend/server.js

@@ -14,9 +14,67 @@ const Checkout = ({ cartItems, onClose, onOrderPlaced }) => {
   const gst = Math.round(cartTotal * 0.05);
   const shipping = cartTotal > 999 ? 0 : 99;
 
-  const handlePlaceOrder = () => {
-    if (onOrderPlaced) onOrderPlaced(cartItems);
-    setOrderPlaced(true);
+  const loadRazorpayScript = () =>
+    new Promise((resolve) => {
+      if (document.getElementById('razorpay-script')) return resolve(true);
+      const script = document.createElement('script');
+      script.id = 'razorpay-script';
+      script.src = 'https://checkout.razorpay.com/v1/checkout.js';
+      script.onload = () => resolve(true);
+      script.onerror = () => resolve(false);
+      document.body.appendChild(script);
+    });
+
+  const handlePlaceOrder = async () => {
+    if (paymentMethod === 'cod') {
+      if (onOrderPlaced) onOrderPlaced(cartItems);
+      setOrderPlaced(true);
+      return;
+    }
+
+    const totalAmount = cartTotal + shipping;
+    const loaded = await loadRazorpayScript();
+    if (!loaded) { alert('Razorpay failed to load. Check your internet.'); return; }
+
+    try {
+      const res = await fetch(`${import.meta.env.VITE_API_URL}/api/payment/create-order`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ amount: totalAmount }),
+      });
+      const data = await res.json();
+
+      const options = {
+        key: import.meta.env.VITE_RAZORPAY_KEY_ID,
+        amount: data.amount,
+        currency: data.currency,
+        name: 'Zappify',
+        description: 'Shoe Purchase',
+        order_id: data.orderId,
+        handler: async (response) => {
+          const verifyRes = await fetch(`${import.meta.env.VITE_API_URL}/api/payment/verify`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(response),
+          });
+          const verifyData = await verifyRes.json();
+          if (verifyData.success) {
+            if (onOrderPlaced) onOrderPlaced(cartItems);
+            setOrderPlaced(true);
+          } else {
+            alert('Payment verification failed. Contact support.');
+          }
+        },
+        prefill: { name: address.name, contact: address.phone },
+        theme: { color: '#FF3D00' },
+      };
+
+      const rzp = new window.Razorpay(options);
+      rzp.open();
+    } catch (err) {
+      console.error('Razorpay error:', err);
+      alert(`Error: ${err.message || 'Something went wrong. Is backend running on port 5001?'}`);
+    }
   };
 
   if (orderPlaced) {

frontend/src/components/Checkout.jsx

@@ -1,5 +1,4 @@
 export const ALL_PRODUCTS = [
-  // ── WOMEN / UNISEX (existing, no gender = shown in ALL) ──
   {
     id: 105,
     name: "Nike Journey Run",
@@ -201,7 +200,6 @@ export const ALL_PRODUCTS = [
       "Boasting Nike's tallest heel bag yet, these sneakers offer a super-soft ride that feels as good as it looks.",
   },
 
-  // ── MEN ──
   {
     id: 201,
     name: "Men's Street Runner Pro",