React+TypeScript自定义表单集成Adyen Native 3DS2组件疑问

1. 关于.d.ts文件中state类型标注为any的问题 #

这个标注虽然看起来不严谨，但其实是Adyen SDK的合理设计：因为onAdditionalDetails返回的state结构会根据支付场景（比如3DS验证、银行卡分期、本地支付方式的额外验证等）动态变化，没有固定的统一结构，所以用any来兼容所有可能的返回情况。

如果你需要更严格的类型约束，可以根据自己业务用到的支付场景自定义类型，比如针对3DS验证的场景：

interface ThreeDSAdditionalDetailsState {
  data: {
    cres: string;
    MD: string;
  };
  isLoading: boolean;
}

使用时通过类型断言处理：

const handleAdditionalDetails = (state: any) => {
  const typedState = state as ThreeDSAdditionalDetailsState;
  // 后续基于typedState处理逻辑
};

2. React卡片组件中是否需要将state.data作为payload传入服务器 #

是的，必须将state.data完整传给你的后端服务器，再由后端转发给Adyen的API完成后续验证流程。这里给你一个React卡片组件的简化示例：

import { useAdyenCheckout } from '@adyen/react';

const CardPaymentComponent = () => {
  const { createComponent } = useAdyenCheckout();
  const CardComponent = createComponent('card');

  const handleAdditionalDetails = (state) => {
    // 直接将state.data作为请求体传给后端接口
    fetch('/your-backend/adyen-submit-details', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(state.data)
    })
    .then(res => res.json())
    .then(adyenResponse => {
      // 根据后端返回的Adyen响应处理后续逻辑，比如更新支付状态
      if (adyenResponse.resultCode === 'Authorised') {
        // 支付成功逻辑
      }
    })
    .catch(err => console.error('提交额外验证信息失败:', err));
  };

  return (
    <CardComponent
      onAdditionalDetails={handleAdditionalDetails}
    />
  );
};

export default CardPaymentComponent;

注意：后端收到state.data后，需要调用Adyen的/payments/details API，将这些数据放入请求体的details字段中，完成支付流程的收尾。

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