自定义条纹按钮

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>

我尝试将样式应用到条形按钮 class 但没有成功，我也查看了提供的文档，但在其中找不到任何建议如何设置默认按钮的样式。

有什么建议或它们可以是按钮样式的更好方法吗？

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

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

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

自定义条纹按钮

Customise stripe button

html

css

ruby-on-rails

stripe-payments

ruby-on-rails-4