Categories
bootstrap-4 css stripe-payments twitter-bootstrap

Stripe elements and Bootstrap 4.1 css conflicts

As the title states, there appears to be css conflicts between Bootstrap 4.1 and Stripe’s elements api. I’ve been digging around attempting to find confirmation of this and a possible solution but to no avail.

Below is the source code to recreate this issue along with a couple of fiddles for live examples. Has anyone seen this before / know of a solution?

Fiddle without including bootstrap 4.1

Fiddle WITH bootstrap 4.1

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<!-- When below three lines are included, stripe elements are incorrectly rendered -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var stripe = Stripe($('#spk').val());
var elements = stripe.elements();
var style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
lineHeight: '24px'
}
};
var card = elements.create('card', {style: style});
card.mount('#card-element');
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent="";
}
});
var form = document.getElementById('paymentMethodForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
var form = document.getElementById('paymentMethodForm');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
form.submit();
}
});
</script>
</head>
<body>
<div style="width:400px;">
<!-- sample test key from stripe website -->
<input type="hidden" id="spk" value="pk_test_TYooMQauvdEDq54NiTphI7jx"/>
<form action="/" method="POST" id="paymentMethodForm" class="d-block">
<div class="form-row">
<label for="card-element">Credit or debit card</label>
<div id="card-element" style="">
</div>
<div class="alert-danger text-center" id="card-errors" role="alert"></div>
</div>
<div class="text-center">
<br/>
<button class="btn btn-primary">Add Payment Method</button>
</div>
</form>
</div>
</body>
</html>

This CSS will fix it:

.form-row {
display: inherit;
}

Bootstrap has it set to display: flex.

Check this fiddle.