• Call Us
  • 360.322.4907

Monday - Friday ( 09.00 - 18.00 PST )

Extension Support

You have question, we have answers. If you are having trouble with one of our extensions let us know and we'll help you out.
  1. Matt
  2. Documentation
  3. Wednesday, 30 November 2016

The Pay with Card button styling is pulled from the Strip API which, in some cases, makes it difficult to style. It all depends on your template and how it loads CSS files.

stripe button styling

You may be able to override the CSS that is being pulled from the Stripe API but there is no guarentee it will work for you.

The button class is .stripe-button-el and it is partly wrapped in a span.

In your template's custom CSS file or Custom CSS setting in the template configuration you could try adding overrides to style the button to suit your needs. Below is the custom CSS we used for the demo site. You will need to refer to your templates documentation on how to add custom CSS as every template is different.

.stripe-button-el span {
background: none transparent!important;
background-image: none!important;
font-size: 1em!important;
font-family: "Roboto"!important;
box-shadow: none!important;
font-weight: 400!important;
}

.stripe-button-el {
background: #F16C3D!important;
background-image: none #F16C3D!important;
-webkit-border-radius: 2px!important;
-moz-border-radius: 2px!important;
border-radius: 2px!important;
border-color: #F16C3D!important;
padding: 4px 12px!important;
box-shadow: none!important;
}

.stripe-button-el:hover,
.stripe-button-el span:hover {
background: #96AD57!important;
background-image: none #96AD57!important;
border-color: #96AD57!important;
}

You may need to experiment a bit with different CSS attributes to acheive the styling you need. Note that the CSS classes that are used may change at any time if Stripe decides to make any changes.

Responses (0)


There are no replies made for this post yet.
However, you are not allowed to reply to this post.
Sorry, the discussion is currently locked. You will not be able to post a reply at the moment.

Support is currently

Categories

Announcements
  1. 0 subcategories
General / Billing Questions
  1. 0 subcategories
NS FontAwesome Pro
  1. 4 subcategories
Stripe for RSForm Pro
  1. 4 subcategories
Stripe for RSMembership
  1. 4 subcategories
Stripe for RSEvents
  1. 4 subcategories
NS Members Only
  1. 4 subcategories
NS Mail Template
  1. 4 subcategories
Bitcoin for RSForm Pro
  1. 4 subcategories
NS Share Intent for Zoo
  1. 4 subcategories
NS Name Split
  1. 4 subcategories
NS Formula
  1. 4 subcategories
NS MeetUp
  1. 4 subcategories
NS Nerds
  1. 4 subcategories
NS DownloadShop
  1. 4 subcategories
(360) 322-4907