如何实现PayPal按钮容器的透明化效果

直接给<PayPalScriptProvider>或<PayPalButtons>组件添加内联样式无法生效，因为PayPal按钮是通过iframe渲染的，组件内联样式无法穿透到iframe内部。可以试试以下两种方法：

方法一：自定义容器+CSS穿透 #

给<PayPalButtons>套一个自定义容器，通过CSS定位到PayPal的按钮容器并设置透明：

修改后的代码 #

<div className="paypal-button-wrapper">
  <PayPalScriptProvider options={"client-id": "myid", components: "buttons", currency: "USD"}>
    <PayPalButtons 
      createOrder={(data, actions) => {
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: globalval
            }
          }]
        });
      }} 
      onApprove={(data, actions) => {
        return actions.order.capture().then(function(details) {
          alert('Transaction completed by ' + details.payer.name.given_name); 
        });
      }} 
    />
  </PayPalScriptProvider>
</div>

对应的CSS（全局样式或模块样式） #

.paypal-button-wrapper .paypal-buttons-context {
  background-color: transparent !important;
}

/* 如果需要让按钮本身也透明，可添加 */
.paypal-button-wrapper [data-testid="paypal-button"] {
  background: transparent !important;
  border: none !important;
}

方法二：利用PayPal按钮的style配置 #

PayPal的<PayPalButtons>组件支持通过style属性配置按钮外观，你可以尝试设置容器的透明属性：

<PayPalButtons
  // 其他属性不变
  style={{
    layout: 'vertical',
    color: 'gold',
    shape: 'rect',
    label: 'paypal',
    // 配置容器背景透明
    container: {
      backgroundColor: 'transparent'
    }
  }}
/>

如果方法二不生效，优先使用方法一——因为iframe的样式优先级更高，需要用CSS强制覆盖。

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