Javascript 如何向paypal智能按钮添加自定义CSS
我想实现的不是让付款按钮的背景变成黑色,而是一种定制的颜色,比如说,我想让它变成粉红色加上白色字母(就像示例一样),我如何实现这一点Javascript 如何向paypal智能按钮添加自定义CSS,javascript,html,css,paypal,Javascript,Html,Css,Paypal,我想实现的不是让付款按钮的背景变成黑色,而是一种定制的颜色,比如说,我想让它变成粉红色加上白色字母(就像示例一样),我如何实现这一点 <div id="paypal-button-container"></div> <script src="https://www.paypal.com/sdk/js?client-id=#################&vault=true&intent=subscription&qu
<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>
贝宝,按钮({
风格:{
形状:'药丸',
颜色:'黑色',
布局:“垂直”,
标签:“订阅”,
尺寸:'响应',
},
createSubscription:函数(数据、操作){
return actions.subscription.create({
“计划id”:“P-#########”
});
},
onApprove:功能(数据、操作){
警报(data.subscriptionID);
}
}).render(“#贝宝按钮容器”);
我已经尝试了以下方法(当然无效):
.paypal-button.paypal-button-shape-pill{
背景:粉红色!重要;
颜色:白色!重要;
}
因为它是在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>
window.onload=函数(){
让myiFrame=document.getElementById(“someId”);
让doc=myiFrame.contentDocument;
doc.body.innerHTML=doc.body.innerHTML+'.paypal button.paypal按钮形状{背景:粉红色!重要;颜色:白色!重要;}';
}
遗憾的是,这一目标尚未实现。有人能帮我解决这个问题吗
编辑:
我想说的是,我不能仅仅更改paypal.buttons脚本中的样式颜色,因为这些按钮不再显示。这是不可能的。PayPal在其iframe内控制按钮的CSS,以实现其自身的标准化外观和感觉
更改按钮样式的选项有:;我们期望并希望其中一种风格选择能够合理地适合您的网站配色方案。我非常确定唯一的方法是检查创建的iframe的源代码并复制它,使按钮成为您自己网站的静态部分。这只是一个简单的问题。这样做,你显然可以随心所欲地设计它。但我不确定这是否会破坏其他东西。我刚刚试过。遗憾的是,由于某种原因,这些按钮不再出现……是的,坦率地说,我会将此标记为“不可能”,然后继续。如果paypal希望您能够以您喜欢的任何方式格式化这些按钮,他们可能会为此提供选项。但这些按钮总是很容易被用户识别,这可能是他们的首要任务。甚至可能存在安全问题,涉及点击劫持和其他诈骗。
<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>