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

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)
    }
});

Sign up for a Partner account to get started.

Sign up