next.jstailwind-cssrazorpaydaisyui

Background issue with DaisyUI while using Razorpay in Nextjs

I am building a project in Nextjs with TailwindCSS and DaisyUI. While integrating Razorpay in my website, It's window appears like this without DaisyUI, Expected result

But as I include the DaisyUI I am getting output like this, The issue I have no idea what is the actual issue, here is the required code:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  daisyui: {
    themes: ["business"],
  },
  theme: {
    extend: {},
  },
  plugins: [require("tailwind-scrollbar"), require("daisyui")],
};

index.js

export default function Home(){
async function handleSubscribe() {
    const subscribe = await fetch("/api/createorder", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ amount: 500 }),
    });
    const res = await subscribe.json();
    console.log(res.order.id);
    const options = {
      key: process.env.NEXT_PUBLIC_RAZORPAY_ID,
      amount: res.order.amount,
      currency: "INR",
      name: "Nirmal Ambasana",
      description: "Test Transaction",
      order_id: res.order.id,
      callback_url: "http://localhost:3000/api/verifypayment",
      notes: {
        address: "Razorpay Corporate Office",
      },
      theme: {
        color: "#0b0b0b",
      },
      overlay: false,
    };

    const rpay = new window.Razorpay(options);
    rpay.open();
  }

return (
   <>
      <Head>
          <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
      </Head>
      ...
      <button
             className="btn-main text-[11pt]"
             onClick={() => handleSubscribe()}
      >
                Upgrade
      </button>
      ...

   </>
) 
}

package.json

{
  "name": "frontend_2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.12",
    "@heroicons/react": "^2.0.16",
    "@next/font": "13.1.6",
    "axios-auth-refresh": "^3.3.6",
    "cookie": "^0.5.0",
    "crypto": "^1.0.1",
    "cryptojs": "^2.5.3",
    "daisyui": "^2.51.3",
    "emailjs": "^4.0.1",
    "jsonwebtoken": "^9.0.0",
    "next": "13.1.6",
    "nodemailer": "^6.9.1",
    "razorpay": "^2.8.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-resize-panel": "^1.3.2",
    "react-resizable": "^3.0.4",
    "react-toastify": "^9.1.1",
    "set-cookie-parser": "^2.5.1",
    "split-pane-react": "^0.1.3",
    "styled-components": "^5.3.8"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwind-scrollbar": "^2.1.0",
    "tailwindcss": "^3.2.7"
  }
}

I want the background to be visible when Razorpay window is opened, what should I do to fix this? Thank you :D

EDIT

Here is URL of deployed project: Deployed project

Github repo: github repo

Solution

  • enter image description here

    See preview in this screenshot ;)