DEV Community: Vijay Kumar

Razorpay Payment Flow (One-Time) Payment

Vijay Kumar — Tue, 24 Mar 2026 15:31:32 +0000

Hello Everyone

Today we will understand the Razorpay Payment flow step by step clearly .

When we click on pay now button the execution starts as

Step -1 (Razorpay order creation)

First of all we have to create order in razorpay before making a payment because each payment in razorpay is tied to an order.

var instance = new Razorpay({ key_id: 'YOUR_KEY_ID', key_secret: 'YOUR_SECRET' })

const order=instance.orders.create({
  amount: 50000,
  currency: "<currency>",
  receipt: "receipt#1",
  notes: {
    key1: "value3",
    key2: "value2"
  }
})
return {order,key_secret}

Step-2 (FRontend recieves order details and key_secret)

Frontend will recieves order details and key_secret and pass these details to razorpay checkout ,because these details like key_secret and order.id and amount will tells the razorpay, for which merchant for which order.id and for what amount this current payment are.

var options = {
    key: "rzp_test_xxxxx",        // Your Razorpay Key ID
    amount: 50000,                // Amount in paise
    currency: "INR",
    name: "Your Company Name",
    description: "Test Transaction",
    order_id: "order_ABC123",     // From backend

    handler: function (response) {
        // Runs after successful payment
        console.log(response.razorpay_payment_id);
        console.log(response.razorpay_order_id);
        console.log(response.razorpay_signature);
    },

    prefill: {
        name: "John Doe",
        email: "john@example.com",
        contact: "9999999999"
    },

    notes: {
        address: "Customer Address"
    },

    theme: {
        color: "#3399cc"
    }
};
var rzp = new Razorpay(options);
rzp.open();

Step-3 (User make the payment)

User will make the payment and razorpay returns a response object with three fields to frontend which contains razorpay_id, razorpay_payment_id , razorpay_signature

{
  "razorpay_payment_id": "pay_29QQoUBi66xm2f",
  "razorpay_order_id": "order_9A33XWu170gUtm",
  "razorpay_signature": "generated_signature"
}

Step-4 (We then pass these details to callback handler for verifiying the payment)

We then pass these details to our callback handler that will generate the signature with razorpay provided orderid and payment_id and then match the razorpay provided signature with generated signature if that matched payment is real otherwise fake payment.

 handler: function (response) {
        // Runs after successful payment
        console.log(response.razorpay_payment_id);
        console.log(response.razorpay_order_id);
        console.log(response.razorpay_signature);
    },
signature == HMAC_SHA256(order_id + "|" + payment_id, SECRET)

Step- 5 (Create the webhook)

We will create a webhook in our razorpay dashboard for payment.capture event and when payment will be captured it will call our endpoint and we will mark the payment completed.

Thankyou

Razorpay Route for Payment split

Vijay Kumar — Fri, 20 Mar 2026 01:40:33 +0000

what is Razorpay Route ?

Razorpay route is feature or solution provided by raorpay which enables to split the incoming funds to different sellers,vendors, third parties, or banks.
Example - Like an e-commerce marketplace when there are mny sellers selling their products and customers buying, the funds first collect by platform (the main app) and then with the help of Route ,payment or fund wil be release or split to different sellers.

Why we need Razorpay Route ?

Razorpay route is designed for oneto many disbursement model . suppose you are running a marketplace (like amazon) there are different sellers and different customers buying multiple items from different sellers, how will each seller recieves their share ?not manually . that will be too much work so you need razorpay route there which help to split the collected payments to their corresponding sellers each seller got their share after deducting platform's commision thats why we need razorpay route

How we integrate or set up this ?

To integrate Razorpay route you first need to create Razorpay account then
these 5 steps you have to follow to integrate or set up razorpay route in your app.

You have to create a Linked account - (This is seller or vendor Business account)
You have to create a stakeholder - (This is the person behind the account)
You need to request Product Configuration (This is the product which the seller or vendor will you use )
Update the product configuration (PROVIDE YOUR BANK DETAILS, acc. no. ifsc code)
Transfer the funds to linked accounts using order, payment or direct transfers

After this test the payment and you have done .

If you like my blog please like , comment

If you need any help regarding razorpay i'm open for work at Fiverr

Why Razorpay Payments Fail Randomly (And How I Actually Debug Them)

Vijay Kumar — Wed, 11 Mar 2026 01:22:34 +0000

Few things are more frustrating for a developer than seeing this message:

“Payment failed… but we don’t know why.”

No clear error.
No obvious bug.
Just confused users and lost transactions.

If you’ve worked with payment gateways long enough, you’ve probably seen it too. At first it feels random — almost like the system is failing on its own.

But in reality, payment failures almost always leave clues.

Over time, I developed a simple debugging process that helps me track down the real issue quickly.

Here’s how I approach it.

1. Start With the Razorpay Dashboard

Before touching your code, open the Razorpay dashboard.

Most developers skip this step and immediately start debugging their backend — but the dashboard often tells you exactly what happened.

Look for three things:

Payment status
Error codes
Bank response

These details often reveal whether the problem came from:

the bank
the gateway
or your integration

You’d be surprised how often the answer is already sitting there.

2. Inspect Network Logs

Sometimes the issue isn’t Razorpay at all.

It’s the browser environment.

Open the browser’s developer tools and check the network tab during checkout.

You might discover problems like:

Razorpay scripts being blocked
Ad blockers interfering with payment scripts
CSP (Content Security Policy) errors preventing scripts from loading

From the user’s perspective it looks like a payment failure.

But technically, the checkout never loaded correctly in the first place.

3. Verify Order Creation

This is one of the most common integration mistakes.

Your backend creates an order in Razorpay, but the frontend uses a different order ID.

That tiny mismatch leads to errors like:

order_id mismatch

The fix is simple: make sure the same order ID generated by your backend is passed to the checkout.

No regeneration.
No modifications.

Just the original value.

4. Validate Signature Verification

This step is critical for security.

After a successful payment, Razorpay sends back a signature that proves the transaction is authentic.

Your backend must verify it.

If verification fails, the payment cannot be trusted, even if the frontend says it succeeded.

Typical reasons include:

incorrect secret keys
wrong hashing logic
mismatched parameters

When this fails, always treat the transaction as invalid.

5. Implement Webhooks (The Real Source of Truth)

Here’s a mistake I see often:

Developers rely entirely on the frontend success callback.

That’s risky.

Browsers crash.
Users close tabs.
Networks fail.

Webhooks solve this.

Razorpay sends server-to-server events that confirm the real payment status.

That means your backend always receives the final truth — even if the user disappears midway.

The Rule I Always Follow

After debugging enough payment systems, one rule became clear:

Never trust the frontend. Always verify on the backend.

The frontend can show success while the transaction actually failed.

Your backend — backed by webhooks and signature verification — is the only place where payment truth should live.

Razorpay Magic Checkout: The Fastest Way to Boost Conversions for Your E-Commerce Store

Vijay Kumar — Tue, 10 Mar 2026 12:36:29 +0000

In the world of e-commerce, every second matters. A slow or complicated checkout process can instantly turn potential buyers into lost customers. Studies consistently show that cart abandonment rates often exceed 70%, and one of the biggest reasons behind it is friction during checkout.

This is where Razorpay Magic Checkout steps in.

Built by Razorpay, Magic Checkout is designed to drastically simplify the checkout experience, helping businesses reduce friction, speed up payments, and significantly increase conversions.

If you're an e-commerce store owner, developer, startup founder, or online business operator, this guide will walk you through everything you need to know about Razorpay Magic Checkout and why it could be a game-changer for your online store.

What is Razorpay Magic Checkout?

Razorpay Magic Checkout is an intelligent, one-click checkout solution that automatically fills customer information such as shipping address and payment details, allowing users to complete purchases in seconds.

Instead of forcing customers to manually type:

Name
Address
Phone number
Payment details

Magic Checkout securely fetches previously stored information and enables lightning-fast checkout.

The result?

✔ Faster payments
✔ Lower cart abandonment
✔ Higher conversion rates
✔ Better user experience

For businesses trying to scale online sales, checkout optimization is one of the highest ROI improvements you can make.

Why Traditional Checkout Processes Fail

Most online stores unknowingly lose sales because of a poorly optimized checkout flow.

Typical problems include:

1. Too Many Form Fields

Customers hate filling long forms. Each extra field increases the probability of abandonment.

2. Slow Payment Experience

If checkout takes more than a few seconds, users often quit the process.

3. Repeated Data Entry

Returning customers must enter the same information again and again.

4. Poor Mobile Experience

More than 60% of e-commerce traffic now comes from mobile, where typing is slower and more frustrating.

This is exactly the friction that Razorpay Magic Checkout aims to eliminate.

How Razorpay Magic Checkout Works

Magic Checkout uses secure tokenization and intelligent autofill to streamline the entire payment flow.

Here’s how the process works:

Step 1: Customer Starts Checkout

When a user clicks Buy Now, the Razorpay Magic Checkout interface loads instantly.

Step 2: Autofill Customer Details

If the user has previously transacted via Razorpay, their details such as:

Shipping address
Phone number
Email
Preferred payment method

are automatically fetched.

Step 3: One-Click Payment

The user simply confirms the order and completes payment using:

UPI
Cards
Wallets
Net Banking

The entire checkout can be completed in just a few seconds.

Key Features of Razorpay Magic Checkout

Magic Checkout isn't just about speed—it’s about building a smarter checkout ecosystem.

Let’s explore the standout features.

1. One-Click Checkout Experience

Magic Checkout removes repetitive form filling.

Returning customers can complete purchases with minimal interaction, similar to what global giants like Amazon offer.

For businesses, this means:

Faster transactions
Less friction
Improved customer satisfaction

2. Automatic Address Autofill

Entering shipping addresses is one of the most annoying parts of online checkout.

Magic Checkout solves this by automatically populating customer details.

Benefits include:

Faster order placement
Reduced typing errors
Higher mobile conversion rates

3. Mobile-Optimized Checkout

Most customers shop on smartphones.

Magic Checkout is designed with a mobile-first experience, ensuring:

Fast loading
Smooth UI
Simple payment flow

This dramatically improves conversions for mobile traffic.

4. Multi-Payment Support

Razorpay Magic Checkout supports a wide range of payment options, including:

UPI
Debit cards
Credit cards
Net banking
Digital wallets

This flexibility ensures customers can pay using their preferred payment method.

5. Lightning-Fast Checkout Speed

Speed is one of the most critical factors affecting conversion rates.

Magic Checkout reduces the number of checkout steps, allowing transactions to happen within seconds.

This leads to:

Lower bounce rates
Faster order completion
Increased sales

Benefits for E-Commerce Businesses

Let’s look at why businesses are adopting Magic Checkout.

1. Higher Conversion Rates

When checkout becomes easier, more users complete their purchases.

Reducing friction can dramatically increase your store’s revenue without increasing traffic.

2. Reduced Cart Abandonment

Complicated checkout processes are a major cause of abandoned carts.

Magic Checkout removes these barriers, allowing customers to finish purchases quickly.

3. Better Customer Experience

A smooth checkout process builds trust and encourages repeat purchases.

Customers are far more likely to return to a store that offers fast and seamless payments.

4. Developer-Friendly Integration

For developers, Razorpay provides simple integration options.

You can implement Magic Checkout using:

APIs
SDKs
Plugins for popular e-commerce platforms

The documentation is clean and well-structured, making integration straightforward.

How Developers Can Integrate Razorpay Magic Checkout

Developers can integrate Magic Checkout into their applications with just a few steps.

The basic workflow includes:

Create a Razorpay account
Generate API keys
Integrate Razorpay Checkout API
Enable Magic Checkout features
Test the payment flow

Razorpay provides detailed developer documentation and sandbox testing environments to ensure smooth implementation.

For startups building custom platforms, this makes Magic Checkout a powerful and scalable payment solution.

Who Should Use Razorpay Magic Checkout?

Magic Checkout is ideal for a wide range of businesses.

E-Commerce Stores

Improve checkout speed and increase completed purchases.

D2C Brands

Offer premium checkout experiences similar to large marketplaces.

Startups

Quickly launch optimized payment flows without building complex systems.

SaaS Platforms

Enable fast payment processing for digital products.

Real Impact on Business Growth

Checkout optimization might sound like a small change, but it can have huge financial impact.

For example:

Faster checkout = higher conversions
Higher conversions = more revenue from the same traffic
Better experience = more repeat customers

Many businesses spend thousands on marketing to attract visitors but ignore checkout optimization.

Magic Checkout helps unlock revenue already sitting in your cart page.

Best Practices for Using Magic Checkout

To maximize results, businesses should follow a few best practices.

Keep Checkout Minimal

Avoid unnecessary steps and keep the process simple.

Prioritize Mobile Optimization

Ensure your store loads quickly and works smoothly on mobile devices.

Offer Multiple Payment Options

Different customers prefer different payment methods.

Test Checkout Flow Regularly

Monitor checkout performance and fix any friction points.

The Future of E-Commerce Checkout

The future of online payments is moving toward:

One-click checkout
Autofilled information
Instant payments
Frictionless user experiences

Customers expect checkout to be fast, secure, and effortless.

Solutions like Razorpay Magic Checkout are helping businesses meet these expectations while boosting conversions.

Final Thoughts

In e-commerce, the checkout page is where revenue is either captured or lost.

A slow, complicated checkout experience can undo all the effort spent on marketing, product development, and customer acquisition.

Razorpay Magic Checkout offers a simple yet powerful solution by making payments faster, smarter, and more user-friendly.

For e-commerce store owners, developers, startup founders, and online businesses, adopting a frictionless checkout system could be the difference between a missed opportunity and a completed sale.

If your goal is to reduce cart abandonment, increase conversions, and deliver a better payment experience, Razorpay Magic Checkout is definitely worth exploring.

Have you implemented Razorpay Magic Checkout in your store?
Share your experience in the comments and let the community know how it impacted your conversions.

The Correct Razorpay Payment Flow (Explained Simply)

Vijay Kumar — Mon, 09 Mar 2026 01:28:56 +0000

Many payment integration issues occur because developers misunderstand how the Razorpay payment lifecycle actually works. Following the correct flow ensures secure transactions, proper verification, and fewer bugs in production.

Below is the recommended Razorpay payment flow explained step-by-step.

1. User Clicks “Pay”

The payment process begins on the frontend when the user clicks the Pay button.

At this moment, the frontend should not attempt to process the payment directly. Instead, it should trigger an API request to your backend to create a payment order.

2. Backend Creates an Order

Your backend communicates with the Razorpay API to create an order. This step defines the payment amount and generates an order ID, which will later be used by the checkout.

const order = await razorpay.orders.create({
  amount: 10000, // Amount in paise (₹100)
  currency: "INR",
  receipt: "order_rcptid_11"
});

The response includes important details such as:

order.id
order.amount
order.currency

This order ID is essential because Razorpay uses it to track the transaction.

3. Frontend Opens Razorpay Checkout

Once the backend returns the order details, the frontend initializes the Razorpay checkout using the order ID.

var options = {
  key: "RAZORPAY_KEY_ID",
  amount: order.amount,
  order_id: order.id
}

This opens the Razorpay payment interface where the user can complete the transaction using UPI, cards, net banking, or wallets.

4. User Completes the Payment

After the payment is successfully completed, Razorpay returns the following values to the frontend:

razorpay_payment_id
razorpay_order_id
razorpay_signature

These values represent the payment details generated by Razorpay.

However, this does not mean the payment should be trusted yet.

5. Backend Verifies the Signature (Critical Step)

The frontend must send the returned payment data to your backend.

Your backend then verifies the authenticity of the payment by generating a signature using your Razorpay secret key.

crypto.createHmac("sha256", secret)

The backend compares the generated signature with the razorpay_signature returned by Razorpay.

If the signatures match, the payment is valid.
If they do not match, the payment must be rejected.

This verification step protects your system from payment tampering or fraud.

6. Store the Payment in the Database

Only after successful verification should the payment be stored in your database.

Typical fields to store include:

payment_id
order_id
amount
status
user_id
timestamp

Storing verified payment records ensures accurate accounting and helps with refunds or dispute resolution later.

7. Fulfill the Order

Once the payment is verified and stored, you can safely proceed with order fulfillment.

Examples include:

Granting access to a digital product
Activating a subscription
Confirming an order
Sending a receipt or confirmation email

At this stage, the transaction can be considered complete.

Final Thoughts

A reliable Razorpay integration depends on following the correct lifecycle:

User initiates payment
Backend creates an order
Frontend launches checkout
User completes payment
Backend verifies the signature
Store the verified payment
Fulfill the order

If this flow is implemented correctly—especially the signature verification step—most Razorpay payment bugs and security issues can be avoided.

Razorpay Integration Guide: 5 Mistakes That Break Payments

Vijay Kumar — Sun, 08 Mar 2026 02:53:33 +0000

Integrating Razorpay looks easy — until payments start failing in production.

Many developers successfully open the checkout page but still run into issues like:

❌ Payments not verifying
❌ Incorrect amounts being charged
❌ Successful payments not recorded
❌ Order status not updating

After fixing multiple Razorpay integrations, I noticed something interesting:

Most payment failures happen because of a few small mistakes.

In this guide, you'll learn the 5 most common Razorpay integration mistakes — and how to avoid them.

📚 Table of Contents

Razorpay Payment Flow
Mistake #1: Creating Orders on the Frontend
Mistake #2: Using the Wrong Amount Format
Mistake #3: Skipping Payment Verification
Mistake #4: Not Implementing Webhooks
Mistake #5: Using Test Keys in Production
Final Thoughts

Razorpay Payment Flow (Overview)

Before looking at the mistakes, it's important to understand the correct payment flow.

User clicks Pay
↓
Frontend sends request to Backend
↓
Backend creates order using Razorpay API
↓
Order ID returned to Frontend
↓
Frontend opens Razorpay Checkout
↓
User completes payment
↓
Frontend sends payment details to Backend
↓
Backend verifies payment signature
↓
Payment confirmed

Key Principles

✔ Orders should be created on the backend
✔ Checkout runs on the frontend
✔ Payment verification must happen on the backend

This separation ensures security and reliability.

❌ Mistake #1: Creating Orders on the Frontend

A very common mistake is trying to create Razorpay orders directly from the frontend.

❌ Wrong Approach

// frontend
fetch("https://api.razorpay.com/v1/orders")

This exposes your secret API key, which is extremely dangerous.

Anyone could inspect your code and misuse it.

✅ Correct Approach

Orders should always be created on the backend.

const Razorpay = require("razorpay");

const razorpay = new Razorpay({
  key_id: process.env.RAZORPAY_KEY_ID,
  key_secret: process.env.RAZORPAY_KEY_SECRET
});

const order = await razorpay.orders.create({
  amount: 50000,
  currency: "INR",
  receipt: "receipt_123"
});

Secure Order Creation Flow

User clicks Pay
      ↓
Frontend requests backend to create order
      ↓
Backend calls Razorpay API
      ↓
Razorpay returns Order ID
      ↓
Backend sends Order ID to frontend
      ↓
Checkout opens

❌ Mistake #2: Using the Wrong Amount Format

Razorpay expects the amount in paise, not rupees.

This small detail causes many integrations to fail.

❌ Incorrect Example

amount: 500

✅ Correct Example

amount: 500 * 100

If the customer needs to pay ₹500, Razorpay expects:

Amount Conversion Flow

Customer payment: 500 INR
        ↓
Convert to paise
        ↓
500 × 100
        ↓
Send 50000 to Razorpay

💡 Rule to remember

Amount sent to Razorpay = Rupees × 100

❌ Mistake #3: Skipping Payment Verification

Many developers assume that if Razorpay checkout shows:

Payment Successful

then the payment is complete.

That is not enough proof.

You must verify the payment signature on your backend.

Payment Verification Flow

User completes payment
        ↓
Razorpay sends payment response to frontend
        ↓
Frontend sends payment_id, order_id, signature to backend
        ↓
Backend verifies signature using Razorpay secret key
        ↓
Backend confirms payment

Without verification, attackers could fake payment responses.

❌ Mistake #4: Not Implementing Webhooks

Some developers rely only on the frontend response.

This works during testing, but in production payments can be:

delayed
retried
refunded
partially captured

Webhooks notify your backend when these events happen.

Webhook Event Flow

Payment event occurs on Razorpay
        ↓
Razorpay sends webhook request
        ↓
Your backend webhook endpoint receives event
        ↓
Backend updates database
        ↓
Order status updated

Common webhook events include:

payment.captured
payment.failed
refund.processed

Without webhooks, your backend won't know the real payment state.

❌ Mistake #5: Using Test Keys in Production

This mistake happens more often than you think.

During development, Razorpay provides test API keys.

If those keys are deployed to production, real payments will fail.

Environment Variables

RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=

Deployment Flow

Development
   ↓
Use Razorpay Test Keys
   ↓
Testing completed
   ↓
Switch to Live Keys
   ↓
Deploy to Production

Always double-check this before deployment.

Final Thoughts

Payment integrations rarely fail because of complex code.

They fail because of small details developers overlook, such as:

creating orders on the wrong layer
sending incorrect amounts
skipping payment verification
ignoring webhooks
deploying with test keys

Fixing these five mistakes will make your Razorpay integration:

✔ Secure
✔ Reliable
✔ Production-ready

💬 Discussion

Have you faced issues integrating Razorpay in production?

What was the hardest part of the payment integration?

Share your experience in the comments 👇

Razorpay Webhooks in MERN Stack

Vijay Kumar — Sat, 07 Mar 2026 02:34:01 +0000

If you are building payment features with Razorpay in a MERN stack application, you will eventually face a problem that every freelancer encounters:

How do I reliably confirm a payment when the user closes the browser, refreshes the page, or the network fails?

This is where Razorpay Webhooks become essential.

In this guide, I’ll walk you through how webhooks work in Razorpay and how to implement them in a MERN stack (MongoDB, Express, React, Node.js) — in a way that is reliable, secure, and production-ready.

What is a Razorpay Webhook?

A webhook is an automated message sent from Razorpay to your server whenever a specific event occurs.

Instead of your server repeatedly asking Razorpay:

“Did the payment succeed yet?”

Razorpay sends your server a notification automatically.

Examples of webhook events include:

payment.captured
payment.failed
order.paid
refund.processed
subscription.charged

So whenever something happens, Razorpay pushes the event to your backend API.

Why Webhooks are Critical in MERN Applications

Many developers rely only on the frontend payment success callback.

That works during testing, but in production it causes problems like:

User closes the payment window
Internet disconnects
Frontend crashes
Payment succeeds but frontend never updates

With webhooks:

Payment confirmation happens server-to-server
It works even if the user leaves the page
Your database stays accurate

This is why serious payment systems always use webhooks.

MERN Stack Architecture with Razorpay Webhooks

The typical flow looks like this:

User -> React Frontend
       -> Node/Express Backend
           -> Razorpay Order Created

User completes payment

Razorpay -> Webhook -> Node Server

Node Server -> Verify Signature -> Update MongoDB

So the webhook endpoint becomes the source of truth for payment success.

Step 1: Create a Webhook in Razorpay Dashboard

Go to:

Razorpay Dashboard → Settings → Webhooks

Add a new webhook:

URL: https://yourdomain.com/api/webhook/razorpay
Secret: your_webhook_secret

Select events like:

payment.captured
payment.failed
order.paid

Save it.

Now Razorpay will send POST requests to your backend whenever these events occur.

Step 2: Create Webhook Endpoint in Express

In your Node.js backend, create a webhook route.

Example:

const express = require("express");
const crypto = require("crypto");

const router = express.Router();

router.post("/webhook/razorpay", express.raw({ type: "application/json" }), (req, res) => {

  const webhookSecret = process.env.RAZORPAY_WEBHOOK_SECRET;

  const signature = req.headers["x-razorpay-signature"];

  const generatedSignature = crypto
    .createHmac("sha256", webhookSecret)
    .update(req.body)
    .digest("hex");

  if (generatedSignature === signature) {
    const event = JSON.parse(req.body);

    console.log("Webhook verified:", event.event);

    // Handle events here
    if (event.event === "payment.captured") {
        const payment = event.payload.payment.entity;

        // Update MongoDB
        console.log("Payment Successful:", payment.id);
    }

    res.status(200).send("Webhook received");

  } else {
    res.status(400).send("Invalid signature");
  }
});

module.exports = router;

Step 3: Update MongoDB Payment Status

When a webhook confirms the payment, update your database.

Example:

await Order.findOneAndUpdate(
  { razorpayOrderId: payment.order_id },
  {
    paymentStatus: "paid",
    razorpayPaymentId: payment.id
  }
);

Now your system knows the real payment status.

Step 4: Connect This with Your React Frontend

Your frontend should not blindly trust the payment success response.

Instead:

Payment happens
Webhook confirms payment
Backend updates MongoDB
Frontend fetches updated order status

This ensures data consistency.

Step 5: Testing Razorpay Webhooks

Testing webhooks can be confusing at first.

Here are the easiest methods:

Option 1: Use ngrok

Expose your local server:

ngrok http 5000

Use the generated URL as the webhook URL.

Example:

https://abcd1234.ngrok.io/api/webhook/razorpay

Option 2: Razorpay Webhook Test Tool

Razorpay dashboard lets you send test webhook events.

Use this to simulate:

payment success
payment failure

Security Best Practices

Never skip these steps in production.

Always Verify Webhook Signature

Without verification, anyone could send fake payment events to your API.

Always check:

x-razorpay-signature

Use Raw Body Parsing

Do NOT use normal express.json() for webhook routes.

Use:

express.raw()

Otherwise the signature verification fails.

Store Webhook Logs

Save webhook responses for debugging.

Example Mongo schema:

WebhookLogs
- event
- payload
- receivedAt

This helps track payment issues.

Common Mistakes Developers Make

Updating payment status from frontend

This leads to fake confirmations.

Always update from webhook events.

Ignoring retry events

If your server fails, Razorpay retries webhooks automatically.

Make your API idempotent.

Not handling failed payments

Track both:

payment.captured
payment.failed

Final Thoughts

If you are a freelancer building payment systems with Razorpay and MERN, webhooks are not optional — they are the backbone of reliable payment processing.

Once implemented correctly, webhooks allow you to:

confirm payments securely
automate order processing
prevent payment inconsistencies
build production-grade payment systems

And most importantly, they ensure your database always reflects the real payment status.

✅ If you're building Razorpay integrations with MERN, mastering webhooks is one of the most valuable backend skills you can have.

Open for freelance work fiverr

Razorpay Payment Verification Failed in MERN Stack

Vijay Kumar — Fri, 06 Mar 2026 10:41:07 +0000

When integrating Razorpay with a MERN stack application (MongoDB, Express, React, Node.js), one issue appears again and again for developers:

Payment succeeds on Razorpay, but backend verification fails.

The payment popup shows “Payment Successful”, but your server rejects the request or does not store the payment in the database. This can break order confirmation, subscriptions, or digital product delivery.

In this article, we’ll focus on one specific problem — Razorpay payment signature verification failure — and show exactly how to fix it.

The Problem: Razorpay Payment Verification Failed

After a user completes payment, Razorpay sends three important values to your frontend:

razorpay_payment_id
razorpay_order_id
razorpay_signature

Your backend must verify these values to confirm that the payment is authentic and not tampered with.

However, many MERN developers get an error like:

Payment verification failed
Invalid signature

Even though the payment was successful.

Why This Happens

The most common reason is incorrect signature generation on the backend.

Razorpay expects you to generate a hash using:

order_id + "|" + payment_id

and then compare it with the razorpay_signature.

If even one small detail is wrong, verification fails.

Common mistakes include:

Using wrong environment variable for secret key
Wrong string format
Using payment_id before order_id
Missing | separator
Not using SHA256 hashing

Correct Razorpay Payment Verification (Node.js)

Here is the correct way to verify Razorpay payments in a MERN backend.

const crypto = require("crypto");

app.post("/verify-payment", (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_SECRET)
  .update(body.toString())
  .digest("hex");

if (expectedSignature === razorpay_signature) {

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

} else {

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

}

});

If implemented correctly, this will solve 90% of Razorpay verification issues in MERN apps.

Important Things Most Developers Miss

1️⃣ Never Verify Payment on the Frontend

Verification must always happen on the Node.js backend, because your Razorpay secret key should never be exposed in React.

2️⃣ Use Environment Variables

Your secret key should always be stored like this:

RAZORPAY_KEY_ID=xxxxxxxx
RAZORPAY_SECRET=xxxxxxxx

And accessed with:

process.env.RAZORPAY_SECRET

3️⃣ Make Sure Order is Created from Backend

Always create Razorpay orders using your Express server, not directly from React.

This prevents manipulation of the payment amount.

Correct MERN Razorpay Payment Flow

A secure flow looks like this:

React user clicks Pay Now
React calls backend /create-order
Node.js creates Razorpay order
React opens Razorpay checkout
User completes payment
Backend /verify-payment checks signature
Store payment data in MongoDB

If verification fails, you simply reject the order.

Final Thoughts

The Razorpay signature verification error is one of the most common issues developers face when integrating payments in a MERN stack application.

The good news is that the fix is simple once you understand how Razorpay generates signatures.

Always verify payments on the backend, generate the hash correctly, and keep your secret keys secure.

Once implemented properly, Razorpay becomes a very reliable payment solution for MERN applications.

Open for Freelance Work

If you need help with:

MERN Stack Development
Razorpay or Stripe Integration
Payment Gateway Debugging
Backend API Development
Startup MVP Development

DM me Fiverr — I’m open for freelance work and collaborations.

Razorpay Integration with MERN Stack (Complete Developer Guide)

Vijay Kumar — Thu, 05 Mar 2026 07:47:26 +0000

Online payments are a core part of modern web applications. If you are building an e-commerce store, SaaS product, or marketplace in India, integrating Razorpay is one of the most common solutions.

In this guide, we’ll walk through a complete Razorpay integration using the MERN stack (MongoDB, Express, React, Node.js). By the end, you will understand how to create orders, open the checkout, verify payments, and secure your payment flow.

Why Use Razorpay?

Razorpay is a popular payment gateway used by thousands of startups and businesses in India. It supports multiple payment methods such as:

UPI
Credit / Debit Cards
Netbanking
Wallets
International cards

For developers, Razorpay provides a simple API and SDK that works well with Node.js applications.

MERN Stack Payment Flow

When integrating payments in a MERN application, the flow usually looks like this:

User clicks Pay Now on the frontend (React).
Your backend (Node.js + Express) creates an order using the Razorpay API.
The frontend opens Razorpay Checkout.
The user completes the payment.
Razorpay returns a payment ID and signature.
Your backend verifies the payment signature.
If valid, you update the order in MongoDB.

This verification step is critical for preventing fraud.

Step 1: Install Razorpay in Node.js

First install the Razorpay SDK.

npm install razorpay

Now create a Razorpay instance in your backend.

const Razorpay = require("razorpay");

const razorpay = new Razorpay({
  key_id: process.env.RAZORPAY_KEY_ID,
  key_secret: process.env.RAZORPAY_KEY_SECRET,
});

You can get these API keys from the Razorpay Dashboard.

Step 2: Create an Order (Backend)

Before opening checkout, your backend must create a Razorpay order.

app.post("/create-order", async (req, res) => {
  const options = {
    amount: 50000,
    currency: "INR",
    receipt: "order_rcptid_11"
  };

  const order = await razorpay.orders.create(options);
  res.json(order);
});

Important fields:

amount → in the smallest currency unit (₹500 = 50000 paise)
currency → usually INR
receipt → your internal order reference

Step 3: Open Razorpay Checkout (React)

After receiving the order from the backend, open the Razorpay checkout.

const options = {
  key: "RAZORPAY_KEY_ID",
  amount: order.amount,
  currency: order.currency,
  order_id: order.id,
  handler: function (response) {
    console.log(response);
  }
};

const rzp = new window.Razorpay(options);
rzp.open();

The checkout popup allows the user to complete the payment using any available method.

Step 4: Verify Payment (Backend)

Never trust the frontend payment response directly.

You must verify the signature on your server.

const crypto = require("crypto");

const generatedSignature = crypto
  .createHmac("sha256", process.env.RAZORPAY_KEY_SECRET)
  .update(order_id + "|" + payment_id)
  .digest("hex");

if (generatedSignature === razorpay_signature) {
  console.log("Payment verified");
}

If the signature matches, the payment is legitimate.

Step 5: Save Payment in MongoDB

After verification, store the payment in your database.

Example fields:

orderId
paymentId
amount
status
userId

This helps with refunds, reporting, and order tracking.

Best Practices for Razorpay Integration

Here are some important tips when integrating Razorpay in production:

Always verify payment signatures on the backend
Store order and payment details in your database
Use environment variables for API keys
Implement Razorpay webhooks for payment updates
Handle failed payments properly

Common Razorpay Issues Developers Face

Many developers run into these problems:

Currency mismatch errors
Payment verification failure
Webhook signature errors
Checkout not opening in React apps

Most of these issues happen because of incorrect order creation or signature verification.

Final Thoughts

Integrating Razorpay with the MERN stack is straightforward once you understand the correct payment flow. The key steps are:

Create the order on the backend
Open checkout on the frontend
Verify the payment signature
Save the transaction in the database

Once implemented correctly, Razorpay becomes a reliable payment solution for Indian startups and global businesses.

If you’re facing Razorpay integration issues with MERN, Node.js, or Shopify, feel free to reach out.Fiverr | upworkI regularly help businesses debug and fix payment gateway problems in production systems.

How to Disable Specific Payment Methods in Razorpay Using Custom Code (MERN Stack)

Vijay Kumar — Tue, 17 Feb 2026 12:54:55 +0000

When integrating payments in a MERN app, sometimes you don’t want to show every payment option.

Maybe:

You want to disable UPI for high-value orders
Disable Wallets temporarily
Allow only Cards for international payments
Or apply business rules dynamically

Razorpay allows you to control this using the method option in Checkout.

In this guide, I’ll show you how to disable specific payment methods using custom logic in a MERN stack app.

🏗 Tech Stack

MongoDB
Express
React
Node.js
Razorpay Checkout

Step 1: Install Razorpay (Backend)

npm install razorpay

Step 2: Create Order in Backend (Node + Express)

const Razorpay = require("razorpay");

const razorpay = new Razorpay({
  key_id: process.env.RAZORPAY_KEY_ID,
  key_secret: process.env.RAZORPAY_KEY_SECRET,
});

app.post("/create-order", async (req, res) => {
  const { amount } = req.body;

  const options = {
    amount: amount * 100, // convert to paise
    currency: "INR",
    receipt: "receipt_order_1",
  };

  const order = await razorpay.orders.create(options);

  res.json({
    order,
    // 👇 Send custom flags to frontend
    paymentConfig: {
      allowUPI: false,
      allowWallet: false,
      allowCard: true,
      allowNetbanking: true,
    },
  });
});

Now we control which payment methods are allowed dynamically.

Step 3: Configure Razorpay Checkout (React Frontend)

const options = {
  key: "YOUR_RAZORPAY_KEY",
  amount: order.amount,
  currency: "INR",
  order_id: order.id,

  method: {
    upi: paymentConfig.allowUPI,
    wallet: paymentConfig.allowWallet,
    card: paymentConfig.allowCard,
    netbanking: paymentConfig.allowNetbanking,
  },

  handler: function (response) {
    console.log("Payment Successful:", response);
  },

  theme: {
    color: "#3399cc",
  },
};

const rzp = new window.Razorpay(options);
rzp.open();

That’s it.

You’ve now dynamically disabled payment methods using backend logic.

🔥 Real-World Use Cases

Here’s where this becomes powerful:

1️⃣ High-Value Orders

Disable UPI for payments above ₹50,000.

2️⃣ Subscription-Only Card Payments

Allow only cards for recurring billing.

3️⃣ Region-Based Restrictions

Disable netbanking for international users.

4️⃣ Feature Flags

Turn payment methods on/off without redeploying frontend.

⚠ Important Notes

Always create orders from backend (never from frontend).
Never expose your Razorpay secret key.
Verify payment signature after success.
Keep method logic business-driven, not hardcoded.

💡 Pro Tip (Production Level)

Instead of hardcoding:

allowUPI: false

Use business logic:

allowUPI: amount < 50000

Or fetch config from database:

const config = await PaymentSettings.findOne();

This makes your system scalable.

Final Thoughts

Most developers just integrate Razorpay and leave all payment methods enabled.

But real-world systems need control.

Using the method option in Razorpay Checkout, combined with backend-driven logic in MERN, gives you full flexibility over your payment flow.

If you're building serious production apps, this level of control matters.

Why I Built Stoqyy

Vijay Kumar — Sat, 20 Dec 2025 10:27:23 +0000

Most small businesses don’t lack effort — they lack clarity.

Sales are tracked in one place, stock in another, and profits live in someone’s head or a notebook. This fragmentation causes mistakes, stress, and missed growth opportunities.

Stoqyy was built to solve this exact problem.

Instead of juggling tools, Stoqyy brings sales, inventory, and profit insights into one simple dashboard designed specifically for small retailers. No complex setup. No unnecessary features. Just what actually helps day-to-day decisions.

I’m building Stoqyy in public, listening closely to real business owners, and optimizing for simplicity over complexity.

If you’re running a small business and want clarity instead of chaos, this is for you.

👉 https://stoqyy.com

Small Business Inventory App

Vijay Kumar — Fri, 19 Dec 2025 07:46:34 +0000

Running a small shop isn’t easy. Many business owners track sales, inventory, and profits across multiple apps, notebooks, or even in their heads. This fragmented approach slows decisions and leads to errors.

That’s why I built Stoqyy, a small business inventory app and sales dashboard for retailers that brings everything into one simple, mobile-friendly dashboard.

The Problem

Small retailers often face:

Sales spread across multiple tools
Inventory tracked manually
Profits calculated roughly

This creates stress, wasted time, and missed opportunities.

The Solution

Stoqyy solves these problems by:

Real-Time Sales Tracking – See daily and monthly sales instantly
Smart Inventory Management – Get alerts before stock runs out
Profit Insights – Know your margins at a glance
Customer Insights – Track purchase history and loyalty
Mobile-First Dashboard – Manage your business anywhere

Technical Approach

Building Stoqyy involved:

Lightweight APIs for fast real-time updates
Clean, minimal UI for low-end devices
Scalable backend for multi-store or multi-category support
Optimized performance without sacrificing clarity

Lessons Learned

Simplicity scales better than complexity
UI is as much an engineering challenge as a design one
Real-world feedback is critical for usability

Try It Today

Stoqyy makes running your business simple and stress-free. Track sales, manage inventory, and monitor profits—all in one dashboard.

🔗 https://stoqyy.com

Keywords: small business inventory app, sales dashboard for retailers, SaaS for small shops, inventory management software