Answer by Louie Bacaj for How can I style a Stripe Elements input with Bootstrap?

Adding another Answer since I felt the simplest one on here was slightly incomplete. Added the error display and the JavaScript used to send the token to the back-end in case you want to do that.

This HTML (which is right from their default docs with Bootstrap 4 elements added)

<form action="/charge" method="post" id="payment-form"><div class="form-group"><label for="card-element">        Credit or debit card</label><div id="card-element" class="form-control"><!-- A Stripe Element will be inserted here. --></div><!-- Used to display Element errors. --><div id="card-errors" role="alert"></div></div><button>Submit Payment</button></form>

And This is the JavaScript (again right from their default docs but I use jQuery here but you dont have to)

<script src="https://js.stripe.com/v3/"></script><script>(function ($) {    // Set your publishable key: remember to change this to your live publishable key in production    // See your keys here: https://dashboard.stripe.com/account/apikeys    var stripe = Stripe('yourPublishableKeyHere');    var elements = stripe.elements();    // Custom styling can be passed to options when creating an Element.    var style = {      base: {        // Add your base input styles here. For example:        fontSize: '16px',        color: '#32325d',      },    };    // Create an instance of the card Element.    var card = elements.create('card', {style: style});    // Add an instance of the card Element into the `card-element` <div>.    card.mount('#card-element');    // Create a token or display an error when the form is submitted.    var form = document.getElementById('payment-form');    form.addEventListener('submit', function(event) {      event.preventDefault();      stripe.createToken(card).then(function(result) {        if (result.error) {          // Inform the customer that there was an error.          var errorElement = document.getElementById('card-errors');          errorElement.textContent = result.error.message;        } else {          // Send the token to your server.          stripeTokenHandler(result.token);        }      });    });    function stripeTokenHandler(token) {      // Insert the token ID into the form so it gets submitted to the server      var form = document.getElementById('payment-form');      var hiddenInput = document.createElement('input');      hiddenInput.setAttribute('type', 'hidden');      hiddenInput.setAttribute('name', 'stripeToken');      hiddenInput.setAttribute('value', token.id);      form.appendChild(hiddenInput);      // Submit the form      form.submit();    }})(jQuery);</script>