Changing Stripe Button to a Custom Button Class

Question

I have a stripe button and want to add my custom class. I found that you can manually create the CSS for it and it will work, although, I want to keep all the buttons on my site consistent by using my custom class.

Whatever I try I cannot remove the default button

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

My class is ' button fstyle1 thin ' that id like on it

I've tried this but does not work.

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

Answer 1

Found the answer. All you need to do is add your own custom submit button and just hide the one stripe provides you with. Very easy.

<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

I think that is your class (button fstyle1 thin) level is lower then .stripe-button-el

Try add !important in you css.

or add more css combinators like: .a .b .c form .fstyle1

Hope to help you.

Answer 3

Its maybe your .button.stripe-button-el element is not exist in the DOM at the time of binding(means created dynamically).

So you can bind your event handler to a higher element $(document) .

Try to use $(document) here...

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

Answer 4

Like @victory said, the easier solution is to hide the button given by stripe by this line :

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

If you have multiple stripe buttons on one page , this will do the job :

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

Happy coding !

Answer 5

Try this,

$(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");