Using 3rd party maps ini checkout page extension

Shopify Apps
1

Hi shopify,

I wanna ask about the checkout page extension.
In my current development, we can use the map from “@shopify/ui-extensions-react/checkout”, but our team need to use other 3rd party map for more feature

But when I try to use other map, it got error “Uncaught Error: Unsupported component: div”, even tho when I use the 3rd party map in our extension (not checkout page), the 3rd party map run smoothly

I just want to clarify, can I use 3rd party maps on Checkout Page extension ?

Thanks

2

What You Can Use on the Checkout Page

When developing checkout extensions using @shopify/ui-extensions-react/checkout, you’re working inside a restricted sandboxed environmentfor security and performance reasons. This sandbox:

Does not support regular DOM APIs (like div, iframe, window, etc.)
Only allows the components and APIs exposed by Shopify’s UI Extensions SDK
Does not support arbitrary third-party libraries or rendering systems** (including maps like Google Maps, Leaflet, Mapbox, etc.)

Why Your Map Doesn’t Work

Your third-party map library likely tries to render custom HTML elements (div, canvas, etc.), but Shopify’s checkout extensions do not allow any unsupported native HTML elements.

Hence the error:

Uncaught Error: Unsupported component: div

This happens because the map is trying to mount to a

, which isn’t allowed in Shopify checkout extensions.

What You Can Do

If your goal is to allow users to select a location/address on a map during checkout, you currently can’t embed a third-party map directly in the checkout UI.

However, some workarounds or alternatives:

  1. Redirect users before checkout: Let users select a location before reaching the checkout (e.g., on the cart page or a custom app page), then store their choice in cart attributes or a customer metafield.
  2. Use Checkout UI Components: Rebuild a simplified version of the map interaction using approved components (like TextField, BlockStack, etc.) — this is limited but safe.
  3. Wait for Shopify’s APIs to expand: Shopify might open more capabilities in the future, but as of now (July 2025), you’re limited to the SDK’s supported components.

TL;DR

No, you cannot use 3rd-party map libraries in Checkout UI Extensions.
You can use only the components from @shopify/ui-extensions-react/checkout.
You can gather location data earlier in the flow or through custom data fields.