CODEWITHSUNDEEP
javascriptreactjsstripe-payments
Noah Wardlow
Noah Wardlow

Reputation: 55

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

Upvotes: 1

Views: 2580

Answers (2)

Nolan H
Nolan H

Reputation: 7419

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/

Upvotes: 1

flaxon
flaxon

Reputation: 942

It's hidden initially and it shows up after typing the card number.

Try with this card 4242 4242 4242 4242 on their sandbox https://codesandbox.io/s/react-stripe-js-card-detailed-omfb3?file=/src/App.js

enter image description here

Upvotes: 0

Related Questions