Choose a version:

Cart API
APIs

Requires pos.home.tile.render

The Cart API enables UI Extensions to manage and interact with POS cart contents, such as discounts, line items, and customer details. It provides a comprehensive set of functions for adding and removing items, alongside a subscribable object that keeps the UI Extension updated with real-time changes to the cart.

Anchor to cartapiCartApi

Anchor to subscribable subscribable RemoteSubscribable<> required: Provides a subscription to POS cart changes. Provides an initial value and a callback to subscribe to value changes. Currently supports only one subscription. You can utilize makeStatefulSubscribable on a RemoteSubscribable to implement multiple subscriptions. Using makeStatefulSubscribable or the corresponding hooks counts as a subscription.
Anchor to applyCartDiscount applyCartDiscount (type: , title: string, amount?: string) => Promise<void> required: Apply a cart level discount
Anchor to addCartCodeDiscount addCartCodeDiscount (code: string) => Promise<void> required: Add a code discount to the cart
Anchor to removeCartDiscount removeCartDiscount () => Promise<void> required: Remove the cart discount
Anchor to removeAllDiscounts removeAllDiscounts (disableAutomaticDiscounts: boolean) => Promise<void> required: Remove all cart and line item discounts
Anchor to clearCart clearCart () => Promise<void> required: Clear the cart
Anchor to setCustomer setCustomer (customer: ) => Promise<void> required: Set the customer in the cart
Anchor to removeCustomer removeCustomer () => Promise<void> required: Remove the current customer from the cart
Anchor to addCustomSale addCustomSale (customSale: ) => Promise<void> required: Add a custom sale to the cart
Anchor to addLineItem addLineItem (variantId: number, quantity: number) => Promise<void> required: Add a line item by variant ID to the cart
Anchor to removeLineItem removeLineItem (uuid: string) => Promise<void> required: Remove the line item at this uuid from the cart
Anchor to addCartProperties addCartProperties (properties: Record<string, string>) => Promise<void> required: Adds custom properties to the cart
Anchor to removeCartProperties removeCartProperties (keys: string[]) => Promise<void> required: Removes the specified cart properties
Anchor to addLineItemProperties addLineItemProperties (uuid: string, properties: Record<string, string>) => Promise<void> required: Adds custom properties to the specified line item
Anchor to bulkAddLineItemProperties bulkAddLineItemProperties (lineItemProperties: []) => Promise<void> required: Adds custom properties to multiple line items at the same time.
Anchor to removeLineItemProperties removeLineItemProperties (uuid: string, keys: string[]) => Promise<void> required: Removes the specified line item properties
Anchor to setLineItemDiscount setLineItemDiscount (uuid: string, type: , title: string, amount: string) => Promise<void> required: Add a discount on a line item to the cart
Anchor to bulkSetLineItemDiscounts bulkSetLineItemDiscounts (lineItemDiscounts: []) => Promise<void> required: Set line item discounts to multiple line items at the same time.
Anchor to setAttributedStaff setAttributedStaff (staffId: number) => Promise<void> required: Sets an attributed staff to all line items in the cart.
Anchor to setAttributedStaffToLineItem setAttributedStaffToLineItem (staffId: number, lineItemUuid: string) => Promise<void> required: Sets an attributed staff to a specific line items in the cart.
Anchor to removeLineItemDiscount removeLineItemDiscount (uuid: string) => Promise<void> required: Remove all discounts from a line item
Anchor to addAddress addAddress (address: ) => Promise<void> required: Add an address to the customer (Customer must be present)
Anchor to deleteAddress deleteAddress (addressId: number) => Promise<void> required: Delete an address from the customer (Customer must be present)
Anchor to updateDefaultAddress updateDefaultAddress (addressId: number) => Promise<void> required: Update the default address for the customer (Customer must be present)

Cart

subtotal
```
string
```
taxTotal
```
string
```
grandTotal
```
string
```
note
```
string
```
cartDiscount
```
Discount
```
cartDiscounts
```
Discount[]
```
customer
```
Customer
```
lineItems
```
LineItem[]
```
properties
```
Record<string, string>
```

export interface Cart {
  subtotal: string;
  taxTotal: string;
  grandTotal: string;
  note?: string;
  cartDiscount?: Discount;
  cartDiscounts: Discount[];
  customer?: Customer;
  lineItems: LineItem[];
  properties: Record<string, string>;
}

Discount

amount
```
number
```
discountDescription
```
string
```
type
```
string
```

export interface Discount {
  amount: number;
  discountDescription?: string;
  type?: string;
}

Customer

id
```
number
```
email
```
string
```
firstName
```
string
```
lastName
```
string
```
note
```
string
```

export interface Customer {
  id: number;
  email?: string;
  firstName?: string;
  lastName?: string;
  note?: string;
}

LineItem

uuid
```
string
```
price
```
number
```
quantity
```
number
```
title
```
string
```
variantId
```
number
```
productId
```
number
```
discounts
```
Discount[]
```
taxable
```
boolean
```
sku
```
string
```
vendor
```
string
```
properties
```
{ [key: string]: string; }
```
isGiftCard
```
boolean
```

export interface LineItem {
  uuid: string;
  price?: number;
  quantity: number;
  title?: string;
  variantId?: number;
  productId?: number;
  discounts: Discount[];
  taxable: boolean;
  sku?: string;
  vendor?: string;
  properties: {[key: string]: string};
  isGiftCard: boolean;
}

CartDiscountType

'Percentage' | 'FixedAmount' | 'Code'

CustomSale

quantity
```
number
```
title
```
string
```
price
```
string
```
taxable
```
boolean
```

export interface CustomSale {
  quantity: number;
  title: string;
  price: string;
  taxable: boolean;
}

SetLineItemPropertiesInput

Parameters for adding custom properties to a line item.

lineItemUuid
The uuid belonging to the line item which should receive the custom properties.
```
string
```
properties
The custom properties to apply to the line item.
```
Record<string, string>
```

export interface SetLineItemPropertiesInput {
  /**
   * The uuid belonging to the line item which should receive the custom properties.
   */
  lineItemUuid: string;
  /**
   * The custom properties to apply to the line item.
   */
  properties: Record<string, string>;
}

LineItemDiscountType

'Percentage' | 'FixedAmount'

SetLineItemDiscountInput

Parameters for adding a line item discount.

lineItemUuid
The uuid belonging to the line item which should receive the discount.
```
string
```
lineItemDiscount
The discount to be applied to the line item.
```
LineItemDiscount
```

export interface SetLineItemDiscountInput {
  /**
   * The uuid belonging to the line item which should receive the discount.
   */
  lineItemUuid: string;
  /**
   * The discount to be applied to the line item.
   */
  lineItemDiscount: LineItemDiscount;
}

LineItemDiscount

title
The title of the line item discount.
```
string
```
type
The discount type.
```
"Percentage" | "FixedAmount"
```
amount
The percentage or fixed amount for the discount.
```
string
```

export interface LineItemDiscount {
  /**
   * The title of the line item discount.
   */
  title: string;
  /**
   * The discount type.
   */
  type: 'Percentage' | 'FixedAmount';
  /**
   * The percentage or fixed amount for the discount.
   */
  amount: string;
}

Address

address1
```
string
```
address2
```
string
```
city
```
string
```
company
```
string
```
firstName
```
string
```
lastName
```
string
```
phone
```
string
```
province
```
string
```
country
```
string
```
zip
```
string
```
name
```
string
```
provinceCode
```
string
```
countryCode
```
CountryCode
```

export interface Address {
  address1?: string;
  address2?: string;
  city?: string;
  company?: string;
  firstName?: string;
  lastName?: string;
  phone?: string;
  province?: string;
  country?: string;
  zip?: string;
  name?: string;
  provinceCode?: string;
  countryCode?: CountryCode;
}

Was this section helpful?

Anchor to examplesExamples

Examples of using the Cart API

Anchor to example-apply-a-cart-level-discountApply a cart level discount

Anchor to example-apply-a-cart-level-discount-codeApply a cart level discount code

Anchor to example-remove-all-the-discounts-on-the-cart-and-line-itemsRemove all the discounts on the cart and line items

Anchor to example-set-a-custom-discount-on-a-line-itemSet a custom discount on a line item

Anchor to example-set-a-custom-discount-on-multiple-line-itemsSet a custom discount on multiple line items

Anchor to example-remove-a-discount-on-a-line-itemRemove a discount on a line item

Anchor to example-clear-the-entire-cartClear the entire cart

Anchor to example-set-the-customer-in-the-cartSet the customer in the cart

Anchor to example-remove-the-customer-in-the-cartRemove the customer in the cart

Anchor to example-add-a-custom-sale-to-the-cartAdd a custom sale to the cart

Anchor to example-add-a-line-item-to-the-cartAdd a line item to the cart

Anchor to example-remove-a-line-item-from-the-cartRemove a line item from the cart

Anchor to example-add-custom-properties-to-the-cartAdd custom properties to the cart

Anchor to example-remove-custom-properties-from-the-cartRemove custom properties from the cart

Anchor to example-add-custom-properties-to-a-line-itemAdd custom properties to a line item

Anchor to example-add-custom-properties-to-multiple-line-itemsAdd custom properties to multiple line items

Anchor to example-remove-custom-properties-from-a-line-itemRemove custom properties from a line item

Anchor to example-set-an-attributed-staff-member-on-the-cartSet an attributed staff member on the cart

Anchor to example-set-an-attributed-staff-member-on-a-line-itemSet an attributed staff member on a line item

Anchor to example-add-an-address-to-the-customer-in-the-cartAdd an address to the customer in the cart

Anchor to example-delete-an-address-corresponding-to-an-idDelete an address corresponding to an ID

Anchor to example-set-the-default-address-of-the-customer-in-the-cartSet the default address of the customer in the cart

Was this section helpful?

Subscribe to cart changes.

import React from 'react';

import {

reactExtension,

useApi,

Tile,

useCartSubscription

} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {

const cart = useCartSubscription();

return (

<Tile

title='My App'

subtitle={`${cart.lineItems.length} line items in cart`}

enabled

);

};

export default reactExtension(

'pos.home.tile.render',

() => <SmartGridTile />

);

Examples

Subscribe to cart changes.

React


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

const SmartGridTile = () => {
  const cart = useCartSubscription();

  return (
    <Tile 
      title='My App' 
      subtitle={`${cart.lineItems.length} line items in cart`} 
      enabled
    />
  );
};

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

TS

import {Cart, Tile, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: `${api.cart.subscribable.initial.lineItems.length} line items in cart`,
    enabled: true,
  });

  api.cart.subscribable.subscribe((newCart: Cart) => {
    tile.updateProps({
      subtitle: `${newCart.lineItems.length > 0} line items in cart`,
    });
  });

  root.append(tile);
});

Apply a cart level discount

React

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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.applyCartDiscount('Percentage', 'Summer discount', '10')}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.applyCartDiscount('Percentage', 'Summer discount', '10');
    },
  });

  root.append(tile);
});

Apply a cart level discount code

React

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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.addCartCodeDiscount('SUMMER_2024')} 
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.addCartCodeDiscount('SUMMER_2024');
    },
  });

  root.append(tile);
});

Remove all the discounts on the cart and line items

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.removeAllDiscounts(true)}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.removeAllDiscounts(true);
    },
  });

  root.append(tile);
});

Set a custom discount on a line item

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.setLineItemDiscount('aa-1234567', 'Percentage', 'Summer discount', '10')}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.setLineItemDiscount(
        'aa-1234567',
        'Percentage',
        'Summer discount',
        '10',
      );
    },
  });

  root.append(tile);
});

Set a custom discount on multiple line items

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.bulkSetLineItemDiscounts([
        {
          lineItemUuid: 'aa-1234567',
          lineItemDiscount: {
            title: 'Summer 2024',
            amount: '10',
            type: 'Percentage',
          },
        },
        {
          lineItemUuid: 'bb-1234567',
          lineItemDiscount: {
            title: 'Shorts sale',
            amount: '15',
            type: 'FixedAmount',
          },
        },
      ])}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.bulkSetLineItemDiscounts([
        {
          lineItemUuid: 'aa-1234567',
          lineItemDiscount: {
            title: 'Summer 2024',
            amount: '10',
            type: 'Percentage',
          },
        },
        {
          lineItemUuid: 'bb-1234567',
          lineItemDiscount: {
            title: 'Shorts sale',
            amount: '15',
            type: 'FixedAmount',
          },
        },
      ]);
    },
  });

  root.append(tile);
});

Remove a discount on a line item

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.removeLineItemDiscount('aa-1234567')}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.removeLineItemDiscount('aa-1234567');
    },
  });

  root.append(tile);
});

Clear the entire cart

React

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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.clearCart()}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.clearCart();
    },
  });

  root.append(tile);
});

Set the customer in the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.setCustomer({
        id: 1,
      })}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.setCustomer({
        id: 1,
      });
    },
  });

  root.append(tile);
});

Remove the customer in the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.removeCustomer()}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.removeCustomer();
    },
  });

  root.append(tile);
});

Add a custom sale to the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.addCustomSale({
        title: 'New product',
        quantity: 1,
        price: '10.00',
        taxable: true,
      })}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.addCustomSale({
        title: 'New product',
        quantity: 1,
        price: '10.00',
        taxable: true,
      });
    },
  });

  root.append(tile);
});

Add a line item to the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.addLineItem(12345678, 1)}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.addLineItem(12345678, 1);
    },
  });

  root.append(tile);
});

Remove a line item from the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.removeLineItem('aa-1234567')}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.removeLineItem('aa-1234567');
    },
  });

  root.append(tile);
});

Add custom properties to the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.addCartProperties({Engraving: 'John Doe'})}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart action',
    enabled: true,
    onPress: () => {
      api.cart.addCartProperties({Engraving: 'John Doe'});
    },
  });

  root.append(tile);
});

Remove custom properties from the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.removeCartProperties(['Engraving'])}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.removeCartProperties(['Engraving']);
    },
  });

  root.append(tile);
});

Add custom properties to a line item

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.addLineItemProperties('aa-1234567', {Engraving: 'John Doe'})}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.addLineItemProperties('aa-1234567', {Engraving: 'John Doe'});
    },
  });

  root.append(tile);
});

Add custom properties to multiple line items

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.bulkAddLineItemProperties([
        {lineItemUuid: 'aa-1234567', properties: {Engraving: 'John Doe'}},
        {lineItemUuid: 'bb-001234567', properties: {Engraving: 'Jane Doe'}}
      ])}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.bulkAddLineItemProperties([
        {lineItemUuid: 'aa-1234567', properties: {Engraving: 'John Doe'}},
        {lineItemUuid: 'bb-001234567', properties: {Engraving: 'Jane Doe'}},
      ]);
    },
  });

  root.append(tile);
});

Remove custom properties from a line item

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.removeLineItemProperties('aa-1234567', ['Engraving'])}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.removeLineItemProperties('aa-1234567', ['Engraving']);
    },
  });

  root.append(tile);
});

Set an attributed staff member on the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.setAttributedStaff(123456)}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.setAttributedStaff(123456);
    },
  });

  root.append(tile);
});

Set an attributed staff member on a line item

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.setAttributedStaffToLineItem(123456, 'aa-1234567')}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.setAttributedStaffToLineItem(123456, 'aa-1234567');
    },
  });

  root.append(tile);
});

Add an address to the customer in the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.addAddress({
        address1: '123456 Main Street', 
        city: 'Ottawa', 
        province: 'Ontario',
        firstName: 'John',
        lastName: 'Doe',
        country: 'Canada'
      })}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.addAddress({
        address1: '123456 Main Street',
        city: 'Ottawa',
        province: 'Ontario',
        firstName: 'John',
        lastName: 'Doe',
        country: 'Canada',
      });
    },
  });

  root.append(tile);
});

Delete an address corresponding to an ID

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.deleteAddress(123456)}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.deleteAddress(123456);
    },
  });

  root.append(tile);
});

Set the default address of the customer in the cart

React


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

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

  return (
    <Tile 
      title='My App' 
      subtitle='Call cart function' 
      enabled 
      onPress={() => api.cart.updateDefaultAddress(123456)}
    />
  );
};

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

TS

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

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: 'Call cart function',
    enabled: true,
    onPress: () => {
      api.cart.updateDefaultAddress(123456);
    },
  });

  root.append(tile);
});

Cart APIAPIs

Anchor to cartapiCartApi

Cart

Discount

Customer

LineItem

CartDiscountType

CustomSale

SetLineItemPropertiesInput

LineItemDiscountType

SetLineItemDiscountInput

LineItemDiscount

Address

Anchor to examplesExamples

Examples

Subscribe to cart changes.

React

TS

Apply a cart level discount

React

TS

Apply a cart level discount code

React

TS

Remove all the discounts on the cart and line items

React

TS

Set a custom discount on a line item

React

TS

Set a custom discount on multiple line items

React

TS

Remove a discount on a line item

React

TS

Clear the entire cart

React

TS

Set the customer in the cart

React

TS

Remove the customer in the cart

React

TS

Add a custom sale to the cart

React

TS

Add a line item to the cart

React

TS

Remove a line item from the cart

React

TS

Add custom properties to the cart

React

TS

Remove custom properties from the cart

React

TS

Add custom properties to a line item

React

TS

Add custom properties to multiple line items

React

TS

Remove custom properties from a line item

React

TS

Set an attributed staff member on the cart

React

TS

Set an attributed staff member on a line item

React

TS

Add an address to the customer in the cart

React

TS

Delete an address corresponding to an ID

React

Cart API
APIs