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

Question

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

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

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

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

默认样式的按钮:

有任何人对此有经验吗？

(如果有任何不同,我将整合到Ruby on Rails中.)

Answer 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>

Answer 2

搜索此课程:

.stripe-button-el span

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

Answer 3

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

.stripe-button-el { display: none }

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

Answer 4

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

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