Modify style of 'Pay with Card' Stripe button

Question

Is it possible to modify style of "Pay with Card" Stripe button? I've tried modifying by,

• adding a new class defined in external style sheet
• modifying its own class of stripe-button in external style sheet
• and editing it inline with style=""

But I cannot get the button to change its style.

It looks like it might be possible with the custom integration instead of the simple integration (source: https://stripe.com/docs/checkout#integration-simple), but I was hoping there was something simpler.

Button with default style:

Does anyone have experience with this?

(I'm integrating into Ruby on Rails if that makes any difference.)

Answer 1

None of those worked for me. I ended up hiding the button in javascript and making a new one.

<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

Search for this class:

.stripe-button-el span

I think this is where you have to modify your own button's style. You may overwrite it within your own external css file.

Answer 3

Although a little hacky, for anyone wanting a super quick and simple way of using a different button along with the "simple integration", especially if you don't have "solid JavaScript skills", you can just hide the Stripe button with;

.stripe-button-el { display: none }

This way, any submit button within the form will call the checkout so you can just use the button you already had before introducing Stripe.

Answer 4

The following will override the background color with the custom color #EB649C. Disabling the background-image is required, as well as styling both the button and it's inside span tag.

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

Answer 5

You should use data-label its part of the regular stripe Checkout API:

<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
  data-amount="10000"
  data-label="Proceed to Pay with Card"
  ...
  ...
  data-locale="auto">
  </script>

Answer 6

Using jQuery, you can also simply scale the button like this:

<script>
  $(function() {
    $(".stripe-button-el").css({'transform': 'scale(2)'});
  });
</script>

Or replace it by a button with any image you want, like this:

<script>
  $(function() {
    $(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
  });
</script>

Answer 7

You can remove the button styles with Jquery and add your own. Worked a charm for me:

<script type="text/javascript">
    $(document).ready(function(){
        $(".stripe-button-el span").remove();
            $("button.stripe-button-el").removeAttr('style').css({
                "display":"inline-block",
                "width":"100%",
                "padding":"15px",
                "background":"#3fb0ac",
                "color":"white",
                "font-size":"1.3em" }).html("Sign Me Up!");
        });
</script>