--- title: Product API description: | The Product API provides an extension with data about the current Product. #### Supporting targets - [pos.product-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render) - [pos.product-details.action.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-render) api_version: 2025-04 api_name: pos-ui-extensions source_url: html: https://shopify.dev/docs/api/pos-ui-extensions/2025-04/apis/product-api md: https://shopify.dev/docs/api/pos-ui-extensions/2025-04/apis/product-api.md --- # Product APIAPIs The Product API provides an extension with data about the current Product. #### Supporting targets * [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render) * [pos.product-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-render) ## ProductApi * id number required The unique identifier for the product. ## Examples Examples of using the Product API. Retrieve the ID of the product. ### Examples * #### Retrieve the ID of the product. ##### React ```tsx import React from 'react'; import { Text, Screen, ScrollView, Navigator, reactExtension, useApi, } from '@shopify/ui-extensions-react/point-of-sale'; const Modal = () => { const api = useApi<'pos.product-details.action.render'>(); return ( {`Product ID: ${api.product.id}`} ); }; export default reactExtension('pos.product-details.action.render', () => ( )); ``` ##### TS ```ts import { Navigator, Screen, ScrollView, Text, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.product-details.action.render', (root, api) => { const navigator = root.createComponent(Navigator); const screen = root.createComponent(Screen, { name: 'ProductApi', title: 'Product Api', }); const scrollView = root.createComponent(ScrollView); const text = root.createComponent(Text); text.append(`Product ID: ${api.product.id}`); scrollView.append(text); screen.append(scrollView); navigator.append(screen); root.append(navigator); }); ``` ## Related [![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/pos-ui-extensions/targets/pos-product-details-action-menu-item-render) [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/pos-product-details-action-menu-item-render) [![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/pos-ui-extensions/targets/pos-product-details-action-render) [pos.product-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/pos-product-details-action-render)