CODEWITHSUNDEEP
cssstripe-payments
tim_xyz
tim_xyz

Reputation: 13491

Modify style of 'Pay with Card' Stripe button

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

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:

enter image description here

Does anyone have experience with this?

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

Upvotes: 32

Views: 35337

Answers (10)

Jam
Jam

Reputation: 1

For those of you who want to change the background color of the button, make sure you do something like 

.stripe-button-el span {
  background: #5e366a !important;
  background-image:none !important;
  background-color: #5e366a !important;
}

in your css file. this will change the actual background of the button fr you. If you wish to have the parent div changed, you can do the same thing without the span or do a direct inline style.

Upvotes: 0

Blair Anderson
Blair Anderson

Reputation: 20171

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>

Upvotes: 4

reshma
reshma

Reputation: 722

You can try this,

$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");

Pay with card is inside a span.

Upvotes: 0

Ajay kumar
Ajay kumar

Reputation: 1

The .stripe-button-el span actually works.

But you need to add !important in CSS to overwrite the default CSS.

Upvotes: 0

Guillaume Bihet
Guillaume Bihet

Reputation: 705

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>

Upvotes: 3

ruffrey
ruffrey

Reputation: 6138

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

Upvotes: 8

Lyrical.me
Lyrical.me

Reputation: 215

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>

Upvotes: 2

Endive au Jambon
Endive au Jambon

Reputation: 471

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>

Upvotes: 42

Carl G
Carl G

Reputation: 101

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.

Upvotes: 10

Xovika
Xovika

Reputation: 158

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.

Upvotes: 14

Related Questions