Stripe刚刚在他们的PaymentElement产品中添加了一个新的loader选项。它允许你在加载UI时先渲染一个 backbone ，这应该可以解决你要解决的问题。
或者，您可以收听他们的ready事件文档here，以便显示加载动画，直到事件被激发。
虽然这是针对它们的普通JS集成，但是您可以将它们与它们的React库一起使用，因为您可以控制在初始化时传递PaymentElement的选项。

对于那些不满足于简单使用加载程序的用户，可以监听ready事件（docs）。
要做到这一点，你必须先得到元素，这是一个让我困惑的步骤。你应该从useElements钩子得到elements引用。在useEffect中，你可以尝试做elements.getElement('paymentMethod')，但你会得到一个错误消息：
必须提供有效的元素名称。有效的元素包括：卡片、卡号、卡片到期日、卡片Cvc、邮编、支付请求按钮、iban、理想银行、p24银行、auBankAccount、fpxBank、确认消息、支付后清算支付消息;您通过了：付款要素。
然而，正确的做法是payment，尽管它不在该列表中：

const element = elements.getElement('payment')
element.on('ready', () => {
    console.log("READY")
})

谢谢叶芝已经为我解决了这个问题--很棒的回答。
我想补充的是，对于任何看到这个解决方案的人，你不应该隐藏你的，直到on ready状态返回。我错误地使用了useState变量来显示加载器，直到PaymentElement就绪，但意识到只有加载器组件需要通过状态切换，PaymentElement应该总是被呈现。我第一次尝试使用我的加载状态变量隐藏PaymentElement，使其不被呈现，如下所示：

别这样

{isStripLoading ? (
  <MyLoaderComponent />
) : (
  <PaymentElement />
)}

因此，假设状态变量isStripeLoading默认为true，并且就绪事件setIsStripeLoading（false）上有useEffect，则在isStripeLoading状态变量中仅 Package 加载器微调器组件，而不 Package PaymentElement组件。
示例

const stripe = useStripe()
const elements = useElements()
const [isStripeLoading, setIsStripLoading] = useState(true)

useEffect(() => {
    if (elements) {
      const element = elements.getElement('payment')
      element.on('ready', () => {
      setIsStripLoading(false)
    })
  }
}, [elements])

return (
  <form id='payment-form' onSubmit={handleSubmit}>
    {isStripeLoading && <MyLoaderComponent />}
    <PaymentElement id='payment-element'/>
    <button id='submit' disabled={!stripe || !elements}>Pay</button>
  </form>
)