How can I display the postal code field immediately on page load using Stripe Elements?

Stripe’s unified Card Element isn’t designed to show the postal code input until the user begins entering a card number. Even though setting hidePostalCode: false includes the field in the element, its initial display is part of Stripe’s built‑in behavior for this composite UI component.

If you need the postal code input to be visible immediately on page load without requiring any card number input, you have two options:

1. Use separate, split elements for card details (e.g. cardNumber, cardExpiry, and cardCvc) and add a custom HTML input (or an additional Element if you prefer) for the postal code. This gives you complete control over the placement and display of each field.

2. Overlay a custom input field styled to appear as part of the payment form and then later combine its value with the card details. This approach requires a bit more work on your end and careful handling when processing the payment.

For example, using split Elements:

---

HTML:

HTMLCopied
<div id="card-number-element" class="form-control my-in"></div>
<div id="card-expiry-element" class="form-control my-in"></div>
<div id="card-cvc-element" class="form-control my-in"></div>
<label for="postal-code-input">Postal Code</label>
<input id="postal-code-input" class="form-control my-in" type="text" placeholder="ZIP Code">
<button class="btn btn-primary" id="pay-button">Pay Now</button>

---

JavaScript:

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

// Create individual Elements for card number, expiry, and CVC
const cardNumber = elements.create("cardNumber", {
  style: {
    base: {
      color: "white",
      "::placeholder": { color: "white" }
    }
  }
});
cardNumber.mount("#card-number-element");

const cardExpiry = elements.create("cardExpiry", {
  style: {
    base: {
      color: "white",
      "::placeholder": { color: "white" }
    }
  }
});
cardExpiry.mount("#card-expiry-element");

const cardCvc = elements.create("cardCvc", {
  style: {
    base: {
      color: "white",
      "::placeholder": { color: "white" }
    }
  }
});
cardCvc.mount("#card-cvc-element");

// Now the postal code input is a standalone element that is visible by default.
document.getElementById('pay-button').addEventListener('click', async () => {
  // Retrieve postal code value from your separate input
  const postalCode = document.getElementById('postal-code-input').value;

  // Then use stripe.createPaymentMethod, adding the postal code manually:
  const {error, paymentMethod} = await stripe.createPaymentMethod({
    type: 'card',
    card: cardNumber, // cardNumber element only. Alternatively, combine card elements if needed.
    billing_details: {
      address: {
        postal_code: postalCode
      }
    }
  });

  if (error) {
    console.error(error);
  } else {
    console.log(paymentMethod);
    // Proceed with payment process...
  }
});

In this setup, the postal code field (which is a plain HTML input) is always visible, giving you the control you need over the display.

Keep in mind that if you prefer the simplicity of the integrated Card Element, the behavior of showing the postal code field on card number input is by design, and there isn’t a configuration option to change that timing.