---
title: Scanner
description: Learn more about the Scanner action in App Bridge.
api_name: app-bridge
source_url:
  html: 'https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner'
  md: 'https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md'
---

ExpandOn this page

* [Requirements](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md#requirements)
* [Setup](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md#setup)
* [Scanner Capture action](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md#scanner-capture-action)
* [Request access and Open Camera action](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md#request-access-and-open-camera-action)

# Scanner

Note

This is a legacy API. Use the latest version of [`Scanner`](https://shopify.dev/docs/api/app-home/apis/scanner) instead.

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

![A simplified drawing of a smartphone. On the phone's screen is a graphic of a barcode being scanned.](https://shopify.dev/assets/assets/images/apps/tools/app-bridge-scanner-Dojp0OnL.png)

***

## 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.

Note

In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](https://shopify.dev/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).

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


var app = createApp(config);


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](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/features).

```js
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. |

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

Note

Note: If the Camera Scanner Open action is already available, then dispatching `Scanner.Action.OPEN_CAMERA` is the only required step to use the Camera Scanner component. The state of the actions can be determined by calling `app.featuresAvailable()`.

***

* [Requirements](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md#requirements)
* [Setup](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md#setup)
* [Scanner Capture action](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md#scanner-capture-action)
* [Request access and Open Camera action](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md#request-access-and-open-camera-action)