Rendering HTML tags inside Checkout UI Extensions

[mashkovtsevlx]

Please list the package(s) involved in the issue, and include the version you are using

checkout-ui-extensions-react 0.24.0

Describe the issue

We need a way to render an iframe inside the checkout UI extension. Can we do it inside of react component, or alternatively, by rendering the static HTML content instead of using React?

[cdarland]

Hey @mashkovtsevlx! Thanks for reaching out. We're not currently exploring exposing an iframe component on our public ui-extensions package at the moment, but we're curious to hear some additional context into your use case to see if we can help point you in the right direction with other UX patterns or implementation strategies.

[cdarland]

@mashkovtsevlx were you able to find workarounds for the issues you were experiencing or is this still a blocker for you and your team? We're curious to hear what use cases you have to see if there are any discreet components we should add to our backlog or if there are UX patterns we can recommend to resolve any blockers.

[anhdd-kuro]

@cdarland I want to show my Google Form inside checkout page through iFrame , can I some way archive that or it's just possible for now ?

[gil--]

@anhdd-kuro Not possible to load Google Form iframe inside checkout. Why not use embedded custom fields and save to order note or order metafields? https://shopify.dev/docs/apps/checkout/custom/fields You can use Shopify Flow to send the data to external system if needed.

[StepanMynarik]

@cdarland

Our use case is checkout UI extension that enables the user to open an IFrame with Czech delivery service map widget for pickup point selection.

We have multiple delivery service providers, each one having his own specific IFrame based map widget.

I know about the early access Shopify Pickup Point integration, but it's only for specific services in France. I doubt you will get to implement all our delivery service providers. Even if you do, we want to use the specific service widgets since these are always very well polished by the providers.

[mashkovtsevlx]

@mashkovtsevlx were you able to find workarounds for the issues you were experiencing or is this still a blocker for you and your team? We're curious to hear what use cases you have to see if there are any discreet components we should add to our backlog or if there are UX patterns we can recommend to resolve any blockers.

@cdarland we're looking to integrate the invoicing form by our payments partner (Novalnet). Right now, we use their iframe in our checkout (checkout.liquid).

It will be impossible to ask them to provide an alternative, so we need to integrate the iframe.

[patryk-smc]

Hey @StepanMynarik

If you are open to that, we just launched Atlas Pickup Points - an app for showing pickup points in checkout. In Czechia, we support Zásilkovna/Packeta, DPD, and DHL. If you need another carrier or have specific UI needs I'd love to chat.

[StepanMynarik]

Hey @StepanMynarik

If you are open to that, we just launched Atlas Pickup Points - an app for showing pickup points in checkout. In Czechia, we support Zásilkovna/Packeta, DPD, and DHL. If you need another carrier or have specific UI needs I'd love to chat.

Sounds cool. Did you really manage to make it fully compatible with the new extensibility api though?

[patryk-smc]

Hey @StepanMynarik If you are open to that, we just launched Atlas Pickup Points - an app for showing pickup points in checkout. In Czechia, we support Zásilkovna/Packeta, DPD, and DHL. If you need another carrier or have specific UI needs I'd love to chat.

Sounds cool. Did you really manage to make it fully compatible with the new extensibility api though?

Yes, it's 100% checkout extensibility without hacks, we provide our own widget instead of relying on carrier-provided ones.

[StepanMynarik]

Hey @StepanMynarik If you are open to that, we just launched Atlas Pickup Points - an app for showing pickup points in checkout. In Czechia, we support Zásilkovna/Packeta, DPD, and DHL. If you need another carrier or have specific UI needs I'd love to chat.

Sounds cool. Did you really manage to make it fully compatible with the new extensibility api though?

Yes, it's 100% checkout extensibility without hacks, we provide our own widget instead of relying on carrier-provided ones.

How do you open the map? In a new tab? Or a modal on the checkout page itself?

[patryk-smc]

@StepanMynarik It's a modal, but the map seems to be working in dev stores only so far, so you can only use the list with search today.