修改“用卡支付”条纹按钮的样式

Posted

技术标签:

【中文标题】修改“用卡支付”条纹按钮的样式【英文标题】:Modify style of 'Pay with Card' Stripe button 【发布时间】:2016-08-08 03:41:50 【问题描述】:

是否可以修改“刷卡支付”条纹按钮的样式?我试过修改,

添加在外部样式表中定义的新类 在外部样式表中修改自己的 stripe-button 类 并使用style="" 内联编辑它

但我无法让按钮更改其样式。

看起来可能用custom integration 而不是simple integration(来源:https://stripe.com/docs/checkout#integration-simple),但我希望有更简单的东西。

默认样式的按钮:

有人有这方面的经验吗?

(如果这有什么不同,我将集成到 Ruby on Rails 中。)

【问题讨论】:

custom integration 有什么问题?您可以使用自己的按钮样式并分离逻辑。它似乎没有那么复杂;) 你是对的。这并不复杂。 gist.github.com/u01jmg3/a9f53d4c4978c76a87f433570af4bbbc Stripe为此按钮提供data-label***.com/a/54894894/1536309 【参考方案1】:

这些都不适合我。我最终将按钮隐藏在 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>

【讨论】:

不是最优雅的解决方案,但可以完成工作。谢谢! 为我工作!谢谢! 工作就像一个魅力。 :D【参考方案2】:

搜索这个

.stripe-button-el span

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

【讨论】:

请注意,Stripe 不保证按钮的结构,因此它可以随时更改。 将其标记为正确,因为我问过如何编辑按钮,但最终的优越解决方案是使用custom integration【参考方案3】:

虽然有点老套,但对于任何想要一种超级快速和简单的方式来使用不同按钮以及“简单集成”的人,特别是如果你没有“扎实的 JavaScript 技能”,你可以隐藏 Stripe 按钮与;

.stripe-button-el  display: none 

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

【讨论】:

感谢您的提示。我试过了,Stripe 的默认样式覆盖了我的 CSS。于是我写了.stripeFormContainer .stripe-button-el(因为我的表单恰好被包含在一个带有stripeFormContainer 类的div 中),它成功了!我现在使用 Bootstrap 中的一个按钮,如下所示:&lt;button class="btn btn-lg btn-success"&gt;Reserve My Spot&lt;/button&gt;. 只是提醒一下这个方法,提交按钮在点击时会被禁用,但如果用户关闭 Checkout 提示,则 not 会重新启用,这与默认的 Stripe 按钮不同重新启用。这种方法的一个不幸的用户体验错误。 我让我的强制它,因为它正在使用这个。我的这个按钮的 CSS 看起来像 .stripe-button-el display: none !important; 【参考方案4】:

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

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

【讨论】:

【参考方案5】:

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

【讨论】:

【参考方案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>

【讨论】:

缩放似乎对我很有效。虽然 2x 对于我的目的来说有点过分。改为使用 1.5 倍。【参考方案7】:

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

【讨论】:

【参考方案8】:

.stripe-button-el 范围确实有效。

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

【讨论】:

【参考方案9】:

你可以试试这个,

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

刷卡支付在跨度内。

【讨论】:

【参考方案10】:

对于那些想要更改按钮背景颜色的人,请确保执行类似

的操作
.stripe-button-el span 
  background: #5e366a !important;
  background-image:none !important;
  background-color: #5e366a !important;

在您的 css 文件中。这将改变你按钮的实际背景。如果您希望更改父 div,您可以在没有跨度的情况下执行相同的操作,或者执行直接内联样式。

【讨论】:

以上是关于修改“用卡支付”条纹按钮的样式的主要内容,如果未能解决你的问题,请参考以下文章

layer弹窗按钮样式和提示文字内容如何修改?

如何用CSS修改提交按钮样式

修改 GTK 按钮样式/CSS 并立即更新/刷新

修改video标签自带按钮的默认样式

通过 iframe 进行的信用卡支付表格是不是有缺点? [关闭]

修改上传文件的按钮样式