访问 Stripe 支付元素的加载状态

Question

在我的 Reactjs 应用中，我使用来自 stripe 的支付意图 API 来处理支付。我使用 @stripe/react-stripe-js 中的可嵌入支付元素 <PaymentElement /> 来呈现 UI 但问题是支付元素在 UI 中完全加载需要几秒钟.

有什么方法可以访问它的加载状态并在加载时显示加载微调器吗？

Answer 1

Stripe 刚刚向记录在案的 here 的 PaymentElement 产品添加了一个新的 loader 选项。它允许您在加载 UI 时先进行骨架渲染，这应该可以解决您要解决的问题。

或者，您可以收听他们记录的 ready 事件 here，以便在触发事件之前显示加载动画。

虽然这是针对他们的 vanilla JS 集成，但您可以将它们与他们的 React 库一起使用，因为您可以控制在初始化时传递给 PaymentElement 的选项。