Scanner.Action.CAPTURE not firing?

Retired Boards Appdev Tools

Topic summary

A developer encountered an issue where Scanner.Action.CAPTURE subscription wasn’t triggering in their Shopify App Bridge implementation, despite other action subscriptions (like cart) working correctly.

Environment Details:

  • Using @shopify/app-bridge version 3.1.0
  • @shopify/app-bridge-react version 3.1.0
  • React version 17.0.2

Resolution Found:
This is a known issue with a documented workaround. Instead of using scanner.subscribe(), the solution is to use app.subscribe() directly:

  • Subscribe to the CAPTURE action at the app level rather than scanner instance level
  • Request camera scanner features using Features.create(app)
  • Check feature availability before dispatching scanner actions

Platform Behavior:

  • Works correctly on Shopify Mobile
  • Does not function on Shopify POS (Android and iOS)

The developer was directed to the GitHub repository where this workaround is documented. A complete code example demonstrating the app.subscribe() approach was shared in the thread.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Is there a version compatibility for Scanner Action subscription? I can’t get this to work, while other actions subscription like Cart (i.e. cart.subscribe) is firing as expected.

  const app = useAppBridge();
  const scanner = Scanner.create(app);

// THIS IS NOT FIRING?! :-/
 scanner.subscribe(Scanner.Action.CAPTURE, payload => {       
    window.alert(JSON.stringify(payload))
  });

 scanner.dispatch(Scanner.Action.OPEN_CAMERA)

package.json

“@shopify/app”: “3.34.0”,
“@shopify/cli”: “3.34.0”

frontend package.json

“@shopify/app-bridge”: “^3.1.0”,
“@shopify/app-bridge-react”: “^3.1.0”,
“@shopify/app-bridge-utils”: “^3.1.0”,
“@shopify/polaris”: “^9.11.0”,
“react”: “^17.0.2”,
“react-dom”: “^17.0.2”,

2

Hi @dgtlmonk

For issues with App Bridge, the best course of action would be to submit an issue directly here in the public repo.

1 Like
3

Seems like this is a known Issue. For anyone having the same issue, I get the solution from Github repository.

The workaround is to use app.subscribe() instead of scanner.subscribe() like so:

import { Features, Group, Scanner } from "@shopify/app-bridge/actions";
 
let subscribed = false;
let available = false;
 
export const scanBarcode = (app, barcodeCallback) => {
  try {
    let scanner = Scanner.create(app);
    let features = Features.create(app);
 
    // Open camera
    scanner.dispatch(Scanner.Action.OPEN_CAMERA);
 
    // Dispatch an action to request access to Camera Scanner
    features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
      if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
        available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
        if (available) {
          scanner.dispatch(Scanner.Action.OPEN_CAMERA);
        }
      }
    });    
 
    // Does nothing on Shopify POS on Android and iOS
    // Works fine on Shopify Mobile
    features.dispatch(Features.Action.REQUEST, {
      feature: Group.Scanner,
      action: Scanner.Action.OPEN_CAMERA,
    });
    if (!subscribed) {
      subscribed = true;
      app.subscribe(Scanner.Action.CAPTURE, (payload) => {
        let barcode = payload.data.data
          ? payload.data.data
          : payload.data.scanData;
        alert("Barcode" + barcode);
        barcodeCallback(barcode); // Process barcode
      });
    }
  } catch (err) {
    console.log("Camera scanner not available.", err);
    alert("Camera scanner not available. " + JSON.stringify(err?.message));
  }
};