Printing API

Examples

• Description

  Call `shopify.printing.print()` without a `printer` option to open the system print dialog from a POS tile.

  jsx

  import {render} from 'preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    return (
      <s-tile
        heading="My app"
        subheading="Print document"
        onClick={() => {
          shopify.printing.print('documents/test-print');
        }}
      />
    );
  };

• Description

  Print documents hosted by your app backend using a full URL.

  jsx

  import {render} from 'preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    return (
      <s-tile
        heading="My app"
        subheading="Print with full URL"
        onClick={async () => {
          await shopify.printing.print(
            'https://my-print-service.com/api/print/document',
          );
        }}
      />
    );
  };

• Description

  Print documents using a path relative to your app's `application_url`.

  jsx

  import {render} from 'preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    return (
      <s-tile
        heading="My app"
        subheading="Print with relative path"
        onClick={async () => {
          await shopify.printing.print('/api/print/document');
        }}
      />
    );
  };

• Description

  Find a connected hardware printer and send a receipt directly to it. If none is connected, fall back to the system print dialog.

  jsx

  import {render} from 'preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    async function printReceipt() {
      try {
        const printers = await shopify.printing.getPrinters();
        const receiptPrinter = printers.find((printer) => printer.connected);
  
        if (receiptPrinter) {
          await shopify.printing.print('/print/receipt', {printer: receiptPrinter});
          return;
        }
  
        await shopify.printing.print('/print/receipt');
      } catch (error) {
        console.error('Unable to print receipt', error);
      }
    }
  
    return (
      <s-tile
        heading="Print receipt"
        subheading="Use receipt printer"
        onClick={printReceipt}
      />
    );
  };