Print APIAPIs
APIs
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)
Was this section helpful?
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
Was this section helpful?
Print directly from the tile
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 />;
});
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');
