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 more
Keep footer at the bottom of page
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>
<footer>
...
</footer>
</body>In your CSS, add styles to display the body as a flex column using vertical-height:
.sample-body {
display: flex;
min-height: 100vh;
flex-direction: column;
}then make sure that the content takes up the full column:
.sample-content {
flex: 1;
}