Choose a version:

Customer API

The Customer API provides read-only access to customer data. Use this API to get customer information and build personalized experiences based on the selected customer context. The API offers the customer identifier for linking to customer data and enabling customer-specific features.

Use cases

Customer access: Access the customer identifier to implement customer-specific functionality.
Customer extensions: Build extensions displaying customer information or loyalty program details.
Contextual UI: Create contextual interfaces adapting based on current customer context.
External integrations: Link customer data with external CRM (Customer Relationship Management) platforms or third-party integrations.

Support

Targets (3)

Supported targets

Anchor to customerapiCustomerApi

The CustomerApi object provides access to customer data. Access this property through api.customer to interact with the current customer context.

Anchor to id id number required: The unique identifier for the customer. Use for customer lookups, applying customer-specific pricing, enabling personalized features, and integrating with external systems.

Examples

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 (

<Text>{`Customer ID: ${api.customer.id}`}</Text>

</ScrollView>

</Screen>

</Navigator>

);

};

export default reactExtension('pos.customer-details.action.render', () => (

));

Examples

Get the current customer ID

Description

Retrieve the unique identifier of the customer currently associated with the extension's context. This example shows how to access the customer ID from customer details screens, enabling you to fetch additional customer data, track customer-specific actions, or link to external systems.

React

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);
});

Anchor to best-practicesBest practices

Implement customer-specific features: Use the customer context to enable personalized functionality like customer-specific pricing, loyalty program integration, or customized product recommendations.
Validate customer access: Verify that the customer ID is valid before performing customer-specific operations or external API calls.

Anchor to limitationsLimitations

The API provides only the customer identifier—use Shopify APIs or external systems to fetch additional customer details like name, email, or purchase history.
Customer data reflects the current POS session and may not include real-time updates from other channels until the session is refreshed.

Was this page helpful?