首页 文章

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

提问于
浏览 次
26

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

  • 添加在外部样式表中定义的新类

  • 在外部样式表中修改自己的 stripe-button 类

  • 并使用 style="" 内联编辑

但是我无法通过按钮来改变它的风格 .

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

Button with default style:

enter image description here

有任何人对此有经验吗？

（如果有任何不同，我将整合到Ruby on Rails中 . ）

css stripe-payments

9 回答

  • 0

    以下内容将使用自定义颜色 #EB649C 覆盖背景颜色 . 需要禁用背景图像，以及按钮和内部span标签的样式 .

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

    搜索 class ：

    .stripe-button-el span

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

    回复于
  • 12

    这些都不适合我 . 我最终隐藏了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>
    回复于
  • 34

    虽然有点hacky，但对于任何想要使用不同按钮以及“简单集成”的超快速简单方法的人来说，特别是如果你没有“可靠的JavaScript技能”，你可以隐藏Stripe按钮;

    .stripe-button-el { display: none }

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

    回复于
  • 2

    您可以使用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>
    回复于
  • 0

    使用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>
    回复于
  • 9

    .stripe-button-el span实际上有效 .

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

    回复于
  • 2

    你可以试试这个，

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

    用卡支付是在 Span 内 .

    回复于
  • 6

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

相关问题