POS UI extension reference
POS UI Extension APIs
Anchor link to section titled "POS UI Extension APIs"The UI Extensions library enables individuals to build extensions that use interface elements and behaviors that mirror the look and feel of the POS retail experience. These elements render natively, providing the performance and accessibility inherent to a native app. POS UI extensions are available for the smart grid.
Every extension point has access to APIs. These APIs are a part of a larger API object that gets passed into the extend() function. You can use these APIs to interact with the POS. Note that if you're using React, you also have access to the useExtensionApi() hook. When using this hook, you can pass in the extension point to get the correct API object type returned from the hook. Not all APIs are available on every extension point. The following table includes all the available APIs, and the extension points that include them.
| API | Description | Extension Points |
|---|---|---|
| CartApi | Allows the extension to receive data and interact with the cart on Shopify POS. | pos.home.tile.render pos.home.modal.render |
| LocaleApi | Allows the extension to receive the current locale, and locale updates. | pos.home.tile.render pos.home.modal.render |
| SessionApi | Allows the extension to receive information on the current session, as well as request a session token. | pos.home.tile.render pos.home.modal.render |
| NavigationApi | Allows the extension to navigate between different screens. | pos.home.modal.render |
| SmartGridApi | Allows the extension to present the pos.home.modal.render extension point. |
pos.home.tile.render |
In the example below, the extend function receives the API object. The UI Extension can then use the cart API to apply a cart discount when the user taps the extended SmartGrid tile.
Tile Extension Components
Anchor link to section titled "Tile Extension Components"When developing a tile extension, you will use the Tile component. This is the one component available on the pos.home.tile.render extension point.
Modal Extension Components
Anchor link to section titled "Modal Extension Components"Modals have a variety of components that you can use to build an interface. The following components are available for the pos.home.modal.render extension point:
Modal Extension Guidelines
Anchor link to section titled "Modal Extension Guidelines"- The root component of a modal extension should be either a Navigator or a Screen.
- Use the Navigator component when you want to navigate between screens. Use the Screen component when you want to display a single screen.
- Unless a Screen is a full-screen List, a Screen component should have a ScrollView as its root component. This allows you to scroll content that doesn't fit on the screen.