Thu Apr 26, 2018 2:00 PM

How to style Stripe Element

Add style options when initializing the Stripe Element object, like so:

var style = {
          base: {
            // Add your base input styles here. For example:
            fontSize: '16px',
            lineHeight: '24px',
            iconColor: '#c4f0ff',
            color: '#fff',
            fontSmoothing: 'antialiased',
            fontWeight: 500,
            '::placeholder': {
              color: '#ffffff',
            },
            ':-webkit-autofill': {
              color: '#ffffff',
            }
          },
          invalid: {
            iconColor: '#FFC7EE',
            color: '#FFC7EE',
          },
        };

View all Element options 

Tue Dec 12, 2017 5:00 PM
guide
When your content doesn't fill the page, the footer won't stay at the bottom of the page by default.  There are a lot of solutions available to solve this with javascript, CSS tables, and using .fixed.  I don't like these hacky solutions that provide inconsistent results.  Using CSS flex, you can achieve the desired results consistently using only CSS. First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample. <body class="sample-body"> ... </div> Next, wrap your content like so: <body class="sample-body"> <div class="sample-content"> ... </div>  ...more