如何检测Stripe Elements支付表单加载完成状态？

你当前的代码在payment.mount()后立即隐藏加载动画，但这时候Element只是完成挂载，内部的支付表单资源还可能在异步加载，所以会出现表单加载慢但动画提前消失的问题。Stripe Elements提供了ready事件，专门用来监听元素完全加载就绪的状态，你可以利用这个事件来控制加载动画的显示/隐藏：

修改后的代码示例： #

const create_customer_response = JSON.parse(localStorage.getItem("create_customer_response"));
const client_secret = create_customer_response["intent"]["client_secret"]
const options = {
  clientSecret: client_secret,
};

elements = this.stripe.elements(options);

const payment = elements.create('payment');
const paymentElement = document.getElementById('payment-element');

if (paymentElement) {
  // 监听Element完全就绪事件
  payment.on('ready', () => {
    this.isPaymentElementMounted = true;
    console.log('Payment element完全加载就绪，可交互');
    this.spinner.hide(); // 此时再隐藏加载动画
  });

  // 可选：监听加载错误，避免动画一直显示
  payment.on('error', (error) => {
    console.error('Payment Element加载失败:', error);
    this.spinner.hide();
    // 这里可以添加错误提示逻辑
  });

  payment.mount(paymentElement);
  console.log('Payment element已挂载，正在加载内部资源');
} else {
  console.error('#payment-element not found in the DOM. Make sure your template is correct.');
  this.spinner.hide(); // DOM不存在时也隐藏动画
}

关键说明： #

• ready事件会在Payment Element完全渲染完成、所有内部资源加载完毕且可以正常交互时触发，这才是你需要的“完全加载完成”的时机。
• 保留mount()的调用，但把隐藏加载动画的逻辑移到ready回调内，避免提前隐藏。
• 添加error事件监听可以处理加载失败的情况，防止加载动画一直显示影响用户体验。

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