# Customer API The customer API provides an extension with data about the current customer. #### Supporting targets - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render) - [pos.customer-details.action.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-render) - [pos.customer-details.block.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render) ## CustomerApi ### CustomerApiContent ### id The unique identifier for the customer ## Related - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/pos-customer-details-action-menu-item-render) - [pos.customer-details.action.render](/docs/api/pos-ui-extensions/targets/pos-customer-details-action-render) ## Examples The customer API provides an extension with data about the current customer. #### Supporting targets - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render) - [pos.customer-details.action.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-render) - [pos.customer-details.block.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render) ### ### Retrieve the ID of the customer. ```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.customer-details.action.render'>(); return ( <Navigator> <Screen name="CustomerApi" title="Customer Api"> <ScrollView> <Text>{`Customer ID: ${api.customer.id}`}</Text> </ScrollView> </Screen> </Navigator> ); }; export default reactExtension('pos.customer-details.action.render', () => ( <Modal /> )); ``` ```ts import { Navigator, Screen, ScrollView, Text, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.customer-details.action.render', (root, api) => { const navigator = root.createComponent(Navigator); const screen = root.createComponent(Screen, { name: 'CustomerApi', title: 'Customer Api', }); const scrollView = root.createComponent(ScrollView); const text = root.createComponent(Text); text.append(`Customer ID: ${api.customer.id}`); scrollView.append(text); screen.append(scrollView); navigator.append(screen); root.append(navigator); }); ```