CODEWITHSUNDEEP
htmlcssruby-on-railsruby-on-rails-4stripe-payments
Gurmukh Singh
Gurmukh Singh

Reputation: 2017

Customise stripe button

Im using stripe checkout in my rails app. I have been following thier tutorial here. Its very basic and I have the payment process working.

What I'm having trouble with is styling the button in the following code. This script contains the button (Im not sure if i said that right), but this brings in the default button:

<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
          data-description="A month's subscription"
          data-amount="500"
          data-locale="auto"></script>

Iv tried applying styles to the strip-button class but have no luck, I have also looked within the doc provided but cant find nothing within it to suggest how I could style the default button.

Any suggestions or could thier be a better way in styling the button?

Upvotes: 1

Views: 4470

Answers (2)

mackenzie
mackenzie

Reputation: 21

I can't comment on siegy22's answer because I don't have enough reputation here, but I've gotten this to work.

.stripe-button-el {
    width: 120px;
    border-radius: 0.2em !important;
    border: 0 !important;
    background-image: none !important;
    background-color: #0000ff !important;
    font-weight: normal !important;
}

.stripe-button-el span {
    font-family: sans-serif !important;
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-size: 1em !important;
    border-radius: 0.2em !important;
    border: 0 !important;
    background-image: none !important;
    background: #0000ff !important;
    background-color: #0000ff !important;
}

What's happening in that Codepen above is the script in the Stripe form is running after the CSS on Codepen runs. This is why the button changes after you edit any of the CSS on Codepen.

I've found to get around this, just add !important to the CSS changes you've made. I know this isn't best practice but it overrides the Stripe script in the form, so this works for me.

Upvotes: 2

siegy22
siegy22

Reputation: 4413

I just made a little code pen

I think you'll have to use this selector in you stylesheet:

.stripe-button-el {
  width: 100px;
  # ...
}

Here's the DOM part you want to style:

<button type="submit" class="stripe-button-el" style="visibility: visible;">
  <span style="display: block; min-height: 30px;">Pay with Card</span>
</button>

EDIT:

The DOM part above is injected by the script you include. (You can imagine as it was there all the time). So you have to style this DOM part (in your css).

See my pen how to change styles.

I think this question is closed now, as you asked how to style it.

Upvotes: 2

Related Questions