Adyen Web DropIn组件OnChange事件多次触发问题求助

问题 #

已集成Adyen Web DropIn组件，功能正常，现在需要添加追踪功能监控客户变更支付选项/支付信息的行为，使用了OnSelect和OnChange事件，但遇到以下问题：

• 首次选择支付选项时，OnChange会紧随OnSelect触发；组件加载时事件触发顺序为OnSelect→OnReady→OnChange，无法判断组件是否加载完成。
• 默认选中Ideal支付方式，首次切换到Card时，会触发OnSelect，随后OnChange连续触发3次，仅首次切换Card时出现此问题。

希望实现以下任一需求：

• 仅追踪用户主动触发的变更
• 预加载支付选项的子选项，避免表单加载时触发变更事件
• 切换支付选项时等待表单加载完成

相关代码 #

const configuration = {
  environment: this.model.environment || 'test',
  clientKey: this.model.clientKey,
  locale: this.model.locale,
  showPayButton: true,
  session: {
    id: this.model.sessionId,
    sessionData: this.model.sessionData,
  },
  onError: this.onFailed,
  paymentMethodsConfiguration: {
    ideal: {
      showImage: true
    },
    card: {
      hasHolderName: true,
      holderNameRequired: true,
    },
  },
  // 自定义翻译
  translations: {
    'nl-NL': {
      payButton: this.$t('Veilig betalen').toString(),
      "idealIssuer.selectField.placeholder": this.$t('Kies uw bank').toString(),
      continue: this.$t('Veilig betalen')
    },
  },
  onChange: (state, component) => {
    console.log("ONCHANGE");
    if (this.tracking) {
      this.tracking.ecommerce.payment_method = state.data.paymentMethod.type;
      AnalyticsManager.getInstance().pushTracking(JSON.parse(JSON.stringify(this.tracking)));
    }
  },
  onPaymentCompleted: (result, component) => {
    this.handleCompleted(result, component);
  },
};

this.checkoutApi
  .create('dropin', {
    onReady: () => {
      console.log("OnReady");
    },
    onSelect: () => {
      console.log("ONSelect");
    }
  })

解决方案 #

1. 仅追踪用户主动触发的变更 #

通过状态变量过滤组件初始化/内部自动触发的事件，同时去重追踪数据：

• 新增isComponentReady标记组件加载完成状态，过滤加载前的事件；
• 记录lastTrackedPaymentMethod，仅当支付方式实际变更时推送追踪：

// 新增状态变量
let isComponentReady = false;
let lastTrackedPaymentMethod = 'ideal'; // 默认选中的支付方式

// 修改DropIn配置
this.checkoutApi.create('dropin', {
  onReady: () => {
    console.log("OnReady");
    isComponentReady = true;
  },
  onSelect: (state) => {
    console.log("ONSelect");
    if (!isComponentReady) return;
    
    const currentMethod = state.data.paymentMethod?.type;
    if (currentMethod && currentMethod !== lastTrackedPaymentMethod) {
      lastTrackedPaymentMethod = currentMethod;
    }
  },
  onChange: (state, component) => {
    console.log("ONCHANGE");
    if (!isComponentReady) return;
    
    const currentMethod = state.data.paymentMethod?.type;
    if (currentMethod && currentMethod !== lastTrackedPaymentMethod) {
      if (this.tracking) {
        this.tracking.ecommerce.payment_method = currentMethod;
        AnalyticsManager.getInstance().pushTracking(JSON.parse(JSON.stringify(this.tracking)));
        lastTrackedPaymentMethod = currentMethod;
      }
    }
  }
})

2. 预加载支付选项子选项避免表单触发变更 #

Adyen DropIn的Card组件首次选中时会自动渲染表单字段，这属于内部状态更新，无法完全避免触发OnChange，但可以通过上述状态过滤逻辑，忽略组件内部加载导致的非用户主动变更事件。

3. 切换支付选项时等待表单加载完成 #

通过监听组件的isValid状态，等待表单加载稳定后再处理追踪：

onSelect: (state, component) => {
  console.log("ONSelect");
  if (!isComponentReady) return;
  
  const checkComponentStable = setInterval(() => {
    const currentState = component.getState();
    // 等待组件状态有效，说明表单加载完成
    if (currentState.isValid) {
      clearInterval(checkComponentStable);
      const currentMethod = currentState.data.paymentMethod?.type;
      if (currentMethod && currentMethod !== lastTrackedPaymentMethod) {
        this.tracking.ecommerce.payment_method = currentMethod;
        AnalyticsManager.getInstance().pushTracking(JSON.parse(JSON.stringify(this.tracking)));
        lastTrackedPaymentMethod = currentMethod;
      }
    }
  }, 100);
}

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