0

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

Nirmal
  • 53
  • 5

2 Answers2

1

enter image description here

See preview in this screenshot ;)

DullJoker
  • 42
  • 5
0

Just so I understand what you try to accomplish here, you want to have a background blur instead of a white background right?

DullJoker
  • 42
  • 5
  • Yes! that's the normal case which I am not able to get – Nirmal Mar 13 '23 at 15:03
  • It probably has something to do with the default theme of daisyUI overriding your modal styling due to these not being set or something. try setting a semi transparant bg on the element where you want this to be transparent. that should work just fine! – DullJoker Mar 14 '23 at 10:34
  • I understand some css properties are being overrided. Although I have already tried this but with plain red colored background which didn't work. So I don't think so adding a different background will be rendered as it is still the white background. – Nirmal Mar 15 '23 at 00:52
  • Even that styling edit probably got overwritten. Could you maybe throw you project onto vercel or something like that so I could maybe check what could be the culprit? – DullJoker Mar 17 '23 at 14:36
  • Actually it is my internship project but yeah I can't deploy a sample, I'll drop link here soon – Nirmal Mar 19 '23 at 05:52
  • Check the EDIT in question, I have uploaded links. – Nirmal Mar 19 '23 at 07:17
  • Hey man, I just had a look and it seems like razorpay gets opened as a iframe. What I would recommend is giving the razorpay container a fixed width of 400px and a fixed height of ca. 500px and then positioning the container itself dead center on the page. And maybe wrapping it with an outer container to get a custom backdrop. Hope this helps ya – DullJoker Mar 20 '23 at 07:57
  • 1
    Alright let me try – Nirmal Mar 20 '23 at 16:43