Adyen create dropin报错"Cannot read properties of null (reading 'dropin')"如何解决？

@adyen/adyen-web从v5.0.0版本开始，初始化API做了不兼容调整，这是你报错的核心原因，并非版本存在Promise实现异常：

• v4.x版本中AdyenCheckout为同步构造函数，直接执行new AdyenCheckout(配置)即可直接获取可用的实例对象
• v5.x版本中AdyenCheckout改为异步方法，执行后返回的是Promise对象，必须等待异步初始化完成，拿到resolve后的实例才能调用create方法创建组件

在React代码中需要用异步逻辑等待初始化完成，示例如下：

import { useRef, useEffect } from 'react';
import { AdyenCheckout } from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';

const PaymentComponent = () => {
  const adyenContainerRef = useRef(null);

  useEffect(() => {
    // 异步初始化Adyen
    const initDropin = async () => {
      const adyenConfig = {
        // 替换为你实际的配置参数，包含后端返回的session信息
        clientKey: '你的客户端密钥',
        environment: 'test',
        session: paymentSession,
        // 其他回调配置按需补充
      };
      // 关键：加await等待异步初始化完成获取实例
      const checkoutInstance = await AdyenCheckout(adyenConfig);
      checkoutInstance.create('dropin').mount(adyenContainerRef.current);
    };

    initDropin();
  }, []);

  return <div ref={adyenContainerRef} />;
};

你之前v5版本运行报错，是因为没有等待异步初始化完成，直接对返回的Promise对象调用create方法，此时实际的checkout实例还未生成、为null，才触发了对应的属性读取错误。

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