Scanner

The Scanner action set allows you to use the mobile device's camera to scan barcodes, or its near-field communication (NFC) reader to scan NFC tags.

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

NFC requires iOS 12 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 either an NFC tag or 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
});

Open NFC action

Group	Scanner
Action	OPEN::NFC
Action Type	APP::SCANNER::OPEN::NFC
Description	Opens a component for scanning NFC tags.

// Check if NFC scanning is available
app.featuresAvailable(Group.Scanner).then(function (state) {
  var available = state[Group.Scanner][Scanner.Action.OPEN_NFC].Dispatch;
    // If the NFC Scanner action is enabled, open a Scanner
    if (available) {
      scanner.dispatch(Scanner.Action.OPEN_NFC)
    }
});