Get App Metafield in CheckoutUI Extension

I am storing app metafield data using CreateAppDataMetafield mutation in app/routes/app._index.jsx file. I can fetch this data using AppInstallationMetafield query in the same file.
Now, I would like to access this metafield inside my CheckoutUI extension (JSX file). I tried using useAppMetafields() and useMetafields() hooks in my checkout.jsx extension file but the response is empty array.

I followed this guide Use app-data metafields and used the app installation ID as ownerId.

It says “You can access app-data metafields using the metafields property on the app object in Liquid.” but how can I access it in a .jsx extension file?

Hi, I faced this issue previously, and the short answer is that you can’t use app metafields from a checkout UI extension, see the tip here.

“useAppMetafields” just refers to the metafields that you specified in the extension.toml config file, whereas I think “useMetafields” is used to get metafields attached to the current checkout instance.