How To Integrate Razorpay Payment Gateway With Next.js App - V13.2

Prerequisites

Before we dive into the integration process, make sure you have the following prerequisites:

1. Razorpay Account: If you don't already have a Razorpay account, sign up for one at Razorpay.

2. Node.js: Ensure you have Node.js installed on your development machine. You can download it from the official Node.js website.

3. Next.js Project: Create a Next.js project if you haven't already. You can do this using the following command:12
   
   

   npx create-next-app@latest razor-pay-integration

Now, let's proceed with the integration steps:

Step 1: Install Required Packages

To work with Razorpay in your Next.js application, you'll need to install the necessary npm packages. Open your project directory in the terminal and run the following command:

 

npm install razorpay

 

This will install the Razorpay package, allowing you to interact with Razorpay services.

Step 2: Generate API Keys

After creating your Razorpay account, navigate to the "Settings" section and find the "API Keys" tab. Generate your API key and secret key, which you'll use for authentication in your application.

Step 3: Set up Environment Variables

To keep sensitive information like API keys secure, store them in environment variables. Create a .env.local file in your Next.js project's root directory and add your Razorpay API keys like this:

RAZORPAY_KEY_ID=your_api_key
RAZORPAY_KEY_SECRET=your_secret_key

 

 

Let's do payment Integration in Next.js Step by Step:

Step 1:

Create a file ".env.local" at root of the project. Add below code at that file. Make sure you add your keys from razorpay account.

 

MONGO_URI = "mongodb://127.0.0.1:27017/razor"
RAZORPAY_API_KEY= <Key>
RAZORPAY_APT_SECRET=<Secret>

NOTE: Env file in Next.js is automatically loaded (NODE Env default) so need to install any extra packages

 

Step 2:

Create a file a folder "src/components/razorpay"  ( I assumed you have "app" directory inside "src" folder) .

Create a file "Buy.jsx" inside razorpay folder and below code :

"use client"
import React,{useState} from "react";

const Buy = ({ makePayment }) => {

  const [isLoading, setIsLoading] = useState(false);



  return (
    <div className="flex flex-col items-center justify-center mt-[100px]">

<h1 className="text-2xl">Razor Pay Integration with NextJs 13</h1>
<button
     onClick={() => {
          makePayment({ productId: "example_ebook" });
        }}
      disabled={isLoading}
      className={`bg-blue-500 text-white font-semibold mt-20 py-2 px-4 rounded ${
        isLoading ? 'opacity-50 cursor-not-allowed' : ''
      }`}
    >
      {isLoading ? 'Processing...' : 'Buy Now'}
    </button>



    </div>
  );
};

export default Buy;

 

Create a file "BuyProduct.jsx" inside razorpay folder and below code :

 

"use client";
import React, { Suspense } from "react";
import Buy from "./Buy";
import { useRouter  } from 'next/navigation';
import Loading from "@/app/loading";


const BuyProduct = () => {

  const router = useRouter()


  const makePayment = async ({ productId = null }) => {
    // "use server"
    const key = process.env.RAZORPAY_API_KEY;
    console.log(key);
    // Make API call to the serverless API
    const data = await fetch("http://localhost:3005/api/razorpay");
    const { order } = await data.json();
    console.log(order.id);
    const options = {
      key: key,
      name: "mmantratech",
      currency: order.currency,
      amount: order.amount,
      order_id: order.id,
      description: "Understanding RazorPay Integration",
      // image: logoBase64,
      handler: async function (response) {
        // if (response.length==0) return <Loading/>;
        console.log(response);

        const data = await  fetch("http://localhost:3005/api/paymentverify", {
          method: "POST",
          // headers: {
          //   // Authorization: 'YOUR_AUTH_HERE'
          // },
          body: JSON.stringify({
            razorpay_payment_id: response.razorpay_payment_id,
            razorpay_order_id: response.razorpay_order_id,
            razorpay_signature: response.razorpay_signature,
          }),
        });



        const res = await data.json();

        console.log("response verify==",res)

        if(res?.message=="success")
        {


          console.log("redirected.......")
          router.push("/paymentsuccess?paymentid="+response.razorpay_payment_id)

        }

        // Validate payment at server - using webhooks is a better idea.
        // alert(response.razorpay_payment_id);
        // alert(response.razorpay_order_id);
        // alert(response.razorpay_signature);
      },
      prefill: {
        name: "mmantratech",
        email: "mmantratech@gmail.com",
        contact: "9354536067",
      },
    };

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

    paymentObject.on("payment.failed", function (response) {
      alert("Payment failed. Please try again. Contact support for help");
    });
  };

  return (
    <>
    <Suspense fallback={<Loading/>}>
      <Buy makePayment={makePayment} />
      </Suspense>
    </>
  );
};

export default BuyProduct;

 

NOTE : don't forget to put razorpay script in "layout.js" file as it is responsible to open razropay popup. 

Open file  "app/layout.js" and put following code 

import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
import Script from 'next/script'



export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <>
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
    <Script src="https://checkout.razorpay.com/v1/checkout.js"
          />

    </>
  )
}

Step 3:

Create a folder "database" inside src directory and create a file "database.js" inside database folder:

Put below code in database.js file 

import mongoose from "mongoose";

//you can more details on mmantratech.com
//youtube : techmalasi
 const MONGODB_URI = process.env.MONGO_URI;

if (!MONGODB_URI) {
  throw new Error(
    'Something went wrong'
  )
}
let cached = global.mongoose

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null }
}

async function dbConnect () {
  if (cached.conn) {
    return cached.conn
  }

  if (!cached.promise) {
    const opts = {
      useNewUrlParser: true,
      useUnifiedTopology: true
    }

    cached.promise = mongoose.connect(MONGODB_URI,opts).then(mongoose => {
      console.log("You successfully Connected")
      return mongoose
    })
  }
  cached.conn = await cached.promise
  return cached.conn
}

export default dbConnect

 

Create a folder "model" inside database folder and create below files and put the code .

Payment.js

import mongoose from "mongoose";

const paymentSchema = new mongoose.Schema({
  razorpay_order_id: {
    type: String,
    required: true,
  },
  razorpay_payment_id: {
    type: String,
    required: true,
  },
  razorpay_signature: {
    type: String,
    required: true,
  },
});

// export const Payment = mongoose.model("Payment", paymentSchema);

module.exports = mongoose.models.Payment || mongoose.model('Payment', paymentSchema)

User.js

// models/User.js

import mongoose from 'mongoose'

const UserSchema = new mongoose.Schema({
  name: String,
  email: String
})

module.exports = mongoose.models.User || mongoose.model('User', UserSchema)

STEP 4: 

Now its time to create Next.js Route Handlers ( >=V13.2) to create restful Api routes . you must know in NEXT.js there is no need to create extra Server as Node and Routes hanlers are default with Next.js Framework.

 

You have to follow above screenshot and your file/folder structure should look like above

NOTE : In Next.js  >=V13.2 API Routes are shifted to APP directory and routes are decided by folder you create and Next.js checks a special file "route.js" and decided to redirect.  So you have to create "route.js" in every folder explaining request type (GET,POST)

Create a file "route.js" inside paymentverify and put below code

import { NextResponse } from "next/server";
import Razorpay from "razorpay";
import shortid from "shortid";
import crypto from "crypto";
import Payment from "../../../database/model/Payment"
import dbConnect from '../../../database/database'
const instance = new Razorpay({
    key_id: process.env.RAZORPAY_API_KEY,
    key_secret: process.env.RAZORPAY_APT_SECRET,
  });

export async function POST(req,res) {

    const { razorpay_order_id, razorpay_payment_id, razorpay_signature } =
  await req.json();
   const body = razorpay_order_id + "|" + razorpay_payment_id;
console.log("id==",body)

 const expectedSignature = crypto
   .createHmac("sha256", process.env.RAZORPAY_APT_SECRET)
   .update(body.toString())
   .digest("hex");

const isAuthentic = expectedSignature === razorpay_signature;


 if (isAuthentic) {

  console.log(Payment)

  await dbConnect()

   await Payment.create({
     razorpay_order_id,
     razorpay_payment_id,
     razorpay_signature,
   });

  //  return NextResponse.redirect(new URL('/paymentsuccess', req.url));

} else {
    return NextResponse.json({
        message: "fail"
      }, {
        status: 400,
      })

}


return NextResponse.json({
    message: "success"
  }, {
    status: 200,
  })

}

Create a file "route.js" inside razorpay folder and put below code

import { NextResponse } from "next/server";
import Razorpay from "razorpay";
import shortid from "shortid";

const instance = new Razorpay({
    key_id: process.env.RAZORPAY_API_KEY,
    key_secret: process.env.RAZORPAY_APT_SECRET,
  });


export async function GET() {

    const payment_capture = 1;
    const amount = 1 * 100 // amount in paisa. In our case it's INR 1
    const currency = "INR";
    const options = {
        amount: (amount).toString(),
        currency,
        receipt: shortid.generate(),
        payment_capture,
        notes: {
            // These notes will be added to your transaction. So you can search it within their dashboard.
            // Also, it's included in webhooks as well. So you can automate it.
            paymentFor: "testingDemo",
            userId: "100",
            productId: 'P100'
        }
    };

   const order = await instance.orders.create(options);
  return NextResponse.json({ msg: "success",order });
}


export async function POST(req) {
  const body = await req.json();


  return NextResponse.json({ msg: body });
}

 

Create a file "route.js" inside user Folder and put below code

import { NextResponse } from "next/server";
import dbConnect from '../../../database/database'
import User from '../../../database/model/User'

export async function GET() {

//   await dbConnect();

  return NextResponse.json({ msg: "success" });
}


export async function POST(req) {
  const body = await req.json();
   await dbConnect();
  const user = await User.create(body)

  return NextResponse.json({ msg:"success",data: user });
}

 

NOTE : API Diretory in App folder decides Routes Handlers in Nextjs >=13.2 Version

Congratulations you have created below routes which will be used while payment via RazorPay

STEP 6:

Create a folder paymentsuccess as above and create two files "page.js" and "success.jsx"

page.js

import React from 'react'
import Success from './Success'

export default function page(){


  return (
    <>
      <Success/>
    </>
  )
}

 

Success.jsx

"use client"
import React from 'react'
import { useSearchParams } from 'next/navigation'


const Success = () => {
    const searchParams = useSearchParams()
    const paymentid = searchParams.get('paymentid')


  return (
    <div className="flex flex-col items-center justify-center mt-[100px]">
    <div className="bg-green-100 border border-green-400 w-1/2 text-green-700 px-4 py-3 rounded relative" role="alert">
 <strong className="font-bold">Payment successful!</strong>
 <span className="block sm:inline">Your paymentID= {paymentid} has been processed.</span>
 <span className="absolute top-0 bottom-0 right-0 px-4 py-3">
   <svg
     className="fill-current h-6 w-6 text-green-500"
     role="button"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
   >
     <title>Close</title>
     <path
       d="M14.293 5.293a1 1 0 011.414 1.414L11.414 10l4.293 4.293a1 1 0 11-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.293a1 1 0 111.414-1.414L10 8.586l4.293-4.293z"
       fillRule="evenodd"
       clipRule="evenodd"
     />
   </svg>
 </span>
</div>

</div>
  )
}

export default Success

STEP 6:

Now time to call everything from Home page. In Next.js Home route is always app/page.js. So open file "app/page.js" and put below code.

import BuyProduct from '@/components/razorpay/BuyProduct'
import Image from 'next/image'


export default function Home() {
 return(
  <>
    <BuyProduct/>
  </>
 )
}

 

Okay guys you have followed above steps I am certainly sure that you would be able to pay payment via razorpay. Now time to run the project.

 

 

After run the Next.js App in browser your screen should look like below:

 

 

If you have got above screen then Congratualtion guys you have followed all steps successfully. Please find below testing card details and go further.

Visa

4111 1111 1111 1111

Random CVV

Any future date

 

More  you can find in my youtube channel 

https://www.youtube.com/channel/UC9HIIz8gI5oOK92BctimlRw

 

Conclusion,

I hope I was able to explain all practical steps. Guys one thing I need to add here that I have not explained code part hoping all already know Next.js basic very well. However if you have still problem please comment or goto youtube channel to get everys steps.