修改'Pay with Card'条纹按钮样式

Question

是否可以修改 "Pay with Card" 条纹按钮的样式？我试过修改，

添加在外部样式中定义的新 class sheet
在外部样式中修改自己的 class of stripe-button sheet
并使用 style=""

但是我无法获取更改其样式的按钮。

看起来用 custom integration 代替 simple integration 可能可行（来源：https://stripe.com/docs/checkout#integration-simple），但我希望有更简单的东西。

默认样式的按钮：

有人有这方面的经验吗？

（我将在 Rails 上整合到 Ruby，如果这有什么不同的话。）

Answer 1

搜索此 class：

.stripe-button-el span

我认为这是您必须修改自己的按钮样式的地方。您可以在自己的外部 css 文件中覆盖它。

Answer 2

虽然有点老套，但对于任何想要使用不同按钮和 "simple integration" 的超快速简单方法的人来说，特别是如果您没有 "solid JavaScript skills"，您可以隐藏条纹按钮；

.stripe-button-el { display: none }

这样，表单中的任何提交按钮都会调用结帐，因此您可以只使用引入 Stripe 之前已有的按钮。

Answer 3

None 对我有用。我最终将按钮隐藏在 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>

Answer 4

您可以使用 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>

Answer 5

以下将使用自定义颜色 #EB649C 覆盖背景颜色。需要禁用背景图像，以及设置按钮及其内部 span 标记的样式。

button.stripe-button-el,
button.stripe-button-el>span {
  background-color: #EB649C !important;
  background-image: none;
}

Answer 6

使用jQuery，您也可以像这样简单地缩放按钮：

<script>
  $(function() {
    $(".stripe-button-el").css({'transform': 'scale(2)'});
  });
</script>

或者将其替换为带有您想要的任何图像的按钮，如下所示：

<script>
  $(function() {
    $(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
  });
</script>

Answer 7

.stripe-button-el 跨度确实有效。

但是需要在CSS中添加!important来覆盖默认的CSS。

Answer 8

你可以试试这个，

$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");

刷卡支付在span内。

Answer 9

您应该使用 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>

Answer 10

对于那些想要更改按钮背景颜色的人，请务必执行类似

的操作

.stripe-button-el span {
  background: #5e366a !important;
  background-image:none !important;
  background-color: #5e366a !important;
}

在您的 css 文件中。这将改变你按钮的实际背景。如果您希望更改父级 div，您可以在没有跨度的情况下做同样的事情，或者做一个直接的内联样式。

修改'Pay with Card'条纹按钮样式

Modify style of 'Pay with Card' Stripe button

css

stripe-payments