Print API

The Print API enables document printing functionality in your point of sale extension. Use this API to trigger the native print dialog for your documents. The `print()` method accepts 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)

PrintApi

Interface for handling print operations

PrintApiContent

Access the print API for printing functionality

print

Trigger a print dialog.

Related

  • PrintPreview Component
  • Build a Print Extension

Examples

The Print API enables document printing functionality in your point of sale extension. Use this API to trigger the native print dialog for your documents. The `print()` method accepts 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)

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 />;
});

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 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 />;
});

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

// 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 relative path

// 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

// Using a full URL directly
await print.print('https://my-print-service.com/api/print/document');

Print with full URL

// Using a full URL directly
await print.print('https://my-print-service.com/api/print/document');