如何将自定义 CSS 添加到贝宝智能按钮答案

【问题标题】：How to add custom CSS to paypal smart buttons如何将自定义 CSS 添加到贝宝智能按钮
【发布时间】：2021-05-16 00:30:23
【问题描述】：

我想要实现的实际上并不是让付款按钮背景为黑色，而是自定义颜色，例如，假设我希望它带有白色字母的粉红色（仅作为示例），我该如何实现这一点?

<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=#################&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<script>
    paypal.Buttons({
        style: {
            shape: 'pill',
            color: 'black',
            layout: 'vertical',
            label: 'subscribe',
            size: 'responsive',
        },
        createSubscription: function(data, actions) {
            return actions.subscription.create({
                'plan_id': 'P-##########'
            });
        },
        onApprove: function(data, actions) {
            alert(data.subscriptionID);
        }
    }).render('#paypal-button-container');
</script>

我已经尝试过以下方法（当然没用）：

<style>
.paypal-button.paypal-button-shape-pill {
  background: pink!important;
  color: white!important;
}
</style>

因为它是在 iframe 中生成的，所以我还尝试了以下方法：

<script>
window.onload = function() {
   let myiFrame = document.getElementById("someId");
   let doc = myiFrame.contentDocument;
   doc.body.innerHTML = doc.body.innerHTML + '<style>.paypal-button.paypal-button-shape-pill{background: pink!important;color: white!important;}</style>';
}
</script>

遗憾的是，它仍然没有实现。有人可以帮我解决这个问题吗？

编辑：只想提一下，我不能只更改 paypal.buttons 脚本中的样式颜色，因为按钮不再显示。

【问题讨论】：

我很确定唯一的方法是检查创建的 iframe 的源代码并复制它，使按钮成为您自己网站的静态部分。这只是一个简单的
，afaik。这样做，您显然可以随心所欲地设计它。不知道这是否会破坏其他东西。
我刚试过。可悲的是，由于某种原因，按钮不再显示了..
是的，坦率地说，我会将此标记为“不可能”并继续前进。
如果贝宝希望您能够以您喜欢的任何方式格式化这些按钮，他们可能会为此提供选项。但是这些按钮总是很容易被用户识别，这可能是他们的首要任务。甚至可能存在关于点击劫持和其他诈骗的安全问题。

标签： javascript html css paypal

【解决方案1】：

这是不可能的。 PayPal 在其 iframe 中控制按钮的 CSS，以实现其自己的标准化外观。

更改按钮样式的选项是documented here；预计并希望其中一种样式替代方案能够合理地适合您的网站配色方案。

【讨论】：