自定义条纹按钮

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 脚本，所以这对我有用。