React中如何为Stripe Apple Pay按钮传入disable属性

我已经在应用中加入了Apple Pay按钮，现在想给stripe-js的PaymentRequestButtonElement设置禁用属性，现有代码如下：

现有PaymentRequestButtonElement代码 #

<PaymentRequestButtonElement options={{
  paymentRequest,
  disableMultipleButtons: true,
  style: {
     paymentRequestButton: {
        type: "buy",
         theme: "dark",
         height: "48px",
         },
       },
   }} />

Elements容器代码 #

<Elements stripe={stripePromiseUS} options={STRIPE_OPTIONS}>
  {props.children}
</Elements>

STRIPE_OPTIONS配置 #

export const STRIPE_OPTIONS = {
 mode: 'setup',
 currency: 'usd',
 paymentMethodCreation: 'manual',
} as StripeElementsOptions;

要实现按钮禁用，PaymentRequestButtonElement本身没有直接在options里提供disable参数，你可以通过以下方式实现：

• 方式一：使用Element实例的update方法（官方推荐）
  先获取元素实例，再调用update方法传入disabled状态来动态控制。以React为例，用useRef获取实例：

  import { useRef, useEffect } from 'react';
  import { PaymentRequestButtonElement } from '@stripe/react-stripe-js';
  
  const ApplePayButton = ({ isDisabled }) => {
    const buttonRef = useRef(null);
  
    // 监听禁用状态变化，更新按钮
    useEffect(() => {
      if (buttonRef.current) {
        buttonRef.current.update({ disabled: isDisabled });
      }
    }, [isDisabled]);
  
    return (
      <PaymentRequestButtonElement
        ref={buttonRef}
        options={{
          paymentRequest,
          disableMultipleButtons: true,
          style: {
            paymentRequestButton: {
              type: "buy",
              theme: "dark",
              height: "48px",
            },
          },
        }}
      />
    );
  };
  

  使用时只需给ApplePayButton组件传入isDisabled布尔值即可控制按钮是否禁用。

• 方式二：直接操作DOM属性（不推荐）
  虽然可以通过DOM操作给按钮添加disabled属性，但Stripe的Element组件可能会在内部覆盖这个状态，导致控制失效，因此优先推荐第一种方式。

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