Resolution targets

Use a resolution target to build the interface where staff address the Required and Recommended findings that an Intercept API callback returns. Your target reads the intercepted event and saves pending work through the Resolution API. Shopify Point of Sale (POS) provides the surrounding navigation and proceed controls, and runs validation again after staff proceed.

Each intercept event requires a resolution target, even when staff fix the issue with a native Shopify POS action, such as adding a cart note. In that case, use the target to tell staff what to do.

Anchor to Use casesUse cases

• Check each cart line: Collect a required serial check and recommended inspection notes for each cart line in the same interface. See Build a cart validation UI extension.
• Confirm a cash count: Let staff confirm a count before Shopify POS accepts a large cash payment. See Build a payment validation UI extension.

Anchor to Available targetsAvailable targets

Each target needs a matching intercepts declaration under pos.app.ready.data. See Configuration rules.

Anchor to Cart validations resolution Cart validations resolution target

pos.cart.validations.resolution.render

Renders an interface for staff to address cart findings before checkout. Staff can tap the cart validation banner to open it.

The Resolution API event contains {cart}.

Examples

Show the cart that needs review

jsx

Copy

1

2

3

4

5

6

7

8

9

10

11

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

const Extension = () => {

const {cart} = shopify.resolution.event.value;

return <s-text>Items to review: {cart.lineItems.length}</s-text>;

};

Anchor to Payment validations resolution Payment validations resolution target

pos.payment.validations.resolution.render

Renders an interface for staff to address findings before a payment proceeds.

The Resolution API event contains {paymentMethod, amount}.

Examples

Read the payment method and amount

jsx

Copy

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

const Extension = () => {

const {paymentMethod, amount} = shopify.resolution.event.value;

return (

<s-text>

{paymentMethod.type}: {amount.amount} {amount.currencyCode}

</s-text>

);

};

Anchor to Supported APIsSupported APIs

Anchor to Supported componentsSupported components

Both resolution targets support these components: Badge, Banner, Box, Button, Choice, ChoiceList, Clickable, DateField, DatePicker, DateSpinner, Divider, EmailField, Embed, EmptyState, Heading, Icon, Image, Link, Modal, NumberField, POSList, ScrollBox, SearchField, Section, Spinner, Stack, Switch, Tab, TabList, TabPanel, Tabs, Text, TextArea, TextField, TimeField, and TimePicker.

Anchor to LimitationsLimitations

• In resolution targets, Button doesn't support the primary variant. A button with variant="primary" renders with the default auto variant.

Anchor to RelatedRelated

TutorialBuild a cart validation UI extension

TutorialBuild a payment validation UI extension

ReferenceIntercept API

ReferenceResolution API