如何访问Stripe Payment Element加载状态展示加载提示

可以通过官方提供的原生API拿到加载状态，不需要写额外的hack逻辑，常用实现方式如下：

1. 使用组件自带的onReady回调（最推荐） #

PaymentElement组件原生支持onReady事件，当组件内部所有支付资源加载完成、表单可正常交互时会自动触发这个回调。你只需要维护一个本地状态控制loading spinner的显示隐藏即可，示例代码：

import { useState } from 'react';
import { PaymentElement } from '@stripe/react-stripe-js';

export default function CheckoutForm() {
  const [isElementLoading, setIsElementLoading] = useState(true);

  return (
    <div className="checkout-container">
      {isElementLoading && <div className="loading-spinner">支付组件加载中...</div>}
      <div style={{ display: isElementLoading ? 'none' : 'block' }}>
        <PaymentElement
          onReady={() => setIsElementLoading(false)}
          // 其余业务配置项正常传入即可
        />
        <button className="pay-submit">确认支付</button>
      </div>
    </div>
  );
}

你可以在loading状态下将PaymentElement的外层容器设置为隐藏，避免组件逐步加载过程中出现布局跳动，等onReady触发后再显示组件，体验更顺滑。

2. 结合Stripe实例初始化状态做全链路加载判断 #

如果需要覆盖Stripe JS SDK本身的初始化加载阶段，可以配合useStripe、useElements两个钩子的返回值判断，避免SDK还没加载完就渲染组件导致报错，示例：

import { useState } from 'react';
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [isElementReady, setIsElementReady] = useState(false);

  // SDK未初始化完成、组件未加载完成时统一显示loading
  const showLoading = !stripe || !elements || !isElementReady;

  return (
    <div className="checkout-container">
      {showLoading && <div className="loading-spinner" />}
      <form style={{ display: showLoading ? 'none' : 'block' }}>
        <PaymentElement onReady={() => setIsElementReady(true)} />
        <button disabled={showLoading}>确认支付</button>
      </form>
    </div>
  );
}

注意事项 #

• 不要通过DOM查询、定时器等方式判断组件是否加载完成：PaymentElement内部是跨域iframe，你无法直接访问内部渲染状态，非官方API的判断方式很容易在版本更新后失效
• 同系列的其他Stripe元素组件（比如AddressElement、LinkAuthenticationElement）都支持相同的onReady回调，逻辑可以复用
• 加载过程中建议同时禁用支付提交按钮，避免用户提前操作触发报错

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