如何在Adyen支付组件挂载并渲染完成后调用自定义函数？

嘿，这个问题我之前帮别人处理过，Adyen的组件确实没有直接暴露onMount配置项，但有两个靠谱的办法能解决你的需求：

方法一：使用Adyen官方提供的onReady回调（推荐） #

Adyen的Web组件其实支持在创建时传入onReady回调函数，这个函数会在组件完全挂载并渲染完成后触发，完全符合你的需求。具体代码示例如下：

// 创建directEbanking组件时传入onReady回调
const sofortComponent = checkout.create('directEbanking', {
  onReady: () => {
    // 这里写你要执行的自定义逻辑
    console.log("directEbanking组件已挂载渲染完成！");
    yourCustomModificationFunction();
  }
});
sofortComponent.mount('#sofort-container');

// 同理处理bcmc_mobile组件
const bcmcMobileComponent = checkout.create('bcmc_mobile', {
  onReady: () => {
    console.log("bcmc_mobile组件已挂载渲染完成！");
    yourOtherCustomFunction();
  }
});
bcmcMobileComponent.mount('#bcmc-container');

这个方法是官方原生支持的，稳定性最高，不会有DOM监听带来的潜在问题，优先推荐使用。

方法二：用MutationObserver监听DOM变化（兼容 fallback） #

如果你的项目使用的是较旧版本的Adyen SDK，刚好不支持onReady回调，那可以用浏览器原生的MutationObserver来监听组件容器的DOM变化，当组件的渲染内容出现在容器里时，再触发你的自定义函数。示例代码如下：

// 定义一个通用的监听函数
function waitForComponentMount(containerId, callback) {
  const container = document.getElementById(containerId);
  if (!container) return;

  const observer = new MutationObserver((mutations) => {
    // 检查容器内是否出现Adyen组件的标识节点（比如带data-adyen属性的元素）
    const adyenElement = container.querySelector('[data-adyen="true"]');
    if (adyenElement) {
      callback();
      // 执行完回调后停止监听，避免重复触发
      observer.disconnect();
    }
  });

  // 开始监听容器的子节点变化，包括子树的变化
  observer.observe(container, { childList: true, subtree: true });
}

// 使用监听函数，再挂载组件
waitForComponentMount('sofort-container', () => {
  console.log("directEbanking组件渲染完成！");
  yourCustomFunction();
});
checkout.create('directEbanking').mount('#sofort-container');

// 同理处理bcmc_mobile组件
waitForComponentMount('bcmc-container', () => {
  console.log("bcmc_mobile组件渲染完成！");
  yourOtherCustomFunction();
});
checkout.create('bcmc_mobile').mount('#bcmc-container');

我自己实践下来，第一种官方方法最省心，要是碰到旧版本SDK的兼容问题，第二种方法也能完美搞定。

备注：内容来源于stack exchange，提问作者TBatist