Choose a version:

ActionItem

The ActionItem provides a tappable surface on the specified extension target as an entry point to an extension. Note that the text displayed on this ActionItem is dependent on the description of the extension.

Support

Targets (11)

Supported targets

Use cases

Custom workflows: Launch workflows like sending receipts through messaging apps or non-standard channels.
Quick shortcuts: Create shortcuts for multi-step workflows like adding gifts or applying VIP discounts.
Data collection: Launch modals to collect additional customer information.
Third-party integrations: Launch custom interfaces for external system integrations.

Anchor to examplesExamples

Anchor to example-show-a-post-purchase-action-menu-itemShow a post-purchase action menu item

Display an action menu item in the post-purchase flow. This example shows how to render an ActionItem that appears in action menus, providing merchants with a tappable entry point to launch your extension after a transaction is completed.

Show a post-purchase action menu item

import React from 'react';

import {

reactExtension,

useApi,

ActionItem,

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

const PostPurchaseActionItem = () => {

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

return (

<ActionItem

onPress={() => api.action.presentModal()}

enabled

/>

);

};

export default reactExtension(

'pos.purchase.post.action.menu-item.render',

() => <PostPurchaseActionItem />

);

Examples

Show a post-purchase action menu item

Description

Display an action menu item in the post-purchase flow. This example shows how to render an ActionItem that appears in action menus, providing merchants with a tappable entry point to launch your extension after a transaction is completed.

React

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

const PostPurchaseActionItem = () => {
  const api = useApi<'pos.purchase.post.action.menu-item.render'>();

  return (
    <ActionItem
      onPress={() => api.action.presentModal()}
      enabled
    />
  );
};

export default reactExtension(
  'pos.purchase.post.action.menu-item.render',
  () => <PostPurchaseActionItem />
);

TS

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

export default extension(
  'pos.purchase.post.action.menu-item.render',
  (root, api) => {
    const actionItem = root.createComponent(
      ActionItem,
      {
        onPress: () => api.action.presentModal(),
        enabled: true,
      },
    );

    root.append(actionItem);
  },
);

Anchor to actionitemActionItem

Anchor to onPress onPress () => void required: The callback that is executed when the user taps the ActionItem.
Anchor to enabled enabled boolean: Sets whether or not the ActionItem can be tapped.

Anchor to best-practicesBest practices

Control availability with enabled state: Use the enabled property to control when a component can be tapped based on context. Set a component's enabled property to false when the extension's functionality isn't applicable to the current state. For example, if your extension applies a discount for new customers, set enable to false when processing a purchase for an existing customer.
Maintain consistent interaction patterns: Follow established POS interaction patterns by using ActionItem components primarily with the api.action.presentModal() method as entry points to modal workflows. This creates predictable user experiences that align with merchant expectations and standard POS behaviors.
Handle errors and edge cases: Implement proper error handling in onPress callbacks to manage network failures, invalid data states, or other exceptional conditions. Provide meaningful feedback to merchants when operations cannot be completed.

Anchor to limitationsLimitations

ActionItem components can only be used within supported action menu-item targets. They can't be rendered in action (modal) or block targets.
Multiple ActionItem components from the same app can't be rendered simultaneously on the same target. Each extension can only contribute one ActionItem for each supported target.

Was this page helpful?