Order API

APIs

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