I am using Stripe elements to take a credit card payment.
My Javascript is
const appearance = {
theme: 'flat'
};
stripe = Stripe('xxxx');
elements = stripe.elements({ appearance });
card = elements.create('card');
card.mount('#card-element');
And the HTML is
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<div id="card-errors" role="alert"></div>
When display the card fields display as a single line
I would like it to display as separate fields in a more traditional setup as demonstrated here https://docs.stripe.com/elements/appearance-api
How can I do that?
You would want to use their split Elements, such as Card Number, Expiry, and CVC. However, their Card Elements is their legacy product, the Payment Elements is a better option. The document. https://docs.stripe.com/elements/appearance-api you shared above is for the Payment Element.
Their Payment Element offers an embedded UI component for you to accept many payment methods securely with one integration. Depending on where your customer is, it dynamically sorts the payment method to optimize conversion, adjusts input fields automatically for different Payment Methods, validates inputs to reduce friction for card payments.
I highly recommend that you use their more modern Payment Element instead.
1