# Cart API


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.

#### Supporting targets
- [pos.home.tile.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render)
- [pos.home.modal.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-modal-render)
- [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render)
- [pos.product-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-render)
- [pos.customer-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render)
- [pos.customer-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-render)
- [pos.customer-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render)
- [pos.order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render)
- [pos.order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-render)
- [pos.order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render)
- [pos.draft-order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render)
- [pos.draft-order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-render)
- [pos.draft-order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)


## CartApi

### CartApiContent

### addAddress

value: `(address: Address) => Promise<void>`

Add an address to the customer (Customer must be present)

### addCartCodeDiscount

value: `(code: string) => Promise<void>`

Add a code discount to the cart

### addCartProperties

value: `(properties: Record<string, string>) => Promise<void>`

Adds custom properties to the cart

### addCustomSale

value: `(customSale: CustomSale) => Promise<string>`

Add a custom sale to the cart

### addLineItem

value: `(variantId: number, quantity: number) => Promise<string>`

Add a line item by variant ID to the cart

### addLineItemProperties

value: `(uuid: string, properties: Record<string, string>) => Promise<void>`

Adds custom properties to the specified line item

### applyCartDiscount

value: `(type: CartDiscountType, title: string, amount?: string) => Promise<void>`

Apply a cart level discount

### bulkAddLineItemProperties

value: `(lineItemProperties: SetLineItemPropertiesInput[]) => Promise<void>`

Adds custom properties to multiple line items at the same time.

### bulkCartUpdate

value: `(cartState: CartUpdateInput) => Promise<Cart>`

Bulk update the cart

### bulkSetLineItemDiscounts

value: `(lineItemDiscounts: SetLineItemDiscountInput[]) => Promise<void>`

Set line item discounts to multiple line items at the same time.

### clearCart

value: `() => Promise<void>`

Clear the cart

### deleteAddress

value: `(addressId: number) => Promise<void>`

Delete an address from the customer (Customer must be present)

### removeAllDiscounts

value: `(disableAutomaticDiscounts: boolean) => Promise<void>`

Remove all cart and line item discounts

### removeCartDiscount

value: `() => Promise<void>`

Remove the cart discount

### removeCartProperties

value: `(keys: string[]) => Promise<void>`

Removes the specified cart properties

### removeCustomer

value: `() => Promise<void>`

Remove the current customer from the cart

### removeLineItem

value: `(uuid: string) => Promise<void>`

Remove the line item at this uuid from the cart

### removeLineItemDiscount

value: `(uuid: string) => Promise<void>`

Remove all discounts from a line item

### removeLineItemProperties

value: `(uuid: string, keys: string[]) => Promise<void>`

Removes the specified line item properties

### setAttributedStaff

value: `(staffId: number) => Promise<void>`

Sets an attributed staff to all line items in the cart.

### setAttributedStaffToLineItem

value: `(staffId: number, lineItemUuid: string) => Promise<void>`

Sets an attributed staff to a specific line items in the cart.

### setCustomer

value: `(customer: Customer) => Promise<void>`

Set the customer in the cart

### setLineItemDiscount

value: `(uuid: string, type: LineItemDiscountType, title: string, amount: string) => Promise<void>`

Add a discount on a line item to the cart

### subscribable

value: `RemoteSubscribable<Cart>`

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.

### updateDefaultAddress

value: `(addressId: number) => Promise<void>`

Update the default address for the customer (Customer must be present)

### Address

### address1

value: `string`


### address2

value: `string`


### city

value: `string`


### company

value: `string`


### country

value: `string`


### countryCode

value: `CountryCode`


### firstName

value: `string`


### lastName

value: `string`


### name

value: `string`


### phone

value: `string`


### province

value: `string`


### provinceCode

value: `string`


### zip

value: `string`


### CountryCode

### AF

value: `AF`


### AX

value: `AX`


### AL

value: `AL`


### DZ

value: `DZ`


### AD

value: `AD`


### AO

value: `AO`


### AI

value: `AI`


### AG

value: `AG`


### AR

value: `AR`


### AM

value: `AM`


### AW

value: `AW`


### AC

value: `AC`


### AU

value: `AU`


### AT

value: `AT`


### AZ

value: `AZ`


### BS

value: `BS`


### BH

value: `BH`


### BD

value: `BD`


### BB

value: `BB`


### BY

value: `BY`


### BE

value: `BE`


### BZ

value: `BZ`


### BJ

value: `BJ`


### BM

value: `BM`


### BT

value: `BT`


### BO

value: `BO`


### BA

value: `BA`


### BW

value: `BW`


### BV

value: `BV`


### BR

value: `BR`


### IO

value: `IO`


### BN

value: `BN`


### BG

value: `BG`


### BF

value: `BF`


### BI

value: `BI`


### KH

value: `KH`


### CA

value: `CA`


### CV

value: `CV`


### BQ

value: `BQ`


### KY

value: `KY`


### CF

value: `CF`


### TD

value: `TD`


### CL

value: `CL`


### CN

value: `CN`


### CX

value: `CX`


### CC

value: `CC`


### CO

value: `CO`


### KM

value: `KM`


### CG

value: `CG`


### CD

value: `CD`


### CK

value: `CK`


### CR

value: `CR`


### HR

value: `HR`


### CU

value: `CU`


### CW

value: `CW`


### CY

value: `CY`


### CZ

value: `CZ`


### CI

value: `CI`


### DK

value: `DK`


### DJ

value: `DJ`


### DM

value: `DM`


### DO

value: `DO`


### EC

value: `EC`


### EG

value: `EG`


### SV

value: `SV`


### GQ

value: `GQ`


### ER

value: `ER`


### EE

value: `EE`


### SZ

value: `SZ`


### ET

value: `ET`


### FK

value: `FK`


### FO

value: `FO`


### FJ

value: `FJ`


### FI

value: `FI`


### FR

value: `FR`


### GF

value: `GF`


### PF

value: `PF`


### TF

value: `TF`


### GA

value: `GA`


### GM

value: `GM`


### GE

value: `GE`


### DE

value: `DE`


### GH

value: `GH`


### GI

value: `GI`


### GR

value: `GR`


### GL

value: `GL`


### GD

value: `GD`


### GP

value: `GP`


### GT

value: `GT`


### GG

value: `GG`


### GN

value: `GN`


### GW

value: `GW`


### GY

value: `GY`


### HT

value: `HT`


### HM

value: `HM`


### VA

value: `VA`


### HN

value: `HN`


### HK

value: `HK`


### HU

value: `HU`


### IS

value: `IS`


### IN

value: `IN`


### ID

value: `ID`


### IR

value: `IR`


### IQ

value: `IQ`


### IE

value: `IE`


### IM

value: `IM`


### IL

value: `IL`


### IT

value: `IT`


### JM

value: `JM`


### JP

value: `JP`


### JE

value: `JE`


### JO

value: `JO`


### KZ

value: `KZ`


### KE

value: `KE`


### KI

value: `KI`


### KP

value: `KP`


### XK

value: `XK`


### KW

value: `KW`


### KG

value: `KG`


### LA

value: `LA`


### LV

value: `LV`


### LB

value: `LB`


### LS

value: `LS`


### LR

value: `LR`


### LY

value: `LY`


### LI

value: `LI`


### LT

value: `LT`


### LU

value: `LU`


### MO

value: `MO`


### MG

value: `MG`


### MW

value: `MW`


### MY

value: `MY`


### MV

value: `MV`


### ML

value: `ML`


### MT

value: `MT`


### MQ

value: `MQ`


### MR

value: `MR`


### MU

value: `MU`


### YT

value: `YT`


### MX

value: `MX`


### MD

value: `MD`


### MC

value: `MC`


### MN

value: `MN`


### ME

value: `ME`


### MS

value: `MS`


### MA

value: `MA`


### MZ

value: `MZ`


### MM

value: `MM`


### NA

value: `NA`


### NR

value: `NR`


### NP

value: `NP`


### NL

value: `NL`


### AN

value: `AN`


### NC

value: `NC`


### NZ

value: `NZ`


### NI

value: `NI`


### NE

value: `NE`


### NG

value: `NG`


### NU

value: `NU`


### NF

value: `NF`


### MK

value: `MK`


### NO

value: `NO`


### OM

value: `OM`


### PK

value: `PK`


### PS

value: `PS`


### PA

value: `PA`


### PG

value: `PG`


### PY

value: `PY`


### PE

value: `PE`


### PH

value: `PH`


### PN

value: `PN`


### PL

value: `PL`


### PT

value: `PT`


### QA

value: `QA`


### CM

value: `CM`


### RE

value: `RE`


### RO

value: `RO`


### RU

value: `RU`


### RW

value: `RW`


### BL

value: `BL`


### SH

value: `SH`


### KN

value: `KN`


### LC

value: `LC`


### MF

value: `MF`


### PM

value: `PM`


### WS

value: `WS`


### SM

value: `SM`


### ST

value: `ST`


### SA

value: `SA`


### SN

value: `SN`


### RS

value: `RS`


### SC

value: `SC`


### SL

value: `SL`


### SG

value: `SG`


### SX

value: `SX`


### SK

value: `SK`


### SI

value: `SI`


### SB

value: `SB`


### SO

value: `SO`


### ZA

value: `ZA`


### GS

value: `GS`


### KR

value: `KR`


### SS

value: `SS`


### ES

value: `ES`


### LK

value: `LK`


### VC

value: `VC`


### SD

value: `SD`


### SR

value: `SR`


### SJ

value: `SJ`


### SE

value: `SE`


### CH

value: `CH`


### SY

value: `SY`


### TW

value: `TW`


### TJ

value: `TJ`


### TZ

value: `TZ`


### TH

value: `TH`


### TL

value: `TL`


### TG

value: `TG`


### TK

value: `TK`


### TO

value: `TO`


### TT

value: `TT`


### TA

value: `TA`


### TN

value: `TN`


### TR

value: `TR`


### TM

value: `TM`


### TC

value: `TC`


### TV

value: `TV`


### UG

value: `UG`


### UA

value: `UA`


### AE

value: `AE`


### GB

value: `GB`


### US

value: `US`


### UM

value: `UM`


### UY

value: `UY`


### UZ

value: `UZ`


### VU

value: `VU`


### VE

value: `VE`


### VN

value: `VN`


### VG

value: `VG`


### WF

value: `WF`


### EH

value: `EH`


### YE

value: `YE`


### ZM

value: `ZM`


### ZW

value: `ZW`


### ZZ

value: `ZZ`


### CustomSale

### price

value: `string`


### quantity

value: `number`


### taxable

value: `boolean`


### title

value: `string`


### SetLineItemPropertiesInput

Parameters for adding custom properties to a line item.

### lineItemUuid

value: `string`

The uuid belonging to the line item which should receive the custom properties.

### properties

value: `Record<string, string>`

The custom properties to apply to the line item.

### CartUpdateInput

### cartDiscount

value: `Discount`


### cartDiscounts

value: `Discount[]`


### customer

value: `Customer`


### lineItems

value: `LineItem[]`


### note

value: `string`


### properties

value: `Record<string, string>`


### Discount

### amount

value: `number`


### discountDescription

value: `string`


### type

value: `string`


### Customer

### id

value: `number`


### LineItem

### attributedUserId

value: `number`


### discounts

value: `Discount[]`


### isGiftCard

value: `boolean`


### price

value: `number`


### productId

value: `number`


### properties

value: `{ [key: string]: string; }`


### quantity

value: `number`


### sku

value: `string`


### taxable

value: `boolean`


### taxLines

value: `TaxLine[]`


### title

value: `string`


### uuid

value: `string`


### variantId

value: `number`


### vendor

value: `string`


### TaxLine

### enabled

value: `boolean`


### price

value: `Money`


### rate

value: `number`


### rateRange

value: `{ min: number; max: number; }`


### title

value: `string`


### uuid

value: `string`


### Money

### amount

value: `number`


### currency

value: `string`


### Cart

### cartDiscount

value: `Discount`


### cartDiscounts

value: `Discount[]`


### customer

value: `Customer`


### grandTotal

value: `string`


### lineItems

value: `LineItem[]`


### note

value: `string`


### properties

value: `Record<string, string>`


### subtotal

value: `string`


### taxTotal

value: `string`


### SetLineItemDiscountInput

Parameters for adding a line item discount.

### lineItemDiscount

value: `LineItemDiscount`

The discount to be applied to the line item.

### lineItemUuid

value: `string`

The uuid belonging to the line item which should receive the discount.

### LineItemDiscount

### amount

value: `string`

The percentage or fixed amount for the discount.

### title

value: `string`

The title of the line item discount.

### type

value: `'Percentage' | 'FixedAmount'`

The discount type.

## Examples


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.

#### Supporting targets
- [pos.home.tile.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render)
- [pos.home.modal.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-modal-render)
- [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render)
- [pos.product-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-render)
- [pos.customer-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render)
- [pos.customer-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-render)
- [pos.customer-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render)
- [pos.order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render)
- [pos.order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-render)
- [pos.order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render)
- [pos.draft-order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render)
- [pos.draft-order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-render)
- [pos.draft-order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)




```tsx

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);
});

```



```tsx
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);
});

```



```tsx
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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx
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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```



```tsx

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);
});

```