Shopify POS UI Extensions

https://shopify.dev/docs/api/pos-ui-extensions
Admin
Shopify POS UI extensions allow developers to build extensions that mirror the look and feel of the...
Tokens:168,746
Snippets:1,354
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Display text with visual styles

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/text

Example HTML showing how to use the s-text component with a strong type for emphasis.

```html
<s-text>
  <s-text type="strong">Name:</s-text> Jane Doe
</s-text>
```

--------------------------------

### Register Details Target Example

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/register-details

Example of a POS UI extension targeting the register details screen. Uses the Action API to add a button that opens a modal when tapped.

```typescript
import { Action, Modal, render } from '@shopify/pos-ui-extensions-react';

const ActionMenu = () => {
  return (
    <Action name="Example action" onPress={() => {}} />
  );
};

render('pos.home.tile.action.render', () => <ActionMenu />);
```

--------------------------------

### Structure a page layout

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/page

Example showing how to structure a full-screen view using the page component with a heading and a secondary action button.

```APIDOC
## Page Component

### Description
Structure full-screen views using a page component with built-in header and content layouts.

### Properties
- **heading** (string) - Default: '' - The main page heading, displayed in the action bar at the top of the page.
- **id** (string) - A unique identifier for the element.
- **subheading** (string) - A secondary page heading, displayed under the main heading in the action bar.

### Slots
- **aside** (HTMLElement) - Content to display in the page's sidebar.
- **secondary-actions** (HTMLElement) - Button element to display in the action bar. Only a single button is supported.

### Example
```html
<s-page heading="Title">
  <s-button slot="secondary-actions">
    Action
  </s-button>
</s-page>
```

```

--------------------------------

### Create a smart grid tile

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/tile

Example showing how to create a basic tile for the POS smart grid using the s-tile web component with heading, subheading, and tone properties.

```APIDOC
## Tile Component

### Description
Creates an interactive tile for the POS smart grid. The tile can display a heading, subheading, and optional tone.

### Usage
Use the `s-tile` web component with the following attributes:

- `heading` (string): A title that describes the content of the tile.
- `subheading` (string): Supporting text displayed below the heading.
- `tone` ('auto' | 'neutral' | 'accent'): Sets the tone of the tile. Default is 'auto'.

### Example
```html
<s-tile heading="Extension title" subheading="Subtitle" />
<s-tile heading="Extension title" subheading="Subtitle" tone="accent" />
```

### Properties
- `disabled` (boolean, default: false): Disables the tile, preventing clicks and focus.
- `heading` (string, default: ''): A title that describes the content of the tile.
- `id` (string): A unique identifier for the element.
- `itemCount` (number): A numeric indicator rendered within the tile (e.g., a count or step number).
- `subheading` (string, default: ''): Supporting text displayed below the heading.
- `tone` ('auto' | 'neutral' | 'accent', default: 'auto'): Sets the tone of the tile.

### Events
- `click` (event: CallbackEvent<"s-tile">) => void: Callback when the tile is activated.

### CallbackEvent Properties
- `bubbles` (boolean)
- `cancelable` (boolean)
- `composed` (boolean)
- `currentTarget` (HTMLElementTagNameMap[T])
- `detail` (any)
- `eventPhase` (number)
- `target` (HTMLElementTagNameMap[T] | null)

### Best Practices
- Use action-oriented headings like "Apply loyalty discount" instead of generic terms.
- Provide contextual subheadings showing dynamic information like cart totals or status.
- Use meaningful item counts for actionable items, not just informational counts.
- Launch modals for workflows using `onClick` with `shopify.action.presentModal()`.

### Limitations
- Supports click and long press interactions only. Swipe, drag, and other gestures are not supported.
```

--------------------------------

### Structure a page layout

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/page

Basic example of a page component with a heading and a secondary action button.

```html
<s-page heading="Title">
  <s-button slot="secondary-actions">
    Action
  </s-button>
</s-page>
```

--------------------------------

### Retrieve all stored entries with shopify.storage.entries()

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/platform-apis/storage-api

Retrieves all stored key-value pairs as an array of tuples. The example shows how to use shopify.storage.entries() to get all data, which may impact memory usage with large datasets.

```tsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-tile
      heading="POS smart grid"
      subheading="preact Extension"
      onClick={async () => {
        const entries = await shopify.storage.entries();
        shopify.toast.show(`Stored entries: ${JSON.stringify(entries)}`);
      }}
    />
  );
}

```

--------------------------------

### Trigger actions with a button

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/button

Basic button example with primary and secondary variants. Use primary for the main action and secondary for supporting actions.

```html
<s-button variant="primary">Add customer</s-button>
<s-button variant="secondary">Select more items</s-button>
```

--------------------------------

### Display a toast notification from a tile using shopify.toast.show()

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/toast-api

Use this JSX example to display a toast notification when a tile is clicked. The toast automatically dismisses after the specified duration (5000 ms in this example). This is useful for confirmations, status updates, or success messages that don't require user interaction.

```tsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-tile
      heading="My App"
      onClick={() => shopify.toast.show('Toast content', {duration: 5000})}
    />
  );
};

```

--------------------------------

### Show loading state with a spinner

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner

Basic spinner example that indicates an ongoing process. The accessibilityLabel property is recommended when there is no accompanying text describing the loading state.

```html
<s-spinner accessibilityLabel="Loading content" />
<s-spinner accessibilityLabel="Loading content" />
<s-spinner accessibilityLabel="Loading content" />
```

--------------------------------

### Monitor Internet connectivity status with Preact

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/platform-apis/connectivity-api

JSX example using `shopify.connectivity.current.subscribe` and `shopify.connectivity.current.value.internetConnected` to detect online/offline changes. Requires importing '@shopify/ui-extensions/preact' to use the value as a stateful subscription.

```tsx
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
// Allows the use of `shopify.connectivity.current.value` as a stateful subscription.
import '@shopify/ui-extensions/preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  const [isConnected, setIsConnected] = useState(
    shopify.connectivity.current.value.internetConnected === 'Connected'
  );

  useEffect(() => {
    const unsubscribe = shopify.connectivity.current.subscribe((newConnectivity) => {
      setIsConnected(newConnectivity.internetConnected === 'Connected');
    });
    return unsubscribe;
  }, []);

  return (
    <s-tile
      heading="My App"
      disabled={!isConnected}
    />
  );
};
```

--------------------------------

### Search for products using a search bar with shopify.productSearch.searchProducts

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/product-search-api

Use this snippet to perform text-based product searches with pagination support. The example uses `shopify.productSearch.searchProducts()` to find products by name, SKU, or other searchable attributes.

```tsx
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const searchProducts = async () => {
      const results = await shopify.productSearch.searchProducts('shirt', {first: 10});
      setProducts(results.items);
      console.log('Cursor for next page: ', results.lastCursor);
    };

    searchProducts();
  }, []);

  return (
    <s-page heading="Hello World!">
      <s-scroll-box>
        <s-text>Found {products.length} products</s-text>
        {products.map((product) => (
          <s-text key={product.id}>{product.title}</s-text>
        ))}
      </s-scroll-box>
    </s-page>
  );
};
```

--------------------------------

### Basic date spinner with show button

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-spinner

Use this HTML example to display a date spinner with a button that toggles its visibility via the `--show` command. The spinner is initialized with a default value of `2021-09-17`.

```html
<s-button command="--show" commandFor="date-spinner">
  Show
</s-button>
<s-date-spinner
  id="date-spinner"
  value="2021-09-17" 
/>
```

--------------------------------

### Create a container with a box

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/box

Basic example of a box container with padding and styling using the `s-box` component. The `padding="base"` attribute applies design system padding.

```html
<s-box padding="base">
  <s-text>View shipping settings</s-text>
</s-box>
```

--------------------------------

### Preview printable content with s-embed

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/embed

Use the s-embed component to display a preview of printable content before printing. The example sets the component size and specifies a PDF source.

```html
<s-embed
  inlineSize="400px"
  blockSize="600px"
  type="application/pdf"
  src="print-preview.pdf"
/>
```

--------------------------------

### Fetch multiple products by IDs using shopify.productSearch.fetchProductsWithIds

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/product-search-api

Use this snippet to fetch multiple products by their IDs in a single request. The example uses `shopify.productSearch.fetchProductsWithIds([1, 2, 3])` and logs any IDs that were not found.

```tsx
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const results = await shopify.productSearch.fetchProductsWithIds([1, 2, 3]);
      setProducts(results.fetchedResources);
      console.log('IDs not found: ', results.idsForResourcesNotFound);
    };

    fetchProducts();
  }, []);

  return (
    <s-page heading="Hello World!">
      <s-scroll-box>
        <s-text>Found {products.length} products</s-text>
        {products.map((product) => (
          <s-text key={product.id}>{product.title}</s-text>
        ))}
      </s-scroll-box>
    </s-page>
  );
};
```

--------------------------------

### Create a smart grid tile

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/tile

Basic tile example for the POS smart grid. Shows two tile elements: one with default tone and one with accent tone. The tile component supports heading, subheading, and tone properties.

```html
<s-tile heading="Extension title" subheading="Subtitle" />
<s-tile heading="Extension title" subheading="Subtitle" tone="accent" />
```

--------------------------------

### Create a full-screen modal for a smart grid tile (JSX)

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/home-screen

Use this JSX example to build a full-screen modal launched from a smart grid tile. It renders a Preact component with an s-page heading and an s-scroll-box containing welcome text. This provides a complete workflow experience with more space than the tile interface.

```jsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-page heading="Hello World!">
      <s-scroll-box>
        <s-text>Welcome to the extension!</s-text>
      </s-scroll-box>
    </s-page>
  );
};
```

--------------------------------

### Fetch a single variant by ID

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/product-search-api

Uses shopify.productSearch.fetchProductVariantWithId() to fetch a variant by ID. The example is in JSX/TSX and uses Preact hooks.

```tsx
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  const [variant, setVariant] = useState(null);

  useEffect(() => {
    const fetchVariant = async () => {
      const resultVariant = await shopify.productSearch.fetchProductVariantWithId(1);
      setVariant(resultVariant);
    };

    fetchVariant();
  }, []);

  return (
    <s-page heading="Hello World!">
      <s-scroll-box>
        <s-text>
          {variant ? `Variant: ${variant.title}` : 'Loading...'}
        </s-text>
      </s-scroll-box>
    </s-page>
  );
};
```

--------------------------------

### Open a modal from a post-purchase action

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/action-api

Use shopify.action.presentModal() to launch a modal workflow from post-purchase, order details, or other action menu item contexts. This pattern enables complex, multi-step operations.

```tsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-button
      onClick={() => {
        shopify.action.presentModal();
      }}
    />
  );
};
```

--------------------------------

### Deploy extension with Shopify CLI

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest

Use the Shopify CLI command to deploy your POS UI extension. This command is run in the terminal.

```terminal
shopify app deploy
```

--------------------------------

### ReadonlySignalLike.value

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/platform-apis/scanner-api

The current value of the signal. This property provides immediate access to the current value without requiring subscription setup.

```APIDOC
## value

### Description
The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.

### Type
`T`

### Example
```ts
const currentValue = signal.value;
```
```

--------------------------------

### Open a modal from a smart grid tile

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/action-api

Use shopify.action.presentModal() to launch modal workflows from smart grid tiles on the POS home screen. This pattern is suited for high-frequency tasks that require additional UI beyond the tile.

```tsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-tile
      heading="My App"
      subheading="Present modal from tile"
      onClick={() => {
        shopify.action.presentModal();
      }}
    />
  );
};
```

--------------------------------

### Fetch a single product by ID

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/product-search-api

Uses shopify.productSearch.fetchProductWithId() to fetch a product by ID and display its title. The example is in JSX/TSX and uses Preact hooks.

```tsx
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    const fetchProduct = async () => {
      const resultProduct = await shopify.productSearch.fetchProductWithId(1);
      setProduct(resultProduct);
    };

    fetchProduct();
  }, []);

  return (
    <s-page heading="Hello World!">
      <s-scroll-box>
        <s-text>
          {product ? `Product: ${product.title}` : 'Loading...'}
        </s-text>
      </s-scroll-box>
    </s-page>
  );
};
```

--------------------------------

### Create a customer details action modal (JSX)

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/customer-details

Build a full-screen modal workflow launched from a customer details action menu item. This example demonstrates creating customer-specific experiences with multi-step processes, forms, and customer data access for operations like loyalty management or profile updates.

```jsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-page heading='Customer Details'>
      <s-scroll-box>
        <s-text>Customer ID: {shopify.customer.id}</s-text>
      </s-scroll-box>
    </s-page>
  );
};
```

--------------------------------

### shopify.cart.clearCart()

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/contextual-apis/cart-api

Removes all line items and resets the cart to an empty state. Useful for starting fresh transactions or implementing cart reset functionality.

```APIDOC
## shopify.cart.clearCart()

### Description
Remove all line items and reset the cart to an empty state. Useful for starting fresh transactions or implementing cart reset functionality.

### Method
Function call

### Endpoint
shopify.cart.clearCart()

### Parameters
None

### Request Example
```tsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-tile
      heading="My App"
      subheading="Call cart function"
      onClick={() => {
        shopify.cart.clearCart();
      }}
    />
  );
};
```

### Response
No response body documented.
```

--------------------------------

### Display important messages with a banner

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/banner

Basic banner examples with different tones (success, info, warning, critical) and a primary-action slot containing a dismiss button.

```html
<s-banner heading="Marked as delivered" tone="success">
  <s-button slot="primary-action">Dismiss</s-button>
</s-banner>


<s-banner heading="Ready for shipping" tone="info">
  <s-button slot="primary-action">Dismiss</s-button>
</s-banner>


<s-banner heading="Couldn't restock items" tone="warning">
  <s-button slot="primary-action">Dismiss</s-button>
</s-banner>


<s-banner heading="Action failed. Contact developer" tone="critical">
  <s-button slot="primary-action">Dismiss</s-button>
</s-banner>
```

--------------------------------

### shopify.extension.toml configuration for POS UI extension

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest

Defines a POS UI extension with targets for home tile and modal rendering. Requires api_version, extension type, name, handle, uid, and targeting entries.

```toml
api_version = "2026-07"


[[extensions]]
type = "ui_extension"
name = "My POS UI extension"
handle = "my-pos-ui-extension"
uid = "3c9a17f4-6d2b-4e08-b1c5-7fa32e9d64b80af5c231"
description = "My POS UI extension description"


[[extensions.targeting]]
target = "pos.home.tile.render"
module = "./src/Tile.tsx"


[[extensions.targeting]]
target = "pos.home.modal.render"
module = "./src/Modal.tsx"
```

--------------------------------

### shopify.cart.applyCartDiscount (Percentage)

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/contextual-apis/cart-api

Adds a cart-level discount that applies to the total cart value. This example demonstrates applying a 10% discount titled 'Summer discount' to the cart.

```APIDOC
## shopify.cart.applyCartDiscount (Percentage)

### Description
Adds a cart-level discount that applies to the total cart value. This example demonstrates applying a 10% discount titled 'Summer discount' to the cart.

### Method
Function call

### Endpoint
shopify.cart.applyCartDiscount

### Parameters
#### Request Body
- **type** (string) - Required - The discount type, e.g., 'Percentage'.
- **title** (string) - Required - The title or reason for the discount.
- **amount** (string) - Required - The discount amount (e.g., '10' for 10%).

### Request Example
```tsx
shopify.cart.applyCartDiscount('Percentage', 'Summer discount', '10');
```

### Response
No response details provided in the source.
```

--------------------------------

### get

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/platform-apis/storage-api

Retrieves the value associated with a key, returning undefined if the key doesn't exist. Always handle the undefined case by providing fallback values or conditional logic.

```APIDOC
## get

### Description
Retrieves the value associated with a key, returning `undefined` if the key doesn't exist. Always handle the `undefined` case by providing fallback values or conditional logic. Commonly used for loading user preferences, retrieving cached data, or accessing contextual information passed between extension targets.

### Method
get

### Signature
`<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys) => Promise<StorageTypes[Keys]>`

### Parameters
- **key** (Keys) - Required - The key to retrieve.

### Returns
Promise<StorageTypes[Keys]>

### Example
```tsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-tile
      heading="POS smart grid"
      subheading="preact Extension"
      onClick={async () => {
        await shopify.storage.set('key', 'A temporary value');
        const storedData = await shopify.storage.get('key');
        shopify.toast.show(`Current value: ${String(storedData)}`);
        setTimeout(async () => {
          await shopify.storage.delete('key');
          const storedData = (await shopify.storage.get('key')) ?? '';
          shopify.toast.show(`Current value after deletion: ${String(storedData)}`);
        }, 2000);
      }}
    />
  );
}
```
```

--------------------------------

### shopify.extension.toml configuration for POS UI extension with offline support

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest

Configures a POS UI extension with api_version 2026-07, enables runs_offline, and targets pos.home.tile.render and pos.home.modal.render with Tile.tsx and Modal.tsx modules.

```toml
api_version = "2026-07"


[[extensions]]
type = "ui_extension"
name = "My extension"
handle = "my-extension"
uid = "b71e4d90-52a8-c3f1-6d04-e8b529af7c1d3ba60e95"
description = "An extension that runs when POS loses network access"


[extensions.supported_features]
runs_offline = true


[[extensions.targeting]]
target = "pos.home.tile.render"
module = "./src/Tile.tsx"


[[extensions.targeting]]
target = "pos.home.modal.render"
module = "./src/Modal.tsx"
```

--------------------------------

### Clear all items from the cart with shopify.cart.clearCart()

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/contextual-apis/cart-api

Use this snippet to remove all line items and reset the cart to an empty state, useful for starting fresh transactions or implementing cart reset.

```tsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-tile
      heading="My App"
      subheading="Call cart function"
      onClick={() => {
        shopify.cart.clearCart();
      }}
    />
  );
};
```

--------------------------------

### Create an order details action modal (JSX)

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/order-details

Build a full-screen modal workflow launched from an order details action menu item. This example demonstrates creating order-specific experiences with multi-step processes, forms, and order data access for operations like refund processing or fulfillment management. Uses Preact's render function and the shopify.order.id property.

```jsx
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-page heading="Order Details Action">
      <s-scroll-box>
        <s-text>Order ID: {shopify.order.id}</s-text>
      </s-scroll-box>
    </s-page>
  );
};
```

--------------------------------

### shopify.camera.takePhoto

Source: https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/platform-apis/camera-api

Launches the device's camera to take a photo. Returns a promise that resolves with the captured image data and metadata.

```APIDOC
## shopify.camera.takePhoto

### Description
Launches the device's camera to take a photo. Returns a promise that resolves with the captured image data and metadata.

### Method
Not applicable (SDK method)

### Endpoint
Not applicable (SDK method)

### Parameters
#### Options (CameraMediaOptions)
- **facingMode** (string) - Optional - The camera that will be active when the camera interface first opens. Values: 'user' (front-facing) or 'environment' (rear-facing).
- **maxHeight** (number) - Optional - The maximum height (1 to 1920) of the image in pixels. Resizes the image to this height if it is larger.
- **maxWidth** (number) - Optional - The maximum width (1 to 1920) of the image in pixels. Resizes the image to this width if it is larger.
- **quality** (number) - Optional - The quality of the image returned. Percentile value between 0 (lowest quality/highest compression) and 1 (highest quality/lowest compression).

### Request Example
```ts
const options = {
  facingMode: 'environment',
  maxHeight: 1080,
  maxWidth: 1920,
  quality: 0.8
};
```

### Response
#### Success Response (Promise<CameraMediaResponse>)
- **base64** (string) - The image data as base64 string.
- **fileSize** (number) - The file size of the image in bytes.
- **height** (number) - The height of the image in pixels.
- **type** (string) - The MIME type of the image.
- **width** (number) - The width of the image in pixels.

#### Response Example
```json
{
  "base64": "...",
  "fileSize": 12345,
  "height": 1080,
  "type": "image/jpeg",
  "width": 1920
}
```
```
Tokens:
Raw