How to integrate razorpay payment gateway in Next.Js App?

I tried to integrate razorpay gateway but there is some confusion about it so plz help me I can integrate it.

import style from '../styles/Cart.module.css';
import Image from 'next/image';
import { useDispatch,useSelector } from 'react-redux';
import { useEffect } from "react";
import { useState } from 'react/cjs/react.development';

const Cart = () => {

how to razorpay payment gateway integrate

const [open,setOpen] = useState(false)
const [cash,setCash] = useState(false)
const dispatch =  useDispatch();
const cart = useSelector((state)=> state.cart);
const router = useRouter();
 return (
    <div className={style.container}>
        <div className={style.left}>
            <table className={style.table}>
            <tbody>
                <tr className={style.trTitle}> 
                <th>Product</th>
                <th>Name</th>
                <th>Extra</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
                </tr>
                </tbody>
                <tbody>
                {
                    cart.products.map((product) =>(
                <tr className={style.tr} key={product._id}>
                <td>
                    <div className={style.imgContainer}>
                        <Image src={product.img} alt='' layout='fill' 
                   objectFit='cover' />
                    </div>
                </td>
                <td>
                    <span className={style.name}>{product.title}</span>

                </td>

                <td>
                    <span className={style.extras}>
                    {
                        product.extras.map((extra)=>(
                            <span key={extra._id}>{extra.text}, </span>
                        ))
                    }
                    </span>
                </td>
                <td>
                    <span className={style.price}>${product.price}</span>
                </td>
                <td>
                    <span className={style.quantity}>{product.quantity}</span>
                </td>
                <td>
                    <span className={style.total}>${product.price * 
                  product.quantity}.      </span>
                </td>

                </tr>
                ))}
                </tbody>
            </table>
        </div>
        

here is the cart container where I want to show Razorpay gateway.

        <div className={style.right}>
            <div className={style.wrapper}>
                <h2 className={style.title}>CART TOTAL</h2>

                <div className={style.totalText}>
                    <b className={style.totalTextTitle}>Subtotal: </b> ${cart.total}
                </div>
                <div className={style.totalText}>
                    <b className={style.totalTextTitle}>Discount:</b> $0.00
                </div>
                <div className={style.totalText}>
                    <b className={style.totalTextTitle}>Total:</b> ${cart.total}
                </div>

I want to add here Razorpay gateway button below the cash on the delivery button

                {open ? (
            <div className={style.paymentgateway}>
            <button className={style.payButton} onClick={()=>setCash(true)}>CASH ON 
             DELIVERY</button>
              </div>
             )
              }

              

how to integrate Razorpay payment gateway on this jsx page in next.js

export default Cart