Initialization

To expose the JavaScript API to your app, simply include the pos_app.js script at the top of your app's <head> element. It has no dependencies but plays well with other libraries like jQuery.

<head>
  <script src="https://cdn.shopify.com/s/assets/external/pos_app.js"></script>
  ...
</head>

Initialized the SDK using your API key and your https://example-store.myshopify.com URL immediately after including the pos_app.js file:

<head>
  <script src="https://cdn.shopify.com/s/assets/external/pos_app.js"></script>
  <script type="text/javascript">
    ShopifyPOS.init({
      apiKey: 'YOUR_APP_API_KEY',
      shopOrigin: 'https://CURRENT_LOGGED_IN_SHOP.myshopify.com'
    });
  </script>
  ...
</head>

This makes the ShopifyPOS object available and ready for use.

The script detects if your app was loaded inside an iframe. If not, it will create a redirection back into the relative embedded URL in the Shopify admin. This functionality can be disabled by passing forceRedirect: false as a configuration option.

You can include a debug: true option as well to get detailed output into console.log for browsers that support it.

Once your app has been initialized, the callbacks passed to ShopifyPOS.ready() are called. There is no guarantee that communication with POS is possible before ready() is called. Here is a sample inline script for an embedded app view:

<script type="text/javascript">
  ShopifyPOS.ready(function(){
    //App view is now rendered
    ShopifyPOS.flashNotice('Hello world!');
  });
</script>

Note

The initialization step is required on any page shown embedded in POS. The callback from ready() must be done if any API integration with POS is desired.

Once initialized, you can use any of the API methods and features provided with the Shopify POS App SDK.

Learn more about API methods ›