我来帮你搞定这个问题～你遇到的Uncaught ReferenceError: chckt is not defined错误，本质原因是Adyen SDK的脚本还没加载完成，你就尝试访问全局变量chckt了。不管用react-script-tag还是直接引入脚本，异步加载的特性都会导致这个时机问题。下面给你两种可靠的解决方案：

方案一：利用react-script-tag的onLoad回调 #

react-script-tag支持通过onLoad属性监听脚本加载完成的事件，我们可以把所有依赖SDK的逻辑放在这个回调里执行：

import ScriptTag from 'react-script-tag';

class AdyenCheckout extends React.Component {
  handleScriptLoad = () => {
    // 脚本加载完成，现在可以安全访问chckt了
    chckt.hooks.beforeComplete = function(node, paymentData) {
      return false; // 替换默认的完成处理逻辑
    };

    // 初始化Adyen Checkout（根据你的需求配置参数）
    const checkout = new chckt.Checkout({
      publicKey: '你的测试公钥',
      environment: 'test',
      paymentMethodsResponse: this.props.paymentMethods, // 从后端获取的支付方式数据
      onSubmit: (state, component) => {
        // 处理支付提交逻辑
      }
    });

    // 将Checkout组件挂载到指定DOM节点
    checkout.create('dropin').mount('#adyen-checkout');
  };

  render() {
    return (
      <div className='checkout-warpper'>
        <ScriptTag 
          type="text/javascript" 
          src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.9.2.min.js"
          onLoad={this.handleScriptLoad}
        />
        <div className="checkout" id="adyen-checkout">
          {/* Checkout界面会渲染在这里 */}
        </div>
      </div>
    );
  }
}

方案二：手动动态创建Script标签（更可控） #

如果不想依赖react-script-tag，可以在componentDidMount里手动创建脚本标签，并监听其load事件，这种方式对加载过程的控制更灵活：

class AdyenCheckout extends React.Component {
  componentDidMount() {
    const script = document.createElement('script');
    script.src = "https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.9.2.min.js";
    script.type = 'text/javascript';
    script.async = true;

    script.onload = () => {
      // SDK加载完成后执行逻辑
      chckt.hooks.beforeComplete = function(node, paymentData) {
        return false;
      };

      // 初始化Checkout
      const checkout = new chckt.Checkout({
        publicKey: '你的测试公钥',
        environment: 'test',
        paymentMethodsResponse: this.props.paymentMethods,
        onSubmit: (state, component) => {
          // 处理支付提交
        }
      });

      checkout.create('dropin').mount('#adyen-checkout');
    };

    document.body.appendChild(script);
    // 保存脚本引用，方便卸载时清理
    this.adyenScript = script;
  }

  componentWillUnmount() {
    // 组件卸载时移除脚本，避免内存泄漏
    if (this.adyenScript) {
      document.body.removeChild(this.adyenScript);
    }
  }

  render() {
    return (
      <div className='checkout-warpper'>
        <div className="checkout" id="adyen-checkout">
          {/* Checkout界面会渲染在这里 */}
        </div>
      </div>
    );
  }
}

关键注意点 #

• 永远不要在组件渲染阶段直接访问chckt，必须等脚本加载完成的回调触发后再执行相关逻辑。
• 如果你使用的是函数式组件，可以用useEffect钩子替代componentDidMount和componentWillUnmount，逻辑是一样的。
• 确保你的Adyen配置参数（比如publicKey、paymentMethodsResponse）是正确且已准备好的，避免初始化时出现其他错误。

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