Question

我在我的rails应用程序中使用条带检查。我一直在关注他们的教程here。它非常基础，我有付款流程。

我遇到的问题是在下面的代码中设置按钮的样式。这个脚本包含按钮（我不确定我说的是否正确），但这会带来默认按钮：

<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
          data-description="A month's subscription"
          data-amount="500"
          data-locale="auto"></script>

我尝试将样式应用到条带按钮类但没有运气，我也查看了提供的文档，但无法在其中找到任何内容，以建议我如何设置默认按钮的样式。

任何建议或者是否可以更好地设计按钮样式？

Answer 1

我刚做了一点code pen

我认为您必须在样式表中使用此选择器：

.stripe-button-el {
  width: 100px;
  # ...
}

这是您要设置样式的DOM部分：

<button type="submit" class="stripe-button-el" style="visibility: visible;">
  <span style="display: block; min-height: 30px;">Pay with Card</span>
</button>

编辑：

上面的DOM部分由您包含的脚本注入。（你可以想象，因为它一直存在）。所以你必须设置这个DOM部分的样式（在你的css中）。

请参阅我的pen如何更改样式。

我认为这个问题现在已经关闭了，因为你问的是如何设计它。

Answer 2

我无法对siegy22's answer发表评论，因为我在这里没有足够的声誉，但我已经让它发挥作用。

.stripe-button-el {
    width: 120px;
    border-radius: 0.2em !important;
    border: 0 !important;
    background-image: none !important;
    background-color: #0000ff !important;
    font-weight: normal !important;
}

.stripe-button-el span {
    font-family: sans-serif !important;
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-size: 1em !important;
    border-radius: 0.2em !important;
    border: 0 !important;
    background-image: none !important;
    background: #0000ff !important;
    background-color: #0000ff !important;
}

在Codepen above中发生的事情是Stripe表单中的脚本在运行Codepen上的CSS之后运行。这就是在编辑Codepen上的任何CSS后按钮发生变化的原因。

我发现可以解决这个问题，只需将!important添加到您所做的CSS更改中即可。我知道这不是最佳做法，但它会覆盖表单中的Stripe脚本，所以这对我有用。

自定义条纹按钮

2 个答案: