Choose a version:

Post-purchase

The post-purchase screen appears after merchants complete a sale, return, or exchange transaction. This screen displays the transaction summary and provides opportunities for follow-up actions, customer service, and revenue generation.

Anchor to Use casesUse cases

Purchase details: Display warranty information, registration links, and care instructions.
Customer follow-up: Launch satisfaction surveys, loyalty enrollment, and follow-up communications.
Upselling: Present complementary products and service add-ons.
External integrations: Connect with CRM (Customer Relationship Management), marketing automation, and inventory systems.

Anchor to Post-purchase targetsPost-purchase targets

Use these targets for purchase completion workflows, post-sale analytics, or integration with external systems for customer engagement and business intelligence.

Anchor to Post-purchase action (menu item) ,[object Object]Post-purchase action (menu item) target

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

Renders a single interactive button component as a menu item in the post-purchase action menu. Use this target for post-purchase operations like sending receipts, collecting customer feedback, or launching follow-up workflows after completing a sale.

Extensions at this target can access the order identifier through the Order API to perform purchase-specific operations. Menu items typically invoke api.action.presentModal() to launch the companion modal for complete post-purchase workflows.

Support

Components (1)

APIs (8)

Supported components

ActionItem

Available APIs

Examples

import React from 'react';

import {

reactExtension,

ActionItem,

useApi,

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

const ActionItemComponent = () => {

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

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

};

export default reactExtension(

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

() => <ActionItemComponent />,

);

Examples

Show a post-purchase action menu item

Description

Create an action menu item in the post-purchase flow. This example demonstrates rendering a button in the post-purchase action menu for operations like sending receipts, collecting customer feedback, or launching follow-up workflows after completing a sale.

React

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

const ActionItemComponent = () => {
  const api = useApi<'pos.purchase.post.action.menu-item.render'>();
  return <ActionItem enabled onPress={() => api.action.presentModal()} />;
};

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

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 Post-purchase action (modal) ,[object Object]Post-purchase action (modal) target

pos.purchase.post.action.render

Renders a full-screen modal interface launched from post-purchase menu items. Use this target for complex post-purchase workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide.

Extensions at this target have access to order data through the Order API and support workflows with multiple screens, navigation, and interactive components.

Support

Components (30)

APIs (9)

Examples

import React from 'react';

import {

Text,

Screen,

ScrollView,

Navigator,

useApi,

reactExtension,

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

const Modal = () => {

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

return (

<Text>{`Order ID for complete checkout: ${api.order.id}`}</Text>

</ScrollView>

</Screen>

</Navigator>

);

};

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

));

Examples

Show a post-purchase action modal

Description

Create a full-screen modal for post-purchase workflows launched from post-purchase menu items. This example shows how to build complex post-purchase operations with forms, multi-step processes, and access to order data through the Order API.

React

import React from 'react';

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

const Modal = () => {
  const api = useApi<'pos.purchase.post.action.render'>();
  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <ScrollView>
          <Text>{`Order ID for complete checkout: ${api.order.id}`}</Text>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

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

TS

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

export default extension('pos.purchase.post.action.render', (root, api) => {
  const navigator = root.createComponent(Navigator);
  const screen = root.createComponent(Screen, {
    name: 'HelloWorld',
    title: 'Hello World!',
  });
  const scrollView = root.createComponent(ScrollView);
  const text = root.createComponent(Text);

  text.append(`Order ID for complete checkout: ${api.order.id}`);
  scrollView.append(text);
  screen.append(scrollView);
  navigator.append(screen);
  root.append(navigator);
});

Anchor to Best practicesBest practices

Show clear action confirmations: Show clear success or error messages that specify which purchase was affected and what action was completed, using messages like "Purchase #1001 processed successfully," "Customer survey sent," or "Unable to process - system error."
Ensure purchase continuity: Ensure that post-purchase actions integrate properly with the overall transaction lifecycle and business processes, such as updated inventory records, triggered follow-up workflows, and recorded sales analytics.
Handle error states gracefully: Communicate purchase processing limitations clearly rather than showing generic error messages. If your extension processes purchase data or triggers post-purchase workflows, ensure you handle completion states responsibly, provide clear feedback about processing stages, and communicate any requirements or restrictions that affect purchase finalization or follow-up actions.
Write clear and action-oriented labels: Use action-oriented labels that specify what will happen for this particular purchase, with descriptive titles that indicate the information type. Use labels like "Send receipt by email" or "Purchase Summary" instead of generic labels like "Purchase options" or "Purchase App."
Show current status and purchase information: Show current purchase status, relevant metrics, and action eligibility to support completion decisions, such as purchase completion status, "Purchase completed successfully," and order ID and customer details.

Anchor to LimitationsLimitations

You can only render one Button component for each POS UI extension using the action (menu item) target.
Order data is read-only through the Order API, which provides only the order ID, name, and customer ID. To access additional purchase information or modify purchase data, use external API calls or integrate with the Admin API through your app backend.

Was this page helpful?