React集成Cashfree支付遇‘Cannot find name Cashfree’错误求助

以下是几种可行的修复方案：

• 保证脚本加载顺序
  你的业务代码必须等Cashfree SDK脚本完全加载后再执行。如果是在React、Vue这类框架的组件里直接调用new Cashfree()，很可能因为SDK还没加载完成就跑代码导致报错。
  可以把调用代码放到window.onload事件里，或者给SDK脚本加onload回调：

  <script src="https://sdk.cashfree.com/js/ui/2.0.0/cashfree.sandbox.js" onload="initCashfree()"></script>
  <script>
    function initCashfree(sessionId) {
      let cf = new Cashfree(sessionId);
      // 这里写后续的Cashfree操作逻辑
    }
  </script>
  

• 显式调用全局对象上的Cashfree
  Cashfree SDK会挂载到浏览器的window全局对象上，所以可以直接用window.Cashfree来实例化：

  let cf = new window.Cashfree(session_id);
  

  要是用TypeScript开发，还得声明全局类型避免类型检查报错：

  declare global {
    interface Window {
      Cashfree: any;
    }
  }
  

• 检查SDK脚本是否加载成功
  打开浏览器开发者工具的Network面板，搜索cashfree.sandbox.js，确认它的HTTP状态码是200（加载成功）。如果加载失败，先排查网络问题或者脚本URL是否输入正确。

• 单页框架里的动态加载方案
  如果是Vue、React这类单页应用，除了上面的方法，还可以动态创建脚本标签，确保SDK加载完成后再执行实例化代码：
  比如React中的示例：

  useEffect(() => {
    const cashfreeScript = document.createElement('script');
    cashfreeScript.src = 'https://sdk.cashfree.com/js/ui/2.0.0/cashfree.sandbox.js';
    cashfreeScript.onload = () => {
      const cf = new window.Cashfree(session_id);
      // 执行初始化或其他操作
    };
    document.body.appendChild(cashfreeScript);
    // 组件卸载时移除脚本
    return () => document.body.removeChild(cashfreeScript);
  }, [session_id]);
  

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