payload razorpay

@codenik/payload-razorpay

A production-ready Razorpay payment adapter for the Payload CMS Ecommerce Plugin.

Integrate Razorpay into your Payload CMS storefront with minimal configuration. This adapter provides seamless payment processing, secure payment verification, and native integration with the Payload Ecommerce payment system.

Built for Payload CMS 3.x, TypeScript, ESM, and Next.js.

---

✨ Features

• 💳 Native Razorpay Checkout integration
• 🛒 Razorpay Orders API support
• 🔒 Secure payment signature verification
• 📦 Automatic transaction creation
• ⚡ Fully typed with TypeScript
• 🚀 ESM compatible
• 🎯 Payload CMS 3.x compatible
• 🌐 Next.js compatible
• 🔧 Customisable payment labels
• 🧩 Seamless integration with Payload Ecommerce
• 🇮🇳 Optimised for India and all Razorpay-supported regions

---

Requirements

Before installing the adapter, ensure your project meets the following requirements.

Requirement	Version
Payload CMS	3.x
@payloadcms/plugin-ecommerce	Latest
Node.js	20+
Razorpay Account	Required

---

Installation

Install the package using your preferred package manager.

pnpm

pnpm add @codenik/payload-razorpay

npm

npm install @codenik/payload-razorpay

yarn

yarn add @codenik/payload-razorpay

---

Environment Variables

Add the following variables to your .env file.

RAZORPAY_SECRET=your_secret_key
NEXT_PUBLIC_RAZORPAY_KEY_ID=your_publishable_key

Note

Use Test Keys during development and Live Keys in production.

---

Backend Configuration

Register the Razorpay adapter with the Payload Ecommerce plugin.

import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import { razorpayAdapter } from '@codenik/payload-razorpay'

plugins: [
  ecommercePlugin({
    payments: {
      paymentMethods: [
        razorpayAdapter({
          publishableKey: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID!,
          secretKey: process.env.RAZORPAY_SECRET!,
        }),
      ],
    },
  }),
]

---

Frontend Configuration

Import the client adapter into your frontend application.

import { razorpayAdapterClient } from '@codenik/payload-razorpay'

Initialise the adapter.

const adapter = razorpayAdapterClient({
  publishableKey: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID!,
})

---

Checkout Integration

This package provides the Payload CMS payment adapter. To open the Razorpay Checkout on the frontend, install the official react-razorpay package.

Step 1 — Install React Razorpay

pnpm

pnpm add react-razorpay

npm

npm install react-razorpay

yarn

yarn add react-razorpay

---

Step 2 — Import Razorpay

Import the required hook and types into your checkout component.

import { RazorpayOrderOptions, useRazorpay } from 'react-razorpay'

---

Step 3 — Initialise Razorpay

const { Razorpay } = useRazorpay()

---

Step 4 — Open Razorpay Checkout

After calling initiatePayment(), launch the Razorpay Checkout using the returned payment details.

const options: RazorpayOrderOptions = {
  key: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID!,
  amount: (paymentData.amount as number) * 100,
  currency: 'INR',
  name: 'Your Store',
  description: 'Order Payment',
  order_id: paymentData.paymentIntentID,

  handler: async (response) => {
    await confirmOrder('razorpay', {
      additionalData: {
        paymentIntentID: paymentData.paymentIntentID,
        razorpay_payment_id: response.razorpay_payment_id,
        razorpay_signature: response.razorpay_signature,
      },
    })
  },
}

const razorpay = new Razorpay(options)
razorpay.open()

Important

This package only provides the Payload CMS payment adapter. You are responsible for implementing the checkout UI and calling initiatePayment() and confirmOrder() from your frontend application.

---

Payment Flow

Customer clicks Pay
        │
        ▼
initiatePayment()
        │
        ▼
Payload creates a Razorpay Order
        │
        ▼
Open Razorpay Checkout
        │
        ▼
Customer completes payment
        │
        ▼
confirmOrder()
        │
        ▼
Payment verified
        │
        ▼
Payload creates the Order
        │
        ▼
Redirect to Order Confirmation Page

---

Supported Features

Feature	Status
Razorpay Checkout	✅
Razorpay Orders API	✅
Payment Verification	✅
Transaction Creation	✅
Payload Ecommerce Integration	✅
TypeScript	✅
ESM	✅
Next.js	✅

---

Security

• Never expose your Razorpay Secret Key to the frontend.
• Always verify the Razorpay payment signature.
• Use HTTPS in production.
• Use Test Keys for development and Live Keys for production.

---

Compatibility

Package	Version
Payload CMS	3.x
Node.js	20+
Next.js	15+

---

Contributing

Contributions are welcome!

If you'd like to improve this project, feel free to open an issue or submit a pull request.

---

License

MIT License

---

Support

If you encounter an issue, please include the following information when creating a GitHub issue:

• Payload CMS version
• Plugin version
• Node.js version
• Error logs
• Steps to reproduce the issue

---