Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Receipts

Beta

Receipt targets are part of the POS UI extensions feature preview. This feature preview is available on an invite-only basis and requires POS UI extensions version 2025-04 or higherand POS app version 9.31.0 or later.

The receipt appears as the printed or digital output that customers receive after completing a transaction. This receipt displays transaction details, payment information, and store branding, providing the last touchpoint in the customer experience.

Anchor to Use casesUse cases

Custom branding: Add logos, promotional messages, and store-specific information.
Transaction details: Display QR codes for tracking, loyalty details, and return policies.
Compliance information: Include terms of service, regulatory disclosures, and store policies.
Customer engagement: Integrate survey links, social media, and marketing campaigns.

Anchor to Receipts targetsReceipts targets

Use these targets for receipt customization, branding, or integration with external systems for customer engagement and compliance.

Anchor to Receipt block (header) ,[object Object]Receipt block (header) target

pos.receipt-header.block.render

Renders a custom section in the header of printed receipts. Use this target for adding custom branding, logos, promotional messages, or store-specific information at the top of receipts.

Extensions at this target appear in the receipt header area and support limited components optimized for print formatting, including text content for information display.

Support

Components (3)

APIs (1)

Supported components

Available APIs

Storage API

Examples

import React from 'react';

import {

reactExtension,

useApi,

POSReceiptBlock,

QRCode,

Text,

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

const Block = () => {

const {transaction} = useApi<'pos.receipt-header.block.render'>();

const qrCodeValue =

transaction.transactionType === 'Exchange'

? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`

: `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

return (

<Text>{`Transaction type: ${transaction.transactionType}`}</Text>

<Text>{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}</Text>

</POSReceiptBlock>

);

};

export default reactExtension('pos.receipt-header.block.render', () => (

));

Examples

Add content to receipt header

Description

Display custom content in the header of printed receipts. This example shows how to create a header section with custom branding, logos, promotional messages, or store-specific information at the top of receipts, enhancing brand identity and providing important store information.

React

import React from 'react';

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

const Block = () => {
  const {transaction} = useApi<'pos.receipt-header.block.render'>();
  const qrCodeValue =
    transaction.transactionType === 'Exchange'
      ? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
      : `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

  return (
    <POSReceiptBlock>
      <Text>{`Transaction type: ${transaction.transactionType}`}</Text>
      <Text>{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}</Text>
      <QRCode value={`https://www.shopify.com?${qrCodeValue}`} />
    </POSReceiptBlock>
  );
};

export default reactExtension('pos.receipt-header.block.render', () => (
  <Block />
));

TS

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

export default extension('pos.receipt-header.block.render', (root, api) => {
  const block = root.createComponent(POSReceiptBlock);
  const transaction = api.transaction;
  const textTransactionType = root.createComponent(
    Text,
    {},
    `Transaction type: ${transaction.transactionType}`,
  );
  const textTaxTotal = root.createComponent(
    Text,
    {},
    `Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`,
  );
  const qrCodeValue =
    transaction.transactionType === 'Exchange'
      ? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
      : `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

  const qrCode = root.createComponent(QRCode, {
    value: `https://www.shopify.com?${qrCodeValue}`,
  });

  block.append(textTransactionType);
  block.append(textTaxTotal);
  block.append(qrCode);
  root.append(block);
});

Anchor to Receipt block (footer) ,[object Object]Receipt block (footer) target

pos.receipt-footer.block.render

Renders a custom section in the footer of printed receipts. Use this target for adding contact details, return policies, social media links, or customer engagement elements like survey links or marketing campaigns at the bottom of receipts.

Extensions at this target appear in the receipt footer area and support limited components optimized for print formatting, including text content and QR codes for digital engagement.

Support

Components (3)

APIs (1)

Supported components

Available APIs

Storage API

Examples

import React from 'react';

import {

reactExtension,

useApi,

POSReceiptBlock,

QRCode,

Text,

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

const Block = () => {

const {transaction} = useApi<'pos.receipt-footer.block.render'>();

const qrCodeValue =

transaction.transactionType === 'Exchange'

? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`

: `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

return (

<Text>{`Transaction type: ${transaction.transactionType}`}</Text>

<Text>{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}</Text>

</POSReceiptBlock>

);

};

export default reactExtension('pos.receipt-footer.block.render', () => (

));

Examples

Add content to receipt footer

Description

Display custom content in the footer of printed receipts. This example shows how to create a footer section with contact details, return policies, social media links, or customer engagement elements like survey links, providing additional context and marketing opportunities on receipts.

React

import React from 'react';

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

const Block = () => {
  const {transaction} = useApi<'pos.receipt-footer.block.render'>();
  const qrCodeValue =
    transaction.transactionType === 'Exchange'
      ? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
      : `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

  return (
    <POSReceiptBlock>
      <Text>{`Transaction type: ${transaction.transactionType}`}</Text>
      <Text>{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}</Text>
      <QRCode value={`https://www.shopify.com?${qrCodeValue}`} />
    </POSReceiptBlock>
  );
};

export default reactExtension('pos.receipt-footer.block.render', () => (
  <Block />
));

TS

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

export default extension('pos.receipt-footer.block.render', (root, api) => {
  const block = root.createComponent(POSReceiptBlock);
  const transaction = api.transaction;
  const textTransactionType = root.createComponent(
    Text,
    {},
    `Transaction type: ${transaction.transactionType}`,
  );
  const textTaxTotal = root.createComponent(
    Text,
    {},
    `Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`,
  );
  const qrCodeValue =
    transaction.transactionType === 'Exchange'
      ? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
      : `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

  const qrCode = root.createComponent(QRCode, {
    value: `https://www.shopify.com?${qrCodeValue}`,
  });

  block.append(textTransactionType);
  block.append(textTaxTotal);
  block.append(qrCode);
  root.append(block);
});

Anchor to Best practicesBest practices

Use clear and concise formatting: Use concise, well-formatted text that prints clearly and is easy to read on receipt paper, such as "Visit us: store.example.com," "Returns: 30-day policy," and "Follow us @storename."
Include QR codes that provide genuine value: Include QR codes that provide genuine value like order tracking, feedback collection, or digital receipts, such as order tracking links, customer survey access, and digital receipt downloads.
Optimize for print format: Design receipt content that works well with printers and receipt paper limitations. Receipt extensions are specifically designed for print output and have different constraints than screen-based extensions.
Keep messaging brief and focused: Keep text brief and focused, as receipt space is limited and content should be easily scannable. Use "Returns within 30 days" or "Scan for rewards" instead of lengthy text like "Please visit our website to learn more about our comprehensive return policy" or "Download our mobile app for exclusive offers and rewards."
Use transaction data for context: Use transaction data to provide relevant, personalized information when appropriate, such as transaction type-specific messaging, "Exchange ID: #1001," and tax information display.

Anchor to LimitationsLimitations

Receipt extensions support only a limited set of components optimized for print formatting: POSReceiptBlock, Text, and QRCode.
Receipt extensions have access to transaction data through TransactionCompleteWithReprintData and the Storage API, but can't access other POS UI extensions APIs or perform interactive operations.

Was this page helpful?