How I Added Razorpay Payments to My React Fitness Website

const MEMBERSHIP_PLANS = {
  basic: {
    name: "Basic",
    amount: 9900
  },
  premium: {
    name: "Premium",
    amount: 14900
  },
  elite: {
    name: "Elite",
    amount: 19900
  }
};

## 2. Creating a Razorpay Order on the Backend

I did not create the Razorpay order directly from the React frontend.

Instead, the frontend sends the selected plan to my Node.js + Express backend.

The backend then creates the Razorpay order using the server-side amount configured for that plan.

The basic flow looks like this:

const plan = MEMBERSHIP_PLANS[planId];

if (!plan) {
  return res.status(400).json({
    error: "Invalid membership plan"
  });
}

const razorpay = getRazorpayClient();

const order = await razorpay.orders.create({
  amount: plan.amount,
  currency: "INR",
  receipt: `receipt_${Date.now()}`
});

res.json({
  orderId: order.id,
  amount: order.amount,
  currency: order.currency,
  planName: plan.name
});

User clicks "Join Now"
        ↓
React calls /api/create-order
        ↓
Backend creates Razorpay Order
        ↓
Frontend receives Order ID
        ↓
Razorpay Checkout opens
        ↓
User selects payment method
        ↓
Payment is completed

const handlePayment = async (planId) => {
  const response = await fetch("/api/create-order", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ planId })
  });

  const order = await response.json();

  const options = {
    key: import.meta.env.VITE_RAZORPAY_KEY_ID,
    amount: order.amount,
    currency: "INR",
    name: "Official ASForge",
    description: `${order.planName} Membership`,
    order_id: order.orderId,

    handler: async (paymentResponse) => {
      // Payment verification happens here
    }
  };

  const razorpay = new window.Razorpay(options);
  razorpay.open();
};

## 4. Verifying the Payment Securely

Opening the Razorpay Checkout is only one part of the payment process.

After a successful payment, Razorpay returns payment details such as:

- `razorpay_payment_id`
- `razorpay_order_id`
- `razorpay_signature`

I send these values back to my backend for verification.

The backend generates an HMAC SHA256 signature using the Razorpay Key Secret and compares it with the signature received from Razorpay.

A simplified implementation looks like this:

const generatedSignature = crypto
  .createHmac("sha256", process.env.RAZORPAY_KEY_SECRET)
  .update(
    `${razorpay_order_id}|${razorpay_payment_id}`
  )
  .digest("hex");

const isValid =
  generatedSignature === razorpay_signature;

if (!isValid) {
  return res.status(400).json({
    success: false,
    error: "Invalid payment signature"
  });
}

res.json({
  success: true,
  message: "Payment verified successfully"
});

res.status(500).json({
  success: false,
  error: "Payment verification failed"
});

## 5. Keeping Razorpay Secrets Safe

One of the most important parts of the integration was keeping the Razorpay credentials secure.

I used environment variables for the backend credentials:

## 6. The Complete Payment Flow

After putting everything together, the complete membership flow looks like this:

## 7. Connecting Payments with Supabase

After getting the Razorpay payment flow working, I also connected Supabase to the project.

Supabase can be used to store application data such as:

- User information
- Memberships
- Payment records
- Workout plans
- Diet plans
- Progress
- AI usage
- Website events

For example, after a verified payment, a payment record can be stored with information such as:

## 8. Deploying the Payment System

My frontend is built with Vite and deployed using Vercel.

During local development, the React application communicates with my local Express server.

For production, the payment endpoints need to be available from the deployed application as well.

The production architecture can look like:

## 9. Problems I Faced During Integration

While integrating Razorpay, I ran into a few common issues.

### Duplicate function declarations

While modifying the React component, I accidentally declared the same `handlePayment` function more than once.

This resulted in an error similar to: