Scanner

The Scanner action set allows you to use the mobile device's camera to scan barcodes.

Requirements

These actions require the following app versions:

Shopify iOS v8.25.0 or above
Shopify Android v8.24.0 or above
Point of Sale iOS v5.32.0 or above
Point of Sale Android v3.25.0 or above

Setup

Create an app and import the Scanner module from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.

import createApp from '@shopify/app-bridge';
import {Group, Scanner} from '@shopify/app-bridge/actions';

var app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

var scanner = Scanner.create(app);

Scanner Capture action

Group	Scanner
Action	CAPTURE
Action Type	APP::SCANNER::CAPTURE
Description	Dispatches when a scan is successful.

To open a Scanner component, you must first use Feature Detection to check whether it's available. If it is, then you can open it. To learn more about Feature Detection, see Features.

scanner.subscribe(Scanner.Action.CAPTURE, function(payload) {
  // The payload will contain `scanData`, a string representation of the data scanned.
});

Response

Key	Type	Description
`scanData`	String?	The resulting string from scanning a barcode.

Request access and Open Camera action

Group	Scanner
Action	OPEN::CAMERA
Action Type	APP::SCANNER::OPEN::CAMERA
Description	Opens a camera component for scanning barcodes.

var features = Features.create(app);
// Subscribe to the update action (triggered when the permission dialog is interacted with)
features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
  if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
    var available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
    // If the Camera Scanner actions were enabled, open a Scanner
    if (available) {
      scanner.dispatch(Scanner.Action.OPEN_CAMERA)
    }
  }
});
// Dispatch an action to request access to Scanner actions
features.dispatch(Features.Action.REQUEST, {
  feature: Group.Scanner,
  action: Scanner.Action.OPEN_CAMERA
});