---
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/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/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)