Hello,
Currently I’m developing a Checkout UI Extension that makes an call to our own API to fetch some data. Right now we have to hardcode our API’s host URL, so we need to change it manually every time we want to test it for the cloudfront generated tunnel.
Is there a way to pass environment variables to the extension so they are applied on deployment? Or is there a way to retrieve the app’s setting (the App URL more precisely) from the checkout component?
Thank you.
Hi Joelurraco, did you manage to find a solution for this? I am looking for the same thing.
Not yet,
I haven’t tested this, but maybe it is possible to add the API host as a setting for the checkout extension. This would allow the same codebase to work in two different environments.
Still I would prefer a way to retrieve the app’s domain without using this setting.
Hi guys! I’m experiencing the same issue.
@joelurraco are you talking about the settings that you can define in the shopify.ui.extension.toml? I tried that but I discarded it since this setting is editable by merchant, so it’s not ideal I would say.
I tried with metafields as well, but looks like the hook doesn’t returns the App Metafields. So it’s not a good place where store an url as well.
Hi Joelurraco, did you manage to find a solution for this? I am looking for the same thing.
No, but I haven’t looked into it since, I’m not sure if Shopify allows it now.
Adding to this discussion, I wish there was a clear ENV variable store for Checkout UI Extensions.
For now you have to expose your API Host URL as a merchant configurable setting. This is very problematic.
ENV variable support for checkout extensions would be very helpful here. Then we can safely update per developer environment settings within the same team. This affects solo app developers too, since they need to develop against a different API than production.
While I wish we have a way to handle env variable, I ended up using the Shop’s Metafield to handle it. I don’t think Settings is a good way to go since we couldn’t even set a default value for it. Here’s a blog post I made for this: https://liquidonate.com/blog/shopify-development-hacks-environment-variable-in-checkout-ui-extension
Hi @theaisyaaziz , we were planning to use a similar approach to workaround this.
We will definitely take a look, the post is very helpful for us. Thanks for sharing! 
This post is helpful however isn’t the metafield still visible by other apps? Do you know how to make it visible to only your app?
try using useShop hook https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useshop