Stripe Elements - change in layout of 'card-element'

Question

I am looking for a way to customise the layout of 'card number' 'expiry date' and 'CCV' fields when using Stripe Elements and injecting these fields through card.mount('#card-element'); as described in the first example of this page https://stripe.com/docs/stripe-js

It puts all the card fields in one row, I want to change that layout and put them in different rows.

Any ideas?

Thanks in advance

Answer 1

You can do this by creating a separate div for each card input (number, expiry, CVC), which you can layout however you like:

<div id="example3-card-number"></div>
<div id="example3-card-expiry"></div>
<div id="example3-card-cvc"></div>

Then tell Stripe Elements about each one:

var cardNumber = elements.create('cardNumber');
cardNumber.mount('#example3-card-number');

var cardExpiry = elements.create('cardExpiry');
cardExpiry.mount('#example3-card-expiry');

var cardCvc = elements.create('cardCvc');
cardCvc.mount('#example3-card-cvc');

Ref: https://stripe.dev/elements-examples/ (Example 3)