Question

我有一个条纹按钮，想要添加我的自定义类。我发现你可以为它手动创建CSS并且它会起作用，但是，我希望通过使用我的自定义类来保持我网站上的所有按钮一致。

无论我尝试什么，我都无法删除默认按钮

<form action="/update-the-card" method="POST">
    {{ csrf_field() }}
    <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="{{ env('STRIPE_KEY') }}"
    data-name="My site"
    data-panel-label="Update Card"
    data-label="Update Card"
    data-allow-remember-me=false
    data-locale="auto">
    </script>
</form>

我的课程是＆＃39; button fstyle1 thin＆＃39;那个id喜欢它

我试过这个但是没有用。

 $('button.stripe-button-el').removeAttr('style').addClass('button fstyle1 thin')

Answer 1

找到答案。您需要做的就是添加自己的自定义提交按钮，只需隐藏一个条带提供给您。很容易。

<form action="/update-the-card" method="POST">
    {{ csrf_field() }}
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="{{ env('STRIPE_KEY') }}"
        data-amount="44040"
        data-name="nameeee"
        data-description="descriptionnn"
        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="button green fsize-16 f-weight-400">Purchase Here!</button>
</form>

Answer 2

我认为这是你的班级（按钮fstyle1瘦）水平低于await SiteTable.UpdateAsync(site);

尝试在你的css中添加.stripe-button-el。

或添加更多css组合器，例如：!important

希望能帮到你。

Answer 3

它可能在绑定时.button.stripe-button-el中存在DOM元素（动态创建）。

因此，您可以将事件处理程序绑定到更高的元素$(document)。

尝试在此使用$(document) ...

$(document).find("button.stripe-button-el").removeAttr("style").addClass("button fstyle1 thin");

Answer 4

就像@victory所说的那样，更简单的解决方案是在此行中隐藏条纹给定的按钮：

document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';

如果一页上有多个条纹按钮，则可以完成此任务：

<script>
  var all_buttons = document.getElementsByClassName("stripe-button-el");
  for (var i = 0; i < all_buttons.length; i++) {
    all_buttons[i].style.display = "none";
  }
</script>

编码愉快！

Answer 5

尝试一下

$(document).find("button.stripe-button-el").removeAttr("style").addClass("'button fstyle1 thin'");
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");

将条带按钮更改为自定义按钮类

5 个答案: