I've successfully implemented stripe using this HTML code and Bootstrap 4.
<div class="form-control" id="card-element"></div>
As a result, I get the displayed output:
https://i.sstatic.net/Aw653.png
However, I am looking to achieve this design instead:
https://i.sstatic.net/b78Y1.png
The JavaScript portion remains the same:
<script src="https://js.stripe.com/v3/"></script>
<script>
.......
.......
stripe = Stripe(publishableKey);
var elements = stripe.elements();
var style = {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4"
}
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a"
}
};
var card = elements.create("card", {hidePostalCode: true, style: style });
card.mount("#card-element");
.......
.......
</script>
Is there a way I can achieve the second design with each field separated?