自定义PayPal按钮后仍显示默认黄色按钮，如何隐藏默认按钮？

我之前也遇到过这个烦人的问题！你碰到的情况是因为paypal.Button.render会把它的默认黄色按钮追加到你指定的#btn-checkout容器里，而不是替换掉里面已有的内容——所以你的自定义文本和PayPal的默认按钮就共存了，导致默认按钮出现在下方。下面给你两种可靠的解决方案：

方法一：分离自定义按钮与PayPal容器（推荐） #

这种方法把自定义触发按钮和PayPal的内部渲染容器分开，完全避免冲突，还能保留自定义按钮的样式和交互逻辑：

修改后的HTML代码 #

<!-- 自定义按钮，用来触发PayPal支付弹窗 -->
<div class="btn-paypal" id='custom-paypal-btn'>Payer avec paypal</div>
<!-- 隐藏的容器，专门用来渲染PayPal按钮（用户看不到） -->
<div id='paypal-container' style="display: none;"></div>

修改后的JS代码 #

$(document).ready(function(){
  $.getScript("https://www.paypalobjects.com/api/checkout.js", function(){
    // 先将PayPal按钮渲染到隐藏容器中
    const paypalButton = paypal.Button.render({
      env: 'sandbox', // 生产环境改为 'production'
      commit: true,
      style: {
        color: 'gold',
        size: 'small'
      },
      payment: function(data, actions) {
        const create_payment = 'config/app/API/paypal/payment.php';
        return paypal.request.post(create_payment).then(function(data) {
          return data.id;
        });
      },
      onAuthorize: function(data, actions) {
        const execute_payment = 'config/app/API/paypal/pay.php';
        return paypal.request.post(execute_payment, {
          paymentID: data.paymentID,
          payerID: data.payerID
        }).then(function(data) {
          // 这里添加支付成功后的处理逻辑，比如跳转或提示
        });
      },
      onCancel: function(data, actions) {
        // 买家取消支付时的处理逻辑
      },
      onError: function(err) {
        alert('支付出错', err);
        console.log(err);
      }
    }, '#paypal-container');

    // 给自定义按钮绑定点击事件，触发PayPal支付弹窗
    $('#custom-paypal-btn').click(function() {
      paypalButton.open();
    });
  });
});

方法二：用CSS强制隐藏默认按钮（快速临时方案） #

如果你不想改动太多代码，可以直接用CSS把PayPal生成的默认按钮隐藏掉——不过这种方法依赖PayPal的DOM结构，未来如果PayPal更新元素结构可能失效：

/* 隐藏#btn-checkout容器内PayPal生成的按钮元素 */
#btn-checkout > div {
  display: none !important;
}

额外提醒 #

你当前使用的checkout.js是PayPal已经弃用的旧版SDK，建议后续升级到官方推荐的新版JavaScript SDK，它的灵活性和兼容性更好，也更容易自定义按钮样式。

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