KuVana

[thin junco]

Hmm I'm not sure I understand what you're expecting vs what you're seeing here.

Can you explain a bit more or show me an example?

[empty folio]

The <AddressElement/> here is not displaying the auto complete dropdowns like it does in the docs.

I wonder if it's not autocompleting because my <PaymentElement /> is not visible on the page when the <AddressElement /> is, even though they are in the same <Elements /> group. In this picture, the <PaymentElement /> is in the collapsed "Credit Card" section while the <AddressElement /> is visible in the "Billing Information" section

[thin junco]

That's possible, I'm not sure if there's a link there. Do you get any errors in your dev console?

[empty folio]

No errors, and the maps.googleapis.com endpoint is returning a 200 when the AddressElement is rendered (upon expanding Billing Information)

curl 'https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true' \
  -H 'authority: maps.googleapis.com' \
  -H 'accept: */*' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'origin: https://b.stripecdn.com' \
  -H 'referer: https://b.stripecdn.com/' \
  -H 'x-client-data: CIy2yQEIorbJAQjBtskBCKmdygEI6e3KAQiUocsBCOOXzQE=' \

Response 200

{}

Ah, I answered my own question, but forcing the PaymentElement to persist on the page. They do have to both be visible, which is unfortunate

[empty folio]

Is this something that can be looked at? The docs say it just needs to be in the same element group, yet it also has to be visible? Is that intentional?

[midnight bobcat]

Catching up, can look in to this and whether it is intentional. Would you mind linking to the doc you are referring to here?

[empty folio]

https://stripe.com/docs/elements/address-element/collect-addresses?platform=web#autocomplete

[midnight bobcat]

Thank you

I'm having trouble finding info on this and am reaching out to my colleagues. Will let you know what we can find

[empty folio]

Thank you

[midnight bobcat]

Hey apologies for the wait, it looks like we are going to have to put in a feature request for this.

Also just to confirm, to get these to work together did you move the elements to the top of the Elements group or did you have the same code and just have both tabs of the accordion open?

[midnight bobcat]

Hey, it was pointed out that I forgot to pass on useful info from that section of the doc. You can enable Autocomplete without the payment element also being present if you set autocomplete: { mode: 'google_maps_api' } when creating the address element if you provide your own google maps API key.

To enable autocomplete in the Address Element for all other scenarios, you can use the autocomplete option with mode set to google_maps_api. Set the apiKey to be your own Google Maps API key that’s configured to allow the Places API usage. Your Google Maps API key is only used when the Stripe provided Google Maps API key isn’t available.

[empty folio]

Unfortunately we can't use the google_maps_api as it would add costs we aren't currently approved for.

[midnight bobcat]

Gotcha. Also do you know for sure that that accordion implementation only hides the payment elment rather than unmounting it?