React中Stripe LinkAuthenticationElement提前验证邮箱的替代方案

你可以通过以下两种方式单独触发LinkAuthenticationElement的验证，同时避免触发支付字段的验证：

• 调用单个元素的validate()方法
  直接获取LinkAuthenticationElement的实例，调用它的validate()方法，这个方法只会验证当前邮箱输入框，验证不通过时会自动显示Stripe内置的提示文本Your email address is incomplete.，完全不会影响其他支付元素。
  示例代码：

  // 获取LinkAuthenticationElement实例
  const linkAuthElement = elements.getElement('linkAuthentication');
  // 触发验证
  const { error } = await linkAuthElement.validate();
  
  if (error) {
    // 验证失败时，Stripe会自动在元素下方显示错误提示，无需额外处理
    console.log(error.message);
  } else {
    // 验证成功，可获取邮箱地址用于创建PaymentIntent
    const email = linkAuthElement.value.email;
    // 后续逻辑：创建PaymentIntent并绑定邮箱
  }
  

• 监听元素的change事件实时验证
  如果需要实时校验邮箱输入状态，可以监听LinkAuthenticationElement的change事件，当邮箱格式不完整时，手动触发元素的错误状态（不过这种方式不如validate()方法原生，更推荐用前者）：

  <LinkAuthenticationElement
    onChange={(event) => {
      if (!event.value.email) {
        // 手动设置元素错误状态，Stripe会显示对应提示
        elements.getElement('linkAuthentication').setError({
          message: 'Your email address is incomplete.'
        });
      } else {
        // 清除错误状态
        elements.getElement('linkAuthentication').setError(null);
      }
    }}
  />
  

最推荐的是第一种方法，完全利用Stripe官方提供的API，既符合Stripe的交互规范，又能精准控制验证范围，不需要用elements.submit()再clear()的折中方案。

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