A modern, production-ready payment integration demo built with Next.js 15, Razorpay, and deployed on Cloudflare Workers using OpenNext. This project demonstrates secure payment processing with a clean, responsive UI and seamless user experience.

View Live Demo →

Homepage	Payment Initialization	Payment Completed

• ✅ Secure Payment Processing - Integration with Razorpay's payment gateway
• ✅ Modern UI/UX - Clean, responsive design with smooth animations
• ✅ Real-time Feedback - Loading states and interactive button effects
• ✅ Edge Deployment - Deployed on Cloudflare Workers for global low-latency
• ✅ Type-Safe - Built with TypeScript for robust code quality
• ✅ Server-Side Order Creation - Secure API routes for payment order generation
• ✅ Responsive Design - Works seamlessly across all device sizes

• Framework: Next.js 15 (App Router)
• Runtime: React 19
• Payment Gateway: Razorpay
• Styling: Tailwind CSS 4
• Deployment: Cloudflare Workers via OpenNext
• Language: TypeScript
• Package Manager: Bun / npm

razorpay-next-app/
├── src/
│   └── app/
│       ├── api/
│       │   └── create-order/
│       │       └── route.ts          # API endpoint for order creation
│       ├── globals.css               # Global styles
│       ├── layout.tsx                # Root layout
│       └── page.tsx                  # Homepage with payment button
├── public/                           # Static assets & screenshots
├── package.json
├── tsconfig.json
├── wrangler.jsonc                    # Cloudflare configuration
└── README.md

• Node.js 18+ or Bun
• Razorpay account (Sign up here)
• Cloudflare account (for deployment)

1. Clone the repository

   git clone https://github.com/yourusername/razorpay-next-app.git
   cd razorpay-next-app

2. Install dependencies

   npm install
   # or
   bun install

3. Set up environment variables

   Create a .env file in the root directory:

   NEXT_PUBLIC_RAZORPAY_KEY_ID=your_razorpay_key_id

   Create a .dev.vars file for local Cloudflare development:

   RAZORPAY_KEY_ID=your_razorpay_key_id
   RAZORPAY_KEY_SECRET=your_razorpay_key_secret

   Note: Get your API keys from Razorpay Dashboard

4. Run the development server

   npm run dev
   # or
   bun dev

   Open http://localhost:3000 to view the app.

1. Build and deploy

   npm run deploy
   # or
   bun run deploy

2. Set environment variables in Cloudflare

   npx wrangler secret put RAZORPAY_KEY_ID
   npx wrangler secret put RAZORPAY_KEY_SECRET

npm run preview
# or
bun run preview

• ✅ API keys are stored securely in environment variables
• ✅ Payment order creation happens server-side
• ✅ Amount validation on the backend
• ✅ Unique receipt IDs generated using nanoid
• ✅ HTTPS-only in production

1. User clicks "Pay Now" button
2. Frontend sends amount to /api/create-order
3. Server creates a Razorpay order with unique receipt ID
4. Razorpay checkout modal opens with order details
5. User completes payment
6. Payment success handler is triggered

// Secure server-side order creation
const order = await razorpay.orders.create({
  amount: amount,        // in paise
  currency: "INR",
  receipt: "receipt_" + nanoid(8)
});

// Razorpay checkout initialization
const rzp1 = new window.Razorpay({
  key: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID,
  amount: order.amount,
  currency: "INR",
  order_id: orderId,
  handler: () => console.log("Payment successful!")
});
rzp1.open();

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

This project is open source and available under the MIT License.

Bhaskar G

• Portfolio: bhaskar.guthula.cc
• GitHub: @Shisui-Genjutsu
• LinkedIn: LinkedIn

• Razorpay Documentation
• Next.js Documentation
• OpenNext Cloudflare