Access order metafields from Customer Account UI extension

Extensions
1

I have an Order metafield created from Shopify Admin UI named ‘custom.estimated_ship_date’. I’ve ensured that the ‘Customer accounts access’ was set to Read in the admin UI.

I want to show the value of this metafield in the Order Status page. To do so, I created a new UI extension with these details:

  • shopify.extension.toml
...
[[extensions.targeting]]
module = "./src/OrderStatusBlock.js"
target = "customer-account.order-status.unfulfilled-items.render-after"

[extensions.capabilities]
api_access = true
# network_access = true

[[extensions.metafields]]
namespace = "order.metafields.custom"
key = "estimated_ship_date"
  • src/OrderStatusBlock.js
import { extension, Banner, BlockStack, TextBlock } from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.order-status.unfulfilled-items.render-after', (root, api) => {
  const { i18n, order } = api;

  console.log("API metafield", api.metafields.current);
  console.log("API appMetafields", api.appMetafields.current);

  const banner = root.createComponent(
    Banner,
    {}
  );

  const block = root.createComponent(
    BlockStack,
    {inlineAlignment: "center"}
  );

  const text = root.createComponent(
    TextBlock,
    {},
    "testing"
  );

  block.append(text);
  banner.append(block);
  root.append(banner);
});

I can see the “testing” componenet being rendered, but both the api.metafields and api.appMetafields are empty arrays. How can I access the order metafield from the UI extension code?

I expect the order metafield to be easily accessible, considering the code is serving Order status page. Did I miss something in my code setup?