React项目中使用@paypal/react-paypal-js仅渲染PayPal按钮的方法

别用CSS尝试隐藏iframe里的按钮，PayPal官方提供了直接控制支付方式显示的配置，这才是正确解决方案：

方法一：指定单一支付来源 #

通过fundingSource属性直接限定只加载PayPal按钮，操作步骤如下：

• 新增导入PayPalFundingSource
• 给PayPalButtons组件添加fundingSource属性

修改后的代码：

import {
  PayPalButtons,
  usePayPalScriptReducer,
  PayPalFundingSource // 新增导入
} from "@paypal/react-paypal-js";

<Box>
  <PayPalButtons
    style={{ layout: "vertical" }}
    className="paypal-buttons"
    fundingSource={PayPalFundingSource.PAYPAL} // 指定仅显示PayPal按钮
    createOrder={(data, actions) => onCreateOrder(data, actions)}
    onApprove={(data, actions) => onApproveOrder(data, actions)}
  />
</Box>

方法二：排除不需要的支付方式 #

如果需要保留部分支付方式但禁用借记卡，可通过fundingOptions配置实现：

<PayPalButtons
  style={{ layout: "vertical" }}
  className="paypal-buttons"
  fundingOptions={{
    card: { disabled: true } // 禁用借记卡按钮
  }}
  createOrder={(data, actions) => onCreateOrder(data, actions)}
  onApprove={(data, actions) => onApproveOrder(data, actions)}
/>

为什么CSS隐藏无效？ #

PayPal的支付按钮渲染在独立iframe中，受浏览器同源策略限制，外部页面的CSS无法穿透iframe修改内部元素样式，因此必须依赖PayPal官方提供的配置项控制支付方式的显示。

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