访问 Stripe Payment Element 的加载状态

Question

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

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

Answer 1

对于任何不满足于简单使用加载程序的人，您可以收听该ready事件（文档）。

为此，您必须首先获取元素，这是令我困惑的一步。您应该elements从useElements钩子中获得参考。您可以尝试这样useEffect做，elements.getElement('paymentMethod')但您会收到一条错误消息：

必须提供有效的元素名称。有效元素有：card、cardNumber、cardExpiry、cardCvc、postalCode、 paymentRequestButton、iban、idealBank、p24Bank、auBankAccount、fpxBank、affirmMessage、afterpayClearpayMessage；您传递了： paymentElement。

payment然而，尽管不在该列表中，但正确的做法是：

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

Answer 2

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

或者，您可以监听此处ready记录的事件，以便显示加载动画，直到事件被触发。

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