Implementation of Checkout UI Extension with Map Pickup Point Selection using Iframe

[patkub]

I'm currently working on a project where I need to implement a checkout UI extension that allows customers to choose a pickup point from a map. Unfortunately, it seems that there is no direct way to integrate a map using standard checkout UI components, and I'm also unable to implement custom components such as <div> or utilize external libraries and components.

During my search, I came across a forum thread where a Shopify staff member Moira mentioned the possibility of including an iframe within the checkout page. This got me curious, as it might provide a potential solution for my problem. However, I haven't been able to find any documentation or information regarding the implementation of iframes in the checkout process.

Therefore, I would greatly appreciate your insights and guidance on the following questions:

1. Is it indeed possible to include an Iframe within the Shopify checkout page?
2. If so, is there any documentation or resources that explain how to achieve this? I haven't been able to find any relevant information so far.
3. Assuming the use of an iframe is allowed, how would the API integration between Shopify and the iframe work? Specifically, I'm interested in automatically populating the shipping information section based on the selected pickup point from the map.

I understand that there are limitations and restrictions when it comes to modifying the Shopify checkout process, but any help or suggestions you can provide would be valuable to me.

Thank you all in advance for your time and expertise. I'm looking forward to hearing your insights and recommendations.

[michsko544]

I saw some stores have added iframe to checkout and I'm also wondering how to achieve this. @Shopify any hint?

[Donfetto]

Hi,

looking for pretty much the same.

Working on a checkout ui extension where I would like to implement a map.

What would be the best approach to this?

Thanks for any hints.

[wing-team]

Same question here, how can you add iframe?

it seems we can only use pre built components with checkout extension (https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components)

[dk4software]

I am also facing the same issue. Previously the implementation was by including js file in the checkout.liquid file. Now I hear that it is going to be deprecated! Checkout UI Extensions full of restrictions. And this is going to be an absolute nightmare.

[PatrickJakubik]

Hey folks, I had the same pain and ended up creating an app for that: Atlas Pickup Points

It does support multiple carriers and offers list and map selection widgets inside the new checkout.

I spent plenty of time researching the best UX and optimizing for speed, so feel free to give it a try, and if you'd like to chat or have some custom needs just send me an email at: patrick@talecommerce.com

[sarahmmybigblue]

Do you have a preview shop or examples of clients for which we could try your app? I tried on our test store but it didn't seem to work on Shopify developer previews

[PatrickJakubik]

Hi Sarah,

I added a demo store to the App Store Listing. You can visit it by clicking View demo store below the Install button. Feel free to reach out if you have any questions 🙂

 

[CharlyTalavera]

Hi! Some updates related to this. A few months ago we were trying to accomplish something similar, and this week I recheck and looks like there is a new Map component available. 

Looks like it only works with Google Maps platforms, but looks like a good approach at least.

https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/map