使用Stripe Payment Element时如何获取加载状态

在使用Stripe进行支付集成时，PaymentElement 是一个强大的组件，它可以处理各种支付方式，并提供一致的用户界面。然而，由于网络延迟或其他原因，PaymentElement 可能需要一些时间才能完全加载到UI中。为了提供更好的用户体验，我们需要在 PaymentElement 加载时显示加载指示器。

Stripe 提供了 ready 事件，允许我们监听 PaymentElement 的加载状态。当 PaymentElement 准备就绪时，ready 事件将被触发。

如何监听 ready 事件

要监听 ready 事件，首先需要获取 elements 引用，这通常是通过 useElements hook 实现的。然后，使用 elements.getElement('payment') 获取 PaymentElement 实例。最后，使用 element.on('ready', callback) 注册 ready 事件的监听器。

以下是一个示例代码：

Replit Ghostwrite

一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。

下载

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

function MyPaymentForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (!stripe || !elements) {
      return;
    }

    const paymentElement = elements.getElement('payment');

    if (!paymentElement) {
      return;
    }

    paymentElement.on('ready', () => {
      console.log("Payment Element is ready!");
      setIsLoading(false);
    });

    paymentElement.on('change', (event) => {
        // Handle changes to the Payment Element state
    });

    paymentElement.on('blur', (event) => {
        // Handle blur events
    });

    paymentElement.on('focus', (event) => {
        // Handle focus events
    });
  }, [stripe, elements]);

  return (
    

      {isLoading ? (
        
Loading Payment Element...
      ) : (
        

          

            {/* Payment Element will be rendered here */}
          
          
            
              {isLoading ? 
 : "Pay now"}
            
          
        
      )}
    
  );
}

export default MyPaymentForm;

代码解释：

1. 引入必要的 hooks: useStripe 和 useElements 用于访问 Stripe 对象和 Elements 对象。
2. 状态管理: 使用 useState hook 创建一个 isLoading 状态变量，初始值为 true。
3. useEffect hook:
   • 检查 stripe 和 elements 是否可用。
   • 使用 elements.getElement('payment') 获取 PaymentElement 实例。
   • 注册 ready 事件的监听器。当 ready 事件触发时，将 isLoading 设置为 false。
   • 注册 change, blur 和 focus 事件的监听器，可以处理Payment Element 的状态变化。
4. 渲染:
   • 如果 isLoading 为 true，则显示加载指示器。
   • 否则，渲染包含 PaymentElement 的表单。

注意事项：

• 确保在 stripe 和 elements 对象可用之后再尝试获取 PaymentElement 实例。
• elements.getElement('payment') 中的 'payment' 是正确的参数，即使它不在 Stripe 文档列出的有效元素名称中。
• 除了 ready 事件，PaymentElement 还提供了其他事件，例如 change、blur 和 focus，可以用于处理不同的场景。

总结：

通过监听 PaymentElement 的 ready 事件，我们可以有效地控制加载指示器的显示，从而改善用户体验。上述示例代码提供了一个基本的实现方法，可以根据实际需求进行修改和扩展。 使用Stripe提供的各种事件，可以更精细地控制用户体验，并处理各种支付场景。