How to display the zip code input by default in Stripe Elements?

I am integrating Stripe Elements into my payment form, and I want the zip code (postal code) input to be displayed by default as part of the form. However, with the default behavior of Stripe's card element, the zip code field only appears after entering the card number.

Here’s the code I’m currently using: Html

<div id="card-element" class="form-control my-in"></div>
 <button class="btn btn-primary proseed submit-but single-but update-car" id="place- 
 order">Pay Now</button>

JS:

    const stripe = Stripe('my-stripe-key');
const elements = stripe.elements();

const cardElement = elements.create("card", {
    style: {
        base: {
            color: "white",
            "::placeholder": {
                color: "white",
            },
        },
    },
    hidePostalCode: false, // Ensures the postal code field is displayed
});

cardElement.mount("#card-element");

Even though I added hidePostalCode: false, the zip code field only shows up after I start typing the card number. I want the zip code field to always be visible as soon as the page loads, without requiring any input in the card number field. What I Need: How can I ensure that the zip code input is visible as soon as the page loads? Do I need to use a different setup for Stripe Elements, or is there a configuration I’m missing?

Any advice or examples would be greatly appreciated! I am using laravel 11 with jquery

You cannot force this with the Card element, but you can do the opposite: use hidePostalCode: true to disable the postal code input inside Card Element and place your own custom field alongside it for postal code collection. Since it's your own field, you'd have control over showing it how you'd like.

Example: https://jsfiddle.net/nolanhawkins/vfo2zmx9/

Another option is using the split the Card Element fields, individually mounted to host DOM elements for each of card number, expiry and CVC. Then you'd again provide your own Postal Code field for collecting that and sending with billing details.

Example: https://jsfiddle.net/ywain/o2n3js2r/

Another way to go would be switching to the newer Payment ELement, which uses those split fields by default and manages the postal code collection for you in supported countries.

https://docs.stripe.com/payments/payment-element