A seamless and secure payment experience is the cornerstone of any e-commerce application. Whether you're building a simple online store or a full-featured multi-vendor platform using MERN stack development services, integrating a payment gateway is a must. This post will walk you through integrating Stripe (international) or Razorpay (popular in India) with React, Express, and MongoDB.

1. Choose a Payment Gateway: Stripe or Razorpay

• Stripe: Global, developer-friendly, supports cards, wallets, subscriptions
• Razorpay: Popular in India, supports UPI, netbanking, cards
• Both offer SDKs, test modes, and RESTful APIs

2. Backend Setup Using Express

Install the SDK and create a secure payment route.

// server/routes/payment.js (Stripe Example)
import express from 'express';
import Stripe from 'stripe';
const router = express.Router();
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

router.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: req.body.items.map(item => ({
      price_data: {
        currency: 'usd',
        product_data: { name: item.name },
        unit_amount: item.price * 100,
      },
      quantity: item.quantity,
    })),
    mode: 'payment',
    success_url: `${process.env.CLIENT_URL}/success`,
    cancel_url: `${process.env.CLIENT_URL}/cancel`,
  });

  res.json({ id: session.id });
});

export default router;

3. Frontend Integration with Stripe Checkout

Use the Stripe JS SDK or Razorpay checkout widget on the React side.

// client/pages/Checkout.jsx
import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';

const stripePromise = loadStripe('pk_test_...');

const handleCheckout = async () => {
  const stripe = await stripePromise;
  const res = await axios.post('/api/create-checkout-session', {
    items: [{ name: 'Product A', price: 1000, quantity: 1 }],
  });
  await stripe.redirectToCheckout({ sessionId: res.data.id });
};

4. Razorpay Integration (Optional)

Razorpay supports both server-initiated orders and client-only payments.

• Generate an order ID from your Express backend
• Use Razorpay JS to open the payment modal
• Listen for `razorpay_payment_id` and verify it on the backend

5. Save Payment and Order Data in MongoDB

Once payment is successful, store order details securely in your database.

• Create an `orders` collection with user, items, total, payment ID
• Send order confirmation emails using SendGrid or Mailgun
• Update product stock quantity post-payment

6. Test & Go Live Securely

• Use test keys and dummy cards during development
• Set environment variables for API keys securely (.env)
• Always verify payments server-side before fulfilling orders
• Enable webhooks for real-time payment updates (optional)

Conclusion

Adding a payment gateway to your MERN stack e-commerce site is easier than ever with modern APIs. Whether you choose Stripe for global reach or Razorpay for localized transactions, integrating secure checkout flows enhances trust and boosts conversions. With clean separation between backend payment logic and frontend UI, your online store stays secure, scalable, and user-friendly.