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
