Angular中重定向后如何修改Drop-in组件状态？

这是可行的，但你当前的实现方式有误——Drop-in的状态由Adyen SDK内部管理，手动调用setStatus('ready')不会触发UI层面的状态更新，必须通过SDK提供的标准流程来传递支付结果状态。

问题分析 #

你现在的代码直接创建空Drop-in后强行设置状态，但SDK不会识别这种手动修改，自然不会渲染支付结果。正确的做法是利用重定向后服务器返回的包含支付结果的state，让SDK自动处理状态和UI展示。

修正后的实现方案 #

private _handleServerResponse(state: any, component: any): void {
  // 优先处理未完成的支付动作（比如3DS验证）
  if (state.action) {
    component.handleAction(state.action);
    return;
  }

  // 重定向后重新初始化Drop-in
  if (!component._id) {
    // 创建Drop-in时传入包含支付结果的state，SDK自动渲染结果UI
    const dropin = component.create('dropin', {
      clientKey: '你的ClientKey',
      environment: 'test', // 生产环境换成'live'
      // 传入服务器返回的支付结果相关数据
      resultCode: state.resultCode,
      additionalData: state.additionalData,
      // 如果需要复用之前的支付方法配置，也可以传入paymentMethodsResponse
      paymentMethodsResponse: state.paymentMethodsResponse
    });

    dropin.mount(this.dropInContainer.nativeElement);
    // 无需手动设置状态，SDK会根据resultCode自动显示成功/失败界面
    return;
  }

  // 如果Drop-in实例已存在，直接用最新state更新
  component.update(state);
}

关键注意点 #

• 服务器返回的state必须包含resultCode字段（比如Authorised、Refused、Cancelled等），SDK会根据这个字段自动渲染对应的支付结果UI。
• 不要手动调用setStatus方法，所有状态更新都要通过向SDK传入合法的state来触发。
• 如果重定向前已经获取过paymentMethodsResponse，可以把它也传入Drop-in配置，避免重复请求支付方法数据。

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