string | The numeric owner ID that is associated with the metafield. |
| type? | "customer" | "product" | "shop" | "variant" | The type of the metafield owner. |
| namespace? | string | Container for a set of metafields. You need to define a custom namespace for your metafields to distinguish them from the metafields used by other apps. This value must be between 2 and 20 characters. |
| key? | string | The name of the metafield. This value must be between 3 and 30 characters. |
### MetaFieldFilter
| Name | Type | Description |
| ---------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| namespace? | string | A container for a set of metafields. You need to define a custom namespace for your metafields to distinguish them from the metafields used by other apps. This value must be between 2 and 20 characters. |
| key? | string | The name of the metafield. This value must be between 3 and 30 characters. |
---
### React Hooks
Shopify provides a collection of [React hooks](https://reactjs.org/docs/hooks-intro.html), which make it easy to update your UI when the checkout state changes.
```jsx
import React from 'react';
import {
render,
Text,
useShippingAddress,
} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => (change: AttributeUpdateChange) => Promise<AttributeChangeResultSuccess | AttributeChangeResultError> | Returns a function to mutate the `attributes` property of the checkout. |
| useApplyCartLinesChange | (change: CartLineAddChange | CartLineRemoveChange | CartLineUpdateChange) => Promise<CartLineChangeResultSuccess | CartLineChangeResultError> | Returns a function to mutate the `lines` property of the checkout. |
| useApplyMetafieldsChange | (change: MetafieldRemoveChange | MetafieldUpdateChange) => Promise<MetafieldChangeResultSuccess | MetafieldChangeResultError> | Returns a function to mutate the `metafields` property of the checkout. |
| useApplyNoteChange | (change: NoteRemoveChange | NoteUpdateChange) => Promise<NoteChangeResultSuccess | NoteChangeResultError> | Returns a function to mutate the `note` property of the checkout. |
| useAppMetafields {% include /apps/checkout/privacy-icon.md %} | (filters?: AppMetafieldFilters) => AppMetaFieldEntry[] | Returns the metafields configured with `shopify.ui.extension.toml`. |
| useAttributes | () => Attribute[] | undefined | Returns the proposed `attributes` applied to the checkout. |
| useBuyerJourney | () => Promise<() => void> | Returns the `buyerJourney` details on buyer progression in checkout. |
| useBuyerJourneyIntercept | (interceptor: Interceptor) => void | A function for intercepting and preventing progression on checkout. You can block progress by returning an object with `{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState}`. () => ExtensionSettings | Returns the settings defined by the merchant for the extension. |
| useCurrency | () => string | Returns the currency of the checkout, and automatically re-renders your component if the currency changes. |
| useCustomer {% include /apps/checkout/privacy-icon.md %} | () => Customer | undefined | Returns the account belonging to the customer.() => string | undefined | Returns the email of the buyer, and automatically re-renders your component if the email changes.() => StandardApi | Returns the full API object that was passed in to your extension when it was created. |
| useExtensionCapabilities | () => Capability[] | Returns a list of an extension's granted capabilities. |
| useExtensionCapabilitiy | (capability: Capability) => boolean | Returns whether or not a given capability of an extension is granted. |
| useExtensionData | () => Extension | Returns the metadata about the extension. |
| useExtensionLanguage | () => string | Returns the buyer's language, as supported by the extension. |
| useCartLines | () => CartLine[] | Returns the current cart lines for the checkout, and automatically re-renders your component if cart lines are added, removed, or updated. |
| useLanguage | () => string | Returns the current language of the checkout, and automatically re-renders your component if the language changes. |
| useMetafield | (filters: MetaFieldFilter) => MetaField | undefined | Returns a single filtered `Metafield` or `undefined`. |
| useMetafields | (filters?: MetaFieldFilter) => MetaField[] | Returns the current array of `metafields` applied to the checkout. You can optionally filter the list. |
| useNote | () => string | undefined | Returns the proposed `note` applied to the checkout. |
| usePhone {% include /apps/checkout/privacy-icon.md %} | () => string | undefined | Returns the phone number of the buyer, and automatically re-renders your component if the phone number changes.() => Money | undefined | Returns a `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step may not have delivery costs calculated. |
| useShippingAddress {% include /apps/checkout/privacy-icon.md %} | () => MailingAddress | undefined | Returns the proposed `shippingAddress` applied to the checkout. `ScopeNotGrantedError` is raised when access to [protected customer data](/apps/store/data-protection/protected-customer-data) hasn't been granted. |
| useShop | () => Shop | Returns the `Shop` where the checkout is taking place. |
| useStorage | () => Storage | Returns the key-value `Storage` interface for the extension point. |
| useTarget | () => PresentmentCartLine | Returns the presentment cart line that the extension is attached to. Applicable only to the `Checkout::CartLineDetails::RenderAfter` extension point. |
| useTimezone | () => string | Returns the timezone of the checkout, and automatically re-renders your component if the timezone changes. |
| useTranslate | () => I18nTranslate | Returns the `I18nTranslate` interface used to translate strings. |
| useDiscountCodes | () => CartDiscountCode[] | Returns the current discount codes applied to the cart, and automatically re-renders your component if discount codes are added or removed. |
| useDiscountAllocations | () => CartDiscountAllocation[] | Returns the current discount allocations applied to the cart, and automatically re-renders your component if discount allocations changed. |
| useApplyDiscountCodeChange | (change: DiscountCodeChange) => Promise<DiscountCodeChangeResult> | Returns a function to add or remove discount codes. |
| useAppliedGiftCards | () => AppliedGiftCard[] | Returns the current gift cards applied to the cart, and automatically re-renders your component if gift cards are added or removed. |
| useApplyGiftCardChange | (change: GiftCardChange) => Promise<GiftCardChangeResult> | Returns a function to add or remove gift cards. |
| useSessionToken | () => SessionToken | Returns a 'sessionToken' object, which contains a get() method that can be used to obtain a checkout extension session token. |