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>