Mike Taylor - React Card Elements | Stripe Developers | Page 1

robust orbit Feb 25, 2022, 5:54 PM

#

I think this is related to when/how React re-renders the component which wipes out the data in the component.

umbral abyss Feb 25, 2022, 6:08 PM

#

agreed. we haven't seen any examples of extracting the postal code from the stripe response object, and using it within the component. we are looking for any example code.

robust orbit Feb 25, 2022, 6:11 PM

#

Can you share the code you are using to create the component and update React state?

shadow cave Feb 25, 2022, 6:15 PM

#

There may be some confusion - as I understand and use the elements, the values in them are not accessible to the client - they are intended as secure entries directly for Stripe, to maintain PCI compliance. You could create your own form field to gather that data and supply it to Stripe - but I'm not sure of compliance issues related specifically to postal codes.

umbral abyss Feb 25, 2022, 6:24 PM

#

📎 message.txt

umbral abyss Feb 25, 2022, 6:37 PM

#

robust orbit Can you share the code you are using to create the component and update React st...

code supplied above.

violet fractal Feb 25, 2022, 6:42 PM

#

Hello! To clarify, you're trying to extract the zip code from the Card Element before you create a Payment Method or confirm an intent with it?

umbral abyss Feb 25, 2022, 6:52 PM

#

We use the form's onSubmit to create a Stripe payment method. Yes. We are looking to get the ZIP before that - to compute, display, and pass to Stripe our local sales tax transaction. So we listen to event changes in the onChange for the CardElement.

violet fractal Feb 25, 2022, 6:58 PM

#

You can't get the zip code out of the Card Element before that. You can only get it from the Payment Method created from the Card Element.

#

If you want to do what you're describing you should disable zip code collection in the Card Element and use your own, non-Stirpe field for collecting the zip code that you can monitor.

#

Here's the API to hide the postal code field in the Card Element: https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-hidePostalCode

umbral abyss Feb 25, 2022, 7:03 PM

#

We tried that approach. The state update from the non stripe fields triggers a wipe of the Stripe card element we think due to the stripe card element listening for state changes? Is there a way to avoid this, sounds like a typical use case for tax collection and computation?

violet fractal Feb 25, 2022, 7:06 PM

#

I'm not sure why that would happen, but I'm not a React developer. In a non-React web integration the Card Element with postal code disabled and an HTML input element to collect the zip code have no direct connection to each other and don't interact at all, so nothing like what you're describing happens.

shadow cave Feb 25, 2022, 7:08 PM

#

You may need to use useMemo or useCallback hooks to avoid the global status change. Another approach would be to move the ZIP/Postal code field up to the Parent, as well as the Submit code, so the Element state is isolated in it's own wrapping component.

umbral abyss Feb 25, 2022, 8:03 PM

#

@shadow cave @violet fractal thanks. Will try those approaches out. Hopefully will do the trick.

#Mike Taylor - React Card Elements