---
title: Receipts
description: >-
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.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
html: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/receipts'
md: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/receipts.md'
---
Migrate to Polaris
Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/pos/upgrading-to-2025-10) to upgrade your extension.
# Receipts
**Beta:**
Receipt targets are part of the POS UI extensions [feature preview](https://shopify.dev/docs/api/feature-previews). 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.
### Use 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.
***
## Receipts targets
Use these targets for receipt customization, branding, or integration with external systems for customer engagement and compliance.
### 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
* [POSReceipt​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posreceiptblock)
* [QRCode](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/text)
### Available APIs
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/storage-api)
Examples
### 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
```tsx
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 (
{`Transaction type: ${transaction.transactionType}`}
{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}
);
};
export default reactExtension('pos.receipt-header.block.render', () => (
));
```
##### TS
```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);
});
```
### 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
* [POSReceipt​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posreceiptblock)
* [QRCode](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/text)
### Available APIs
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/storage-api)
Examples
### 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
```tsx
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 (
{`Transaction type: ${transaction.transactionType}`}
{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}
);
};
export default reactExtension('pos.receipt-footer.block.render', () => (
));
```
##### TS
```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);
});
```
***
## Best 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.
***
## Limitations
* Receipt extensions support only a limited set of components optimized for print formatting: [POSReceiptBlock](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posreceiptblock), [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/text), and [QRCode](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode).
* Receipt extensions have access to transaction data through `TransactionCompleteWithReprintData` and the [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/storage-api), but can't access other POS UI extensions APIs or perform interactive operations.
***