How I Added Razorpay Payments to My React Fitness Website

Integrating Razorpay Payments to a React Fitness Website

Integrating Razorpay payments into a React fitness website requires careful planning and execution. This article outlines the process of adding Razorpay payments to a React-based fitness platform, including setting up membership plans, creating Razorpay orders on the backend, opening Razorpay checkout from React, and verifying payments securely on the server.

The project utilizes React + Vite, Node.js + Express, Razorpay, Supabase, and Vercel. The goal is to create a simple flow: Choose Plan → Create Order → Open Razorpay Checkout → Complete Payment → Verify Payment.

1. Setting Up the Membership Plans

The fitness website includes three membership plans: Basic at ₹99, Premium at ₹149, and Elite at ₹199. Each plan has its own "Join Now" button. When a user clicks a button, the frontend sends the selected plan to the backend, rather than trusting the price from the browser directly. This ensures that payment amounts are controlled on the server side for security reasons.

2. Creating a Razorpay Order on the Backend

The backend, built with Node.js and Express, creates Razorpay orders instead of the frontend. The React frontend sends the selected plan to the backend, which then creates the Razorpay order using the server-side amount set for that plan. The backend code snippet demonstrates how to create the order using Razorpay API and return the order details to the frontend.

3. Opening Razorpay Checkout from React

After the backend creates the Razorpay order, the frontend receives the order ID. The frontend then uses Razorpay Checkout SDK to open the payment window. The frontend sends the order ID to the backend, which forwards it to the Razorpay API. The user selects their payment method, and upon successful payment, Razorpay provides payment details, which are sent back to the backend for verification.

4. Verifying the Payment Securely

Payment verification is a crucial step in the integration process. After opening the Razorpay checkout, Razorpay sends payment details back to the backend. The backend generates an HMAC SHA256 signature using the Razorpay Key Secret and compares it with the signature received from Razorpay. If the signatures match, the payment is verified as successful. The backend code snippet demonstrates how to implement this verification process.

5. Keeping Razorpay Secrets Safe

To ensure the security of Razorpay credentials, environment variables are used for backend credentials. This prevents exposing sensitive information and maintains the integrity of the integration. The environment variables include Razorpay key ID and secret.

6. Connecting Payments with Supabase

After successfully implementing the Razorpay payment flow, the project is connected to Supabase. Supabase allows storing various application data, such as user information, memberships, payment records, workout plans, and more. After a verified payment, a payment record is stored with details like user ID, plan, amount, Razorpay order ID, payment status, and created at timestamp.

7. Deploying the Payment System

The frontend, built with Vite, is deployed using Vercel. During local development, the React application communicates with the local Express server. For production deployment, the frontend communicates with the deployed Express server. This ensures that the payment system is secure and reliable when deployed to the production environment.

By following these steps, developers can successfully integrate Razorpay payments into a React fitness website, providing users with a seamless and secure payment experience.