Ruby on Rails example app
Shopify has published a sample POS embedded app on GitHub. This app uses Ruby on Rails and it demonstrates many of the methods and capabilities of the SDK. You can clone this app locally and use ngrok to try it out using an iPad. Find out more about how to use the example POS app.
Contents of the SDK
The POS App SDK offers you a
- Cart modifications (e.g adding/removing line items, discounts, custom properties)
- Alert, confirm, and input dialogs
- Flash messages
- User and location information.
Creating an app that uses the Shopify POS App SDK
First, follow the Getting Started guide to create a development store and an app.
Click Apps in the sidebar.
Click the name of your app.
In the Embedded in Shopify POS section, click Embedd in POS.
Save your changes.
HTTPS, SSL certificates and mixed content restrictions
Shopify POS uses SSL for all of its communication. Security of financial data requires all embedded apps to also run on HTTPS.
Like embedded apps in the Shopify admin, publishing an embedded app in the Shopify App Store requires the app to have an SSL certificate.
OAuth will behave normally in your app, as it would for any other Shopify apps or other OAuth enabled services with one caveat:
Since the application is loaded inside an iframe it is critical that the initial OAuth request redirect escapes the iframe to make the requests. Shopify returns the
X-Frame-Options=DENY header and prevents any Shopify admin pages from being loaded inside an iframe.
This means that where the OAuth process would normally begin with:
It should now return a page containing:
Initializing the POS App SDK
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>
Initialize the SDK using your API key and your
https://example-store.myshopify.com URL immediately after including the
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:
Once initialized, you can use any of the API methods and features provided with the Shopify POS App SDK.
Selling your POS app in the Shopify App Store
After you have written an embedded app for Shopify POS, you may want to submit it to the Shopify App Store. You can bill merchants for your app using Shopify's Billing API. Merchants can buy your app using the Billing API when they access your app using the Shopify web admin. Billing API requests cannot be made from within the POS itself. Find out about how to get your app listed in the Shopify App Store.