CSS 修改“Pay with Card”条纹按钮样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36659471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify style of 'Pay with Card' Stripe button
提问by tim_xyz
Is it possible to modify style of "Pay with Card" Stripe button? I've tried modifying by,
是否可以修改“Pay with Card”条纹按钮的样式？我试过修改，
- adding a new class defined in external style sheet
- modifying its own class of
stripe-buttonin external style sheet - and editing it inline with
style=""
- 添加在外部样式表中定义的新类
stripe-button在外部样式表中修改自己的类- 并编辑它内联
style=""
But I cannot get the button to change its style.
但是我无法获得更改其样式的按钮。
It looks like it might be possible with the custom integrationinstead of the simple integration(source: https://stripe.com/docs/checkout#integration-simple), but I was hoping there was something simpler.
看起来它可以custom integration代替simple integration（来源：https: //stripe.com/docs/checkout#integration-simple），但我希望有更简单的东西。
Button with default style:
默认样式的按钮：
Does anyone have experience with this?
有任何人对此有经验吗？
(I'm integrating into Ruby on Rails if that makes any difference.)
（如果这有什么不同的话，我将集成到 Ruby on Rails 中。）
采纳答案by Xovika
Search for this class:
搜索这个类：
.stripe-button-el span
I think this is where you have to modify your own button's style. You may overwrite it within your own external css file.
我认为这是您必须修改自己的按钮样式的地方。您可以在自己的外部 css 文件中覆盖它。
回答by Endive au Jambon
None of those worked for me. I ended up hiding the button in javascript and making a new one.
这些都不适合我。我最终将按钮隐藏在 javascript 中并制作了一个新按钮。
<form action="/your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="xxx"
data-amount="999"
data-name="zzz"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
<button type="submit" class="yourCustomClass">Buy my things</button>
</form>
回答by Carl G
Although a little hacky, for anyone wanting a super quick and simple way of using a different button along with the "simple integration", especially if you don't have "solid JavaScript skills", you can just hide the Stripe button with;
虽然有点 hacky，但对于任何想要使用不同按钮的超级快速和简单方式以及“简单集成”的人来说，特别是如果你没有“扎实的 JavaScript 技能”，你可以隐藏条纹按钮；
.stripe-button-el { display: none }
This way, any submit button within the form will call the checkout so you can just use the button you already had before introducing Stripe.
这样，表单中的任何提交按钮都会调用结帐，因此您可以使用在引入 Stripe 之前已有的按钮。
回答by ruffrey
The following will override the background color with the custom color #EB649C. Disabling the background-image is required, as well as styling both the button and it's inside span tag.
以下将使用自定义颜色覆盖背景颜色#EB649C。需要禁用背景图像，以及设置按钮和它在 span 标签内的样式。
button.stripe-button-el,
button.stripe-button-el>span {
background-color: #EB649C !important;
background-image: none;
}
回答by Guillaume Bihet
Using jQuery, you can also simply scale the button like this:
使用 jQuery，您还可以像这样简单地缩放按钮：
<script>
$(function() {
$(".stripe-button-el").css({'transform': 'scale(2)'});
});
</script>
Or replace it by a button with any image you want, like this:
或者用你想要的任何图像的按钮替换它，像这样：
<script>
$(function() {
$(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
});
</script>
回答by Lyrical.me
You can remove the button styles with Jquery and add your own. Worked a charm for me:
您可以使用 Jquery 删除按钮样式并添加您自己的样式。为我工作的魅力：
<script type="text/javascript">
$(document).ready(function(){
$(".stripe-button-el span").remove();
$("button.stripe-button-el").removeAttr('style').css({
"display":"inline-block",
"width":"100%",
"padding":"15px",
"background":"#3fb0ac",
"color":"white",
"font-size":"1.3em" }).html("Sign Me Up!");
});
</script>
回答by Blair Anderson
You should use data-labelits part of the regular stripe Checkout API:
您应该使用data-label作为常规条带 Checkout API 的一部分：
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
data-amount="10000"
data-label="Proceed to Pay with Card"
...
...
data-locale="auto">
</script>
回答by Jamar
For those of you who want to change the background color of the button, make sure you do something like
对于那些想要更改按钮背景颜色的人，请确保您执行以下操作
.stripe-button-el span {
background: #5e366a !important;
background-image:none !important;
background-color: #5e366a !important;
}
in your css file. this will change the actual background of the button fr you. If you wish to have the parent div changed, you can do the same thing without the span or do a direct inline style.
在你的 css 文件中。这将改变按钮的实际背景。如果您希望更改父 div，您可以在没有跨度的情况下执行相同的操作或执行直接内联样式。
回答by Ajay kumar
The .stripe-button-elspan actually works.
该.stripe-button-el跨度实际工作。
But you need to add !importantin CSS to overwrite the default CSS.
但是您需要添加!importantCSS 以覆盖默认 CSS。
回答by reshma
You can try this,
你可以试试这个
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");
Pay with card is inside a span.
用卡支付是在一个跨度内。
