App namespace metafield in checkout ui extension

[SuperStas]

Hi!

Didnt find an aswer to this problem in exisitng threads, probably someone can help me with it.

I have a checkout ui extension where I wanted to access the app owned customer metafield (create from app with namespace: $app:testapp and name: testmeta and it is under customer objects). I was trying to put this inside cunfiguration:

 [[extensions.metafields]]
 namespace = "$app:testapp"
 key = "testmeta"

Then tried to access it:

const metafields = useAppMetafields();

And in the hook, I logged it:

   useEffect(() => {
    console.log(metafields);
  }, [metafields]);

This gives empty array. The customer is logged into the account so this is definitely not the reason. Also this way works fine if the metafield is standard (not the app owned)

Thank you!

[captainkoder]

Did you solve this yet, I am currently getting empty array as well

[kurveej]

Facing same issue, Metafield showing on api.appMetafields on console but when I try to get, it’s blank ()

did you find the way how to resolve it? Please guide me on how to resolve this issue.

[SuperStas]

Unfortunately no, I endup using simple settings to make setup for the Checkout UI extension, which is rather weak solution, but still interested of course

[Iliasshad]

[[extensions.metafields]]
namespace = “$app:configuration”
key = “products”
type = “json_string”

and in the checkout UI extension

const {appMetafields} = useApi();

appMetafields.subscribe((metafields) => {
console.log(‘metafields’, metafields);
});

Credit: https://github.com/Shopify/ui-extensions/issues/1621#issuecomment-1879319059

[ag05]

Hi @Iliasshad

Hi everyone,

I’m running into an issue with my Shopify app’s Checkout UI Extension. I’ve successfully implemented and saved app-owned metafields. When I test the metafields in Liquid code, they render correctly and return the expected values.

However, when I try to access the same metafields using app.metafields in my Checkout UI Extension, the app object is null.

I’ve already confirmed:

• The metafields are properly set and visible in Liquid.

• The extension has the correct metafields access scopes defined in shopify.extension.toml.

• The metafield namespace and key match exactly.

Has anyone faced a similar issue? Is there anything specific I need to do to make app.metafields accessible inside a Checkout UI Extension?

Any help or guidance would be really appreciated!

Thanks in advance!

[Iliasshad]

const { appMetafields, lines } = useApi();
useMemo(() => {
return appMetafields.subscribe((metafields) => {
console.log(metafields);
});
}, [appMetafields]);

did you try this code ?

[ag05]

@Iliasshad Thanks a lot for all the support and guidance so far — I really appreciate the help from this awesome community!

I’m almost there, but I’m still running into an issue where the result is coming back as null. I’m double-checking my query and data sources, but not seeing anything obvious yet.

Code main.jsx

const { appMetafields, lines } = useApi()
    useMemo(() => {
        return appMetafields.subscribe((metafields) => {
            console.log('metafields', metafields)
        })
    }, [appMetafields])

result

If anyone has ideas on what could be causing the null response, I’d love a nudge in the right direction!