Next.js集成Razorpay时DaisyUI导致支付弹窗背景异常求助

问题描述 #

使用Next.js + TailwindCSS + DaisyUI开发项目，集成Razorpay支付功能时：

• 未引入DaisyUI时，Razorpay弹窗显示正常（背景可见）
• 引入DaisyUI后，弹窗背景出现异常（背景被覆盖或显示异常）

希望解决该问题，让打开Razorpay窗口时背景保持可见。

相关代码 #

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"
  }
}

补充说明 #

• 项目已部署上线
• 完整代码可查看对应GitHub仓库

解决方案 #

原因分析 #

DaisyUI的business主题会给全局元素（如body）添加特定背景样式，Razorpay弹窗会继承这些全局样式导致背景异常；同时你设置了overlay: false，Razorpay不会生成默认背景遮罩，进一步放大了样式冲突。

方法1：自定义CSS隔离Razorpay弹窗样式 #

在项目的globals.css文件中添加以下代码，强制重置Razorpay相关元素的背景样式：

/* 修复Razorpay弹窗背景问题 */
.rzp-modal {
  background-color: transparent !important;
}

/* 若需要背景遮罩，可启用以下样式（需将Razorpay配置的overlay改为true） */
.rzp-backdrop {
  background: rgba(0, 0, 0, 0.5) !important;
}

方法2：临时切换body样式（弹窗生命周期内生效） #

修改index.js中的handleSubscribe函数，在弹窗打开时给body添加临时类，关闭时移除：

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);
    // 弹窗打开时添加类
    document.body.classList.add('razorpay-active');
    // 弹窗关闭时移除类
    rpay.on('close', () => {
      document.body.classList.remove('razorpay-active');
    });
    rpay.open();
  }

然后在globals.css中添加：

body.razorpay-active {
  /* 替换为你需要的背景样式，比如恢复原始背景 */
  background: #ffffff !important;
}

方法3：调整DaisyUI主题配置 #

如果不需要全局背景样式，可修改tailwind.config.js，自定义DaisyUI主题，移除或修改全局背景设置：

daisyui: {
  themes: [
    {
      business: {
        ...require("daisyui/src/colors/themes")["[data-theme=business]"],
        // 覆盖body背景色为透明或你需要的样式
        "base-100": "transparent",
      },
    },
  ],
},

内容的提问来源于stack exchange，提问作者Nirmal