Print APIAPIs
The Print API enables document printing through the device's native print dialog (such as AirPrint on iOS or the system print dialog on Android). This API is designed for printing documents to standard printers, and does not support direct printing to receipt printers.
Anchor to printapiPrintApi
Interface for handling print operations
- Anchor to printprint(src: string) => Promise<void>required
Trigger a print dialog.
The src must be either:
- A relative path that will be appended to your app's application_url
- A full URL to your app's backend that will be used to return the document to print
Supported document types:
- HTML documents (recommended for best printing experience)
- Text files
- Image files (PNG, JPEG, etc.)
- PDF files (Note: On Android devices, PDFs will be downloaded and must be printed using an external application)
PrintApiContent
Access the print API for printing functionality
- print
Trigger a print dialog. The src must be either: - A relative path that will be appended to your app's [application_url](/docs/apps/build/cli-for-apps/app-configuration#application_url) - A full URL to your app's backend that will be used to return the document to print Supported document types: - HTML documents (recommended for best printing experience) - Text files - Image files (PNG, JPEG, etc.) - PDF files (Note: On Android devices, PDFs will be downloaded and must be printed using an external application)
(src: string) => Promise<void>
export interface PrintApiContent {
/**
* Trigger a print dialog.
*
* The src must be either:
* - A relative path that will be appended to your app's [application_url](/docs/apps/build/cli-for-apps/app-configuration#application_url)
* - A full URL to your app's backend that will be used to return the document to print
*
* Supported document types:
* - HTML documents (recommended for best printing experience)
* - Text files
* - Image files (PNG, JPEG, etc.)
* - PDF files (Note: On Android devices, PDFs will be downloaded and must be printed using an external application)
*
* @param src the source URL of the content to print.
* @returns Promise<void> that resolves when content is ready and native print dialog appears.
*/
print(src: string): Promise<void>;
}Anchor to examplesExamples
Examples of using the Print API
Anchor to example-print-directly-from-the-tilePrint directly from the tile
Anchor to example-print-with-relative-pathPrint with relative path
Anchor to example-print-with-full-urlPrint with full URL
Print directly from the tile
examples
Print directly from the tile
React
import React from 'react'; import { Tile, reactExtension, useApi, } from '@shopify/ui-extensions-react/point-of-sale'; const TileComponent = () => { const api = useApi(); return ( <Tile title="My app" subtitle="Hello world!" onPress={() => { api.print.print('documents/test-print'); }} enabled /> ); }; export default reactExtension('pos.home.tile.render', () => { return <TileComponent />; });TS
import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My app', subtitle: 'Hello world!', enabled: true, onPress: () => { api.print.print('/documents/test-print'); }, }); root.append(tile); });Print with relative path
React
// If your application_url is "https://my-app.com" // This will resolve to "https://my-app.com/api/print/document" await print.print('/api/print/document');Print with full URL
React
// Using a full URL directly await print.print('https://my-print-service.com/api/print/document');
