Shop metafields in Checkout Validation API

[khamd002]

I’m creating a checkout validation extension. Am I able to access shop metafields? The use case for shop metafields is I need to access the value of the metafield from both the storefront via Liquid and the extension. It doesn’t make sense to put the metafield on any other resource that has a metafield field in the input query.

[lizk]

Yes you are able to access Shop metafields!

In your shopify.extension.toml file you will specify the name-space and key of the metafield you want to read in your Checkout UI extension.

# Loads metafields on checkout resources, including the cart,
# products, customers, and more. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields

[[extensions.metafields]]
 namespace = "my_namespace"
 key = "my_key"

And in your extension you read the AppMetafields, or the useAppMetafields react hook.

If you are using React your extension code could look like this. 

import {
  Banner,
  reactExtension,
  useAppMetafields,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const metafields = useAppMetafields();
  const metafieldList = metafields.map(metafield =>
    <Text> key:{metafield.metafield.key} value: {metafield.metafield.value}</Text>
    );

  return (
    <Banner title="checkout-ui">
      {metafieldList}
    </Banner>
  );
}