如何通过Adyen Web Node包自定义Card组件添加邮箱字段？

Adyen的Card组件本身没有内置自定义字段的配置项，但可以通过两种方式实现你的需求：

方案一：在Card组件外部添加邮箱输入（推荐） #

这是最稳定且符合Adyen组件设计逻辑的方式，无需修改组件内部结构：

1. 在页面中添加独立的邮箱输入框：

<div class="checkout-form">
  <div id="card-container"></div>
  <div class="email-field">
    <label for="shopper-email">邮箱</label>
    <input type="email" id="shopper-email" required placeholder="your@email.com">
  </div>
  <button id="submit-payment">提交支付</button>
</div>

2. 在发起支付请求时，获取邮箱输入框的值并传入shopperEmail参数：

// 初始化Card组件
const checkout = new AdyenCheckout({
  environment: 'test', // 或 'live'
  clientKey: 'YOUR_CLIENT_KEY',
});

const cardComponent = checkout.create('card').mount('#card-container');

// 监听支付提交事件
document.getElementById('submit-payment').addEventListener('click', async () => {
  const shopperEmail = document.getElementById('shopper-email').value;
  
  // 调用你的后端接口，将shopperEmail和组件的支付数据一起传给Adyen /payments API
  const response = await fetch('/api/adyen/pay', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      paymentMethod: cardComponent.state.data,
      shopperEmail: shopperEmail,
      // 其他必要参数：amount, reference等
    })
  });
  
  // 处理支付响应
  const result = await response.json();
  checkout.submit(result);
});

方案二：自定义插入字段到Card组件容器（不推荐） #

如果需要将邮箱字段视觉上融入Card组件，可以在组件渲染完成后手动插入DOM元素，但需注意组件更新可能导致DOM重置：

1. 监听组件的ready事件，插入邮箱字段：

const cardComponent = checkout.create('card', {
  onReady: () => {
    // 获取Card组件的容器
    const cardContainer = document.getElementById('card-container');
    // 创建邮箱字段DOM
    const emailField = document.createElement('div');
    emailField.innerHTML = `
      <div class="adyen-checkout__field">
        <label class="adyen-checkout__label" for="shopper-email-card">邮箱</label>
        <input class="adyen-checkout__input" type="email" id="shopper-email-card" required>
      </div>
    `;
    // 插入到Card组件的合适位置，比如CVV字段之后
    const cvvField = cardContainer.querySelector('[data-fieldtype="cvc"]').parentNode;
    cvvField.parentNode.insertBefore(emailField, cvvField.nextSibling);
  }
}).mount('#card-container');

2. 同样在支付请求时获取该输入框的值传入shopperEmail，逻辑同方案一。

注意事项 #

• shopperEmail是在后端调用Adyen的/payments API时传入的参数，不需要在Card组件初始化时配置。
• 方案二依赖组件的DOM结构，Adyen组件版本更新可能会导致选择器失效，需要同步调整，因此优先使用方案一。

内容的提问来源于stack exchange，提问作者beefkarubi-md