Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Razorpay Payment Gateway Setup in MERN Stack: A Step-by-Step
Rating: 4.5 out of 5(15 ratings)
1,087 students

Razorpay Payment Gateway Setup in MERN Stack: A Step-by-Step

Learn to Integrate Razorpay Payment Gateway in a MERN Stack Application with Ease and Confidence.
Created byKhaiser Khanam
Last updated 4/2026
English
English [Auto],

What you'll learn

  • Learn to set up a robust server environment using Node.js and Express for seamless backend operations.
  • Discover how to set up a modern frontend application using Vite for faster development and smooth builds.
  • Explore the integration of Razorpay for payment processing, from setup to managing transactions .
  • Learn how to create and customize Razorpay orders for efficient and scalable payment workflows.
  • Implement a complete user signup process with Razorpay to enable a secure and seamless user experience.
  • Understand how to validate Razorpay payment signatures to ensure secure and authentic transactions.
  • Design a complete payment flow, from initiating transactions to redirecting users post-payment success.

Explore related topics

Course content

1 section • 17 lectures • 1h 32m total length

  • Project Introduction0:54

    Begin a from-scratch Razorpay integration by building back end and front end, connecting both layers, and signing up for Razorpay, including test mode setup and required details.

  • Project Demo2:15

    Watch a complete project demo showing four products, API data fetching, and a step-by-step Razorpay payment gateway integration across front end and back end.

  • Backend Code Setup9:22

    Initialize a MERN backend project, install express, dotenv, and nodemon, and implement esm import/export with a port configured from config.env. The setup enables automatic restarts and environment management.

  • Razorpay Signup Process6:56

    Walk through the Razorpay signup process, verify with otp, complete kyc with Digilocker or manual identity proof, provide business and bank details, and download api keys in test mode.

  • Razorpay Installation and Setup4:19

    Install the razorpay package and set api key and api secret in config.env. Create and export a Razorpay instance using keyId and keySecret from process.env for use in other files.

  • Controllers and Routes9:02

    Set up controllers and routes in a MERN app to handle Razorpay payments, create controller and route files, and test with Postman via api/v1 payment paths.

  • Creating Order6:30

    Create a Razorpay order in a MERN app by importing the instance, setting amount and INR currency, creating and returning the order, and using express.json to parse body for paise.

  • Get access to API Key2:59

    Implement an async getKey endpoint that returns the Razorpay API key from config.env via process.env. Expose a versioned route (api/v1) so the front end can securely access the key.

  • Setting up Frontend Application3:50

    Create a frontend folder, scaffold a React app with Vite, install dependencies, run the dev server, and customize App.jsx, styles, and public assets including payment success CSS and products CSS.

  • MERN Stack E-Commerce0:26
  • [NOTE] PHP Ecommerce Website with Admin,User & Razorpay Payment API0:14
  • Working on Products8:34

    Build a data-driven product listing in a MERN app by creating a products component, wiring a data.js array, and rendering four product cards with image, title, and price via map.

  • Working on Checkout Handler9:39

    Develop a checkout handler in a MERN app to pass amount via Axios, retrieve the Razorpay key and order, and connect front end to back end with a proxy.

  • Opening Razorpay6:57

    Learn how to open Razorpay checkout in a MERN stack by configuring the frontend script, API keys, and payment options, with order id and backend verification in test mode.

  • Payment Verification12:31

    Implement payment verification in a MERN app by validating Razorpay signatures with crypto, comparing expected and actual signatures, and redirecting to a payment success page with the Razorpay reference.

  • Payment Success Page7:51

    Configure a payment success page in a MERN stack app by routing with react router dom, reading the payment reference from the URL, and displaying the Razorpay transaction id.

  • Wrap Up0:34

    Complete the Razorpay setup and learn to integrate Razorpay into your e-commerce application by following the steps. Seek guidance by asking any doubts to wrap up this course.

Requirements

  • Basics of React.js
  • Node.js fundamentals: server setup, async.
  • Express.js basics: routing, simple APIs.

Description

Welcome to the FREE Razorpay Integration in MERN Stack Course!

This free course is designed to help you seamlessly integrate Razorpay into a MERN stack application. Say goodbye to complex payment workflows and hello to a structured, step-by-step approach to mastering payment gateway integration.


What You'll Learn:

  • Backend Code Setup: Lay the foundation for your payment gateway with robust backend coding.

  • Razorpay Signup Process: Learn how to create an account and set up Razorpay for test mode.

  • Razorpay Installation and Setup: Install Razorpay and configure it for seamless integration.

  • Controllers and Routes: Organize your backend logic with clean, maintainable controllers and routes.

  • Create Order: Understand the process of generating orders for payment transactions.

  • Get API Key: Learn to retrieve and use Razorpay API keys securely.

  • Setting up Frontend Application: Build the frontend with a focus on user-friendly payment flows.

  • Working on Products: Create product pages that link directly to your Razorpay payment flow.

  • Checkout Handler: Implement a checkout system that connects your products to Razorpay.

  • Opening Razorpay: Learn how to open Razorpay's payment interface from your application.

  • Payment Verification: Ensure secure and authentic payment handling with signature verification.

  • Payment Success Page: Redirect users to a polished success page after payment completion.


Why You'll Love This Course:

  • Simple and Effective Approach: This course breaks down payment integration into easy-to-follow steps, perfect for beginners.

  • Real-World Application: Learn skills that you can immediately apply to real-world projects.

  • Practical Learning: Work on a complete payment integration project to solidify your knowledge.


Course Highlights:

  • Comprehensive and Free: Get all the knowledge you need to integrate Razorpay in a MERN stack project at no cost.

  • Hands-On Practice: Build your own functional payment system and gain confidence.

  • Ongoing Support: We’re here to help you succeed with timely assistance whenever you need it.


Join Me Today:

Enroll now and learn how to integrate Razorpay into your MERN stack applications for free! Whether you’re starting your development journey or adding new skills, this course is your gateway to mastering payment gateway integration.

Start your journey to building seamless payment experiences today.


HAPPY LEARNING!

Who this course is for:

  • Beginners looking to master payment integration with Razorpay.
  • Aspiring developers eager to implement Razorpay in test mode.
  • React.js and Node.js learners aiming to enhance their skills.
  • New developers exploring backend-to-frontend integration.
  • Self-learners building practical skills in web development.

Report abuse