Accessing config settings made on checkout extension admin page in checkout extension code

[Turbofan1178]

I am building a checkout extension and I would like to access the config settings made on the Shopify admin side for the extension in the extension code.

So basically, if I have a multi-select dropdown and some input fields to configure the extension on the admin side, what api do I use to access to the values that were selected in the checkout ui extension code.

I'm not exactly sure how to achieve that, can I please get some help. A link to an area of the docs where something similar is done would be helpful.

Thanks.

[Harsh4]

Hi @Turbofan1178 ,

You may want to consider using a configuration file or environment file to deploy your extension with your app's URL.
The Shopify deploy command has a '--config' flag that allows you to specify a configuration name.
After which you should be able to retrieve the value of the .env variable within your Checkout UI Extension using something like the following:
process.env.{env_variable_name}

[Turbofan1178]

Thanks for your response.

But using a config file isn't exactly what I was looking for.

What I was referring to was a way to get extension settings configured in theApp Bridge UI.

See screenshot.

[SBD_ · Accepted solution]

Hey @Turbofan1178 

I believe they're stored in metafields. This tutorial should run you through the process / provide sample code.

[Turbofan1178]

Thank you, I'll try that and see if it works for my use case.

Another question, do you know if there is a doc/tutorial for building UI with conditions like the screenshot in my last comment?

[SBD_]

Hey @Turbofan1178 

Try this one: https://shopify.dev/docs/apps/checkout/payment-customizations/ui

[Turbofan1178]

Okay, but after some trial and error, I struggled to make it work for checkout ui extensions custom fields. I believe the only way to configure the custom fields is through the checkout editor.

In that case, I would like to include a link in the app bridge ui that when clicked, takes the user to the checkout editor for my extension.

How can I do that?