Skip to main content

Communicate with a server

Learn how to fetch data from your development server to your POS UI extension.

Anchor to authenticatingAuthenticating with a development server

Often, an extension running on a simulator or a device will need to communicate with a development server running on a local machine. One solution is to use the session API to get session tokens, and to pass these tokens to your development servers for authentication using the shopify_app gem.

Anchor to corsCORS considerations

Requests originating from an extension will be of origin cdn.shopify.com and extensions.shopifycdn.com. Your server needs to allow requests from both origins.

Anchor to httpsHTTPS requirement

Shopify POS will refuse to fetch any non-HTTPS requests. Therefore, you must find a way to host your development server where it serves HTTPS requests. For example, a standard rails server will run on localhost:3000. Attempting to access this server from an Android emulator using 10.0.2.2:3000 will fail. One strategy is to use Cloudflare Quick Tunnels, which provide an HTTPS URL to connect.

Anchor to example-extensionExample extension

Here is an example extension that presents a Smart Grid tile. When tapped, the tile will present a modal that uses the Session API to get a session token, and then fetches a test endpoint on the development server.

Example extension

import React from 'react';

import { Tile, useApi, reactExtension } from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
const api = useApi<'pos.home.tile.render'>();

return (
<Tile
title='Example extension'
enabled
onPress={api.action.presentModal}
/>
);
};

export default reactExtension('pos.home.tile.render', () => {
return <SmartGridTile />
})