Choose a version:

Order API
APIs

The Order API provides an extension with data about the current order.

Supporting targets

Anchor to orderapiOrderApi

Anchor to id id number required: The unique identifier for the order
Anchor to name name string required: The name of the order
Anchor to customerId customerId number: The unique identifier of the customer associated with the order

OrderApiContent

Interface for Order details

customerId
The unique identifier of the customer associated with the order
```
number
```
id
The unique identifier for the order
```
number
```
name
The name of the order
```
string
```

export interface OrderApiContent {
  /**
   * The unique identifier for the order
   */
  id: number;

  /**
   * The name of the order
   */
  name: string;

  /**
   * The unique identifier of the customer associated with the order
   */
  customerId?: number;
}

Was this section helpful?

Anchor to examplesExamples

Examples of using the Order API

Anchor to example-basic-usage-of-the-order-api-in-an-actionBasic usage of the Order API in an action

Anchor to example-display-order-details-in-a-blockDisplay order details in a block

Was this section helpful?

Basic usage of the Order API in an action

import React from 'react';

import {

reactExtension,

Screen,

Navigator,

ScrollView,

Text,

Section,

useApi,

} from '@shopify/ui-extensions-react/point-of-sale';

const PostPurchaseAction = () => {

const api = useApi<'pos.purchase.post.action.render'>();

const order = api.order;

return (

<Text>Order ID: {order.id}</Text>

<Text>Order Name: {order.name}</Text>

{order.customerId && <Text>Order Customer ID: {order.customerId}</Text>}

</Section>

</ScrollView>

</Screen>

</Navigator>

);

};

export default reactExtension('pos.purchase.post.action.render', () => (

));

examples

Basic usage of the Order API in an action

React

import React from 'react';
import {
  reactExtension,
  Screen,
  Navigator,
  ScrollView,
  Text,
  Section,
  useApi,
} from '@shopify/ui-extensions-react/point-of-sale';

const PostPurchaseAction = () => {
  const api = useApi<'pos.purchase.post.action.render'>();
  const order = api.order;

  return (
    <Navigator>
      <Screen name="PostPurchaseAction" title="Post Purchase Action">
        <ScrollView>
          <Section title="Order Information">
            <Text>Order ID: {order.id}</Text>
            <Text>Order Name: {order.name}</Text>
            {order.customerId && <Text>Order Customer ID: {order.customerId}</Text>}
          </Section>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension('pos.purchase.post.action.render', () => (
  <PostPurchaseAction />
));

TS

import {
  extension,
  Screen,
  ScrollView,
  Text,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.purchase.post.action.render', (root, api) => {
  const order = api.order;

  const screen = root.createComponent(Screen, {
    name: 'PostPurchaseAction',
    title: 'Post Purchase Action',
  });

  const scrollView = root.createComponent(ScrollView, {});

  const orderName = root.createComponent(Text, {}, `Order Name: ${order.name}`);
  const orderId = root.createComponent(Text, {}, `Order ID: ${order.id}`);
  const orderCustomerId = root.createComponent(
    Text,
    {},
    `Order Customer ID: ${order.customerId}`,
  );

  scrollView.append(orderName);
  scrollView.append(orderId);
  scrollView.append(orderCustomerId);

  screen.append(scrollView);

  root.append(screen);

  root.mount();
});

Display order details in a block

React

import React from 'react';
import {
  reactExtension,
  POSBlock,
  POSBlockRow,
  useApi,
  Text,
} from '@shopify/ui-extensions-react/point-of-sale';

const OrderDetailsBlock = () => {
  const api = useApi<'pos.purchase.post.action.render'>();
  const order = api.order;

  return (
    <POSBlock>
      <POSBlockRow>
        <Text>Order Name: {order.name}</Text>
        <Text>Order ID {order.id.toString()}</Text>
        {order.customerId && (
          <Text>Order Customer ID {order.customerId.toString()}</Text>
        )}
      </POSBlockRow>
    </POSBlock>
  );
};

export default reactExtension('pos.purchase.post.block.render', () => (
  <OrderDetailsBlock />
));

TS

import {
  extension,
  Screen,
  Navigator,
  ScrollView,
  Text,
  Section,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.purchase.post.action.render', (root, api) => {
  const order = api.order;

  const screen = root.createComponent(Screen, {
    name: 'PostPurchaseAction',
    title: 'Post Purchase Action',
  });

  const scrollView = root.createComponent(ScrollView, {});

  const orderName = root.createComponent(Text, {}, `Order Name: ${order.name}`);
  const orderId = root.createComponent(Text, {}, `Order ID: ${order.id}`);
  const orderCustomerId = root.createComponent(
    Text,
    {},
    `Order Customer ID: ${order.customerId}`,
  );

  scrollView.append(orderName);
  scrollView.append(orderId);
  scrollView.append(orderCustomerId);

  screen.append(scrollView);

  root.append(screen);

  root.mount();
});

Order APIAPIs

Supporting targets

Anchor to orderapiOrderApi

OrderApiContent

Anchor to examplesExamples

examples

Basic usage of the Order API in an action

React

TS

Display order details in a block

React

TS

Order API
APIs