#RobHus-PaymentElements

1 messages · Page 1 of 1 (latest)

radiant dome
#

Unfortunately yes, if you want to collect it regardless of PaymentElement

polar mural
#

So should I be able to turn off postal code in Payment Element, so as not to be weird with location of postal code in form? Have control where postal code lives

radiant dome
#

I believe PaymentElements only collect postal code in a few certain countries, finding ....

polar mural
#

Using Card Elements might work best for me at the moment. I think I can just explicitly call out card number, exp, and cvc. Then have my own Billing address components.

I mainly wanted to use PaymentElements since that's what the docs recommend, and to prepare for things like apple pay

radiant dome
#

Yes Card Elements does provide you the option to control zip collection. In the other hand PaymentElement will collect on it owns and doesn't expose the option, and as you said, support many more PaymentMethods

#

I believe there is only 3 countries PaymentElement will attempt to collect zip, and trying to find it

polar mural
#

I think US is one of them since that's where I am and I'm seeing it

radiant dome
#

with that, you can continue to use PaymentElement and somehow align your own code to what it does

#

I think UK would also (not certain and confirming)

#

I have found that you can disable collecting here

#

but later on in confirming, make sure you supply the postal code you have collected yourself

polar mural
#

Do you have any examples of doing this in React? I tried to use this documentation to edit PaymentElements to collect the billing address already, with no luck so far. Kept erroring out in console. The code in the doc is only like a single line, I was hoping to see the context around it

radiant dome
#

No specific Doc for React unfortunately, but my colleague will be here soon and he can help with React!

polar mural
#

Nice. Y'all are always so quick and helpful!

lone tangle
#

Hi @polar mural I'll take over this thread, let me know if you have any questions

polar mural
#

I was attempting to use the documentation linked directly above to add billing address fields into PaymentElements when saving payment methods with SetupIntents. It sounds like I can't force billing address in PaymentElements, so I was hoping to at least turn off postal code so that I could collect the billing address in my own components below the stripe hosted ones. Then pass the billing details in confirmSetup.

I was having some trouble implementing it without the code erroring out in the console. Would it be helpful to pass some screenshots of my best shot at implementing it so you can give me some recommendations?

lone tangle
#

So you want to hide postCode from the payment element and provide it when confirming the setup?

polar mural
#

Yes. I want to save a billing address when saving payment methods. So that I can pass the address to Orders for tax purposes later.

#

Let me know if it's not recommended or I should be thinking about it differently

lone tangle
#

Got it. So basically you have built your own address fields so that you can collect the full address from customer

# 
<PaymentElement
        id="payment-element"
        options={{
          fields: {
            billingDetails: {
              address: {
                postalCode: 'never',
              },
            },
          },
        }}
      />
polar mural
#

ah nice

lone tangle
#

So this is how you hide the postalCode field

# 
 confirmParams: {
          // Make sure to change this to your payment completion page
          return_url: 'http://localhost:3000/paymentElement',
          payment_method_data: {
            billing_details: {
              address: {
                postalCode: '12345',
              },
            },
          },
        },
#

and this is how you pass in the postalCode field in the confirmParams

#

Since you have already collected the full address, you can also consider to set address to never, and pass in the whole the address details that you collected to confirmParams

polar mural
#

Exactly what I want to do. Just couldn't figure out the first part. Thx. I'll let you know if I need additional help

lone tangle
#

you're welcome! Feel free to drop by if you have questions/