Storage API doesn't work with receipts

Extensions
1

As a developer I want to develop a toggle button for the QRCode component, that will allow merchants to control when the extension should be printed. When attempting to use the Storage API within a POS UI extension targeting pos.receipt-footer.block.render, the API does not function as expected.

Steps to Reproduce:

  1. Create a POS UI extension targeting pos.receipt-footer.block.render.

  2. Write value to StorageAPI from any extension. Try to toggle between false/true.

  3. Deploy and run the extensions in Shopify POS.

  4. Observe that QRCode is always printed - meaning storage API does not affect it (falls back to “true” value).

import React, { useEffect, useState } from 'react';

import {
  reactExtension,
  useApi,
  POSReceiptBlock,
  QRCode,
} from '@shopify/ui-extensions-react/point-of-sale';

const Block = () => {
  const {transaction} = useApi<'pos.receipt-footer.block.render'>();
  const api = useApi<'pos.receipt-footer.block.render'>();
  const [qrEnabled, setQrEnabled] = useState(true);
  
  // Load global QR settings
  useEffect(() => {
    const loadSettings = async () => {
      try {
        const qrSettings = await api.storage.get('qr_settings') as any;
        const globalEnabled = qrSettings?.show_qr_code ?? true;
        setQrEnabled(globalEnabled);
      } catch (error) {
        setQrEnabled(true);
      }
    };

    loadSettings();
  }, []);
  
  // If transaction type is exchange, show empty POSReceiptBlock
  if (transaction.transactionType === 'Exchange') {
    return <POSReceiptBlock />;
  }

  // If QR code is disabled globally, show empty POSReceiptBlock
  if (!qrEnabled) {
    return <POSReceiptBlock />;
  }

  return (
    <POSReceiptBlock>
      <QRCode value={`${transaction.orderId ?? 'undefined'}`} />
    </POSReceiptBlock>
  );
};

export default reactExtension('pos.receipt-footer.block.render', () => (
  <Block />
));

Expected Behavior: The Storage API should be available and functional within the pos.receipt-footer.block.render target, allowing extensions to persist and retrieve data as in other POS UI extension targets.

Tried with 2025-07 api and “@shopify/ui-extensions-react”: “2025.7.1”,

3

Hi @wwisniewski

StorageAPI is limited to the same extension. Could you provide additional details on your statment below?

Write value to StorageAPI from any extension. Try to toggle between false/true.

  • Are you utilizing the StorageAPI from different extensions?

  • Is your toggle a separate extension?

When I say extension, I do not mean extension targets.

Thank you!

4

Hi @Victor_Chu,

thanks for looking into it.

Are you utilizing the StorageAPI from different extensions?

Is your toggle a separate extension?

No, all targets are within the same extension. I assume receipt rendering might be synchronous-only and there’s no component lifecycle. I tried various things and any form of asynchronicity doesn’t work.

5

FYI: We managed to find a workaround by passing data through line item properties, through home screen tile, but it comes with poor UX and limitations (e.g. order cannot be modified after if you would like to toggle QR on receipts printed again later on)

That being said, we are still hoping that the storage api will be fixed.

6

@wwisniewski

Have you tested this behaviour between any other extension targets? Or are you only noticing it for the pos.receipt-footer.block.render target?

I’ve logged an issue for the team to investigate. Thank you for you patience.

Victor

7

@Victor_Chu I tried using the storage API within the same extension in these targets, and it worked just fine. Storage is shared between these as expected:

“pos.home.modal.render”

“pos.order-details.action.render”

“pos.purchase.post.block.render”

No worries! Thank you :smiley: