Checkout UI extension - address whisperer

[TomasPesek]

Hi, guys,

I would like to ask if it is possible to use Checkout UI extension to create something similar to the picture.

It is a local address provider that has much better data than Google Places in the CEE region and we would like to use it to make shopping easier for our customers.

I've been exploring the possibilities of new Checkout UI extensions, I'm able to more or less validate the address and tell the user in some reasonable way that the address is or is not valid, but I can't seem to find a nice solution to add something like a whisperer under the address, city and ZIP fields.

Has anyone encountered a similar requirement?

[Liam]

There is a Checkout Validation Function API - would this work for you?

[TomasPesek]

Hello Liam, thank you very much for your reply.

Well, validation works for me, it's cool, nice and relatively simple. But somehow I can't imagine how I could do the UI whispering like in that picture.

Checkout UI extension has targeting and I don't know how I could, for example, display some element under Address field (I can use the react UI component that shopify checkout UI offers me) in which there would be address suggestions. After it, I know how change address if user choose some address from suggestion, but I don’t have idea how to draw suggestion.

[Pavel_Kukin]

Hi Tomas,

Maybe this address autocomplete checkout extension tutorial will help?
https://shopify.dev/docs/apps/build/checkout/address-autocomplete?extension=javascript

[TomasPesek]

Hello Pavel,

I see 404 on your link 😞