No postal code object in react Stripe elements

I’m trying to create a custom Stripe form. You can either bring in the whole card element or individual elements from Stripe elements. For styling purposes I am trying to bring in individual inputs so I can put them in a grid instead of the one line Stripe form.

There is card number, cvc, and expire date element but no postal code. Why is this present in the default card and not available as an individual element? Won’t I need to submit a zip code for creating a payment? Any help would be greatly appreciated.

Here’s the docs I’m referring to: https://stripe.com/docs/stripe-js/react

Answer

The postal/zip code is not strictly required, and is out of scope for PCI compliance. The combined card input includes it for convenience (you can disable it), but in your own custom “split” form, you would need to bring your own input for postal/zip code and provide the value in the billing_details:

stripe.createPaymentMethod({
  type: 'card',
  card: cardNumberElement,
  billing_details: {
    name: 'First Last',
    address: { postal_code: '90210' }
  },
})

Like this example: https://jsfiddle.net/cdt43qL1/