Scanner

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

GroupScanner
ActionCAPTURE
Action TypeAPP::SCANNER::CAPTURE
DescriptionDispatches 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

GroupScanner
ActionOPEN::CAMERA
Action TypeAPP::SCANNER::OPEN::CAMERA
DescriptionOpens 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

GroupScanner
ActionOPEN::NFC
Action TypeAPP::SCANNER::OPEN::NFC
DescriptionOpens 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)
    }
});