Choose a version:

Cart API
APIs

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

Anchor to cartapiCartApi

Anchor to addAddress addAddress (address: ) => Promise<void> required: Add an address to the customer (Customer must be present)
Anchor to addCartCodeDiscount addCartCodeDiscount (code: string) => Promise<void> required: Add a code discount to the cart
Anchor to addCartProperties addCartProperties (properties: Record<string, string>) => Promise<void> required: Adds custom properties to 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 addLineItemProperties addLineItemProperties (uuid: string, properties: Record<string, string>) => Promise<void> required: Adds custom properties to the specified line item
Anchor to applyCartDiscount applyCartDiscount (type: , title: string, amount?: string) => Promise<void> required: Apply a cart level discount
Anchor to bulkAddLineItemProperties bulkAddLineItemProperties (lineItemProperties: []) => Promise<void> required: Adds custom properties to multiple line items at the same time.
Anchor to bulkSetLineItemDiscounts bulkSetLineItemDiscounts (lineItemDiscounts: []) => Promise<void> required: Set line item discounts to multiple line items at the same time.
Anchor to clearCart clearCart () => Promise<void> required: Clear the cart
Anchor to deleteAddress deleteAddress (addressId: number) => Promise<void> required: Delete an address from the customer (Customer must be present)
Anchor to removeAllDiscounts removeAllDiscounts (disableAutomaticDiscounts: boolean) => Promise<void> required: Remove all cart and line item discounts
Anchor to removeCartDiscount removeCartDiscount () => Promise<void> required: Remove the cart discount
Anchor to removeCartProperties removeCartProperties (keys: string[]) => Promise<void> required: Removes the specified cart properties
Anchor to removeCustomer removeCustomer () => Promise<void> required: Remove the current customer from the cart
Anchor to removeLineItem removeLineItem (uuid: string) => Promise<void> required: Remove the line item at this uuid from the cart
Anchor to removeLineItemDiscount removeLineItemDiscount (uuid: string) => Promise<void> required: Remove all discounts from a line item
Anchor to removeLineItemProperties removeLineItemProperties (uuid: string, keys: string[]) => Promise<void> required: Removes the specified line item properties
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 setCustomer setCustomer (customer: ) => Promise<void> required: Set the customer in the cart
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 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 updateDefaultAddress updateDefaultAddress (addressId: number) => Promise<void> required: Update the default address for the customer (Customer must be present)

CartApiContent

addAddress
Add an address to the customer (Customer must be present)
```
(address: Address) => Promise<void>
```
addCartCodeDiscount
Add a code discount to the cart
```
(code: string) => Promise<void>
```

addCartProperties

Adds custom properties to the cart

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

addCustomSale
Add a custom sale to the cart
```
(customSale: CustomSale) => Promise<void>
```

addLineItem

Add a line item by variant ID to the cart

(variantId: number, quantity: number) => Promise<void>

addLineItemProperties
Adds custom properties to the specified line item
```
(uuid: string, properties: Record<string, string>) => Promise<void>
```

applyCartDiscount

Apply a cart level discount

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

bulkAddLineItemProperties
Adds custom properties to multiple line items at the same time.
```
(lineItemProperties: SetLineItemPropertiesInput[]) => Promise<void>
```
bulkSetLineItemDiscounts
Set line item discounts to multiple line items at the same time.
```
(lineItemDiscounts: SetLineItemDiscountInput[]) => Promise<void>
```
clearCart
Clear the cart
```
() => Promise<void>
```
deleteAddress
Delete an address from the customer (Customer must be present)
```
(addressId: number) => Promise<void>
```
removeAllDiscounts
Remove all cart and line item discounts
```
(disableAutomaticDiscounts: boolean) => Promise<void>
```
removeCartDiscount
Remove the cart discount
```
() => Promise<void>
```
removeCartProperties
Removes the specified cart properties
```
(keys: string[]) => Promise<void>
```
removeCustomer
Remove the current customer from the cart
```
() => Promise<void>
```
removeLineItem
Remove the line item at this uuid from the cart
```
(uuid: string) => Promise<void>
```
removeLineItemDiscount
Remove all discounts from a line item
```
(uuid: string) => Promise<void>
```
removeLineItemProperties
Removes the specified line item properties
```
(uuid: string, keys: string[]) => Promise<void>
```
setAttributedStaff
Sets an attributed staff to all line items in the cart.
```
(staffId: number) => Promise<void>
```
setAttributedStaffToLineItem
Sets an attributed staff to a specific line items in the cart.
```
(staffId: number, lineItemUuid: string) => Promise<void>
```
setCustomer
Set the customer in the cart
```
(customer: Customer) => Promise<void>
```

setLineItemDiscount

Add a discount on a line item to the cart

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

subscribable
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.
```
RemoteSubscribable<Cart>
```
updateDefaultAddress
Update the default address for the customer (Customer must be present)
```
(addressId: number) => Promise<void>
```

export interface CartApiContent {
  /** 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.
   */
  subscribable: RemoteSubscribable<Cart>;

  /** Apply a cart level discount
   * @param type the type of discount applied (example: 'Percentage')
   * @param title the title attributed with the discount
   * @param amount the percentage or fixed monetary amount deducted with the discount. Pass in `undefined` if using discount codes.
   */
  applyCartDiscount(
    type: CartDiscountType,
    title: string,
    amount?: string,
  ): Promise<void>;

  /** Add a code discount to the cart
   * @param code the code for the discount to add to the cart
   */
  addCartCodeDiscount(code: string): Promise<void>;

  /** Remove the cart discount */
  removeCartDiscount(): Promise<void>;

  /** Remove all cart and line item discounts
   * @param disableAutomaticDiscounts Whether or not automatic discounts should be enabled after removing the discounts.
   */
  removeAllDiscounts(disableAutomaticDiscounts: boolean): Promise<void>;

  /** Clear the cart */
  clearCart(): Promise<void>;

  /** Set the customer in the cart
   * @param customer the customer object to add to the cart
   */
  setCustomer(customer: Customer): Promise<void>;

  /** Remove the current customer from the cart */
  removeCustomer(): Promise<void>;

  /** Add a custom sale to the cart
   * @param customSale the custom sale object to add to the cart
   */
  addCustomSale(customSale: CustomSale): Promise<void>;

  /** Add a line item by variant ID to the cart
   * @param variantId the product variant's numeric ID to add to the cart
   * @param quantity the number of this variant to add to the cart
   */
  addLineItem(variantId: number, quantity: number): Promise<void>;

  /** Remove the line item at this uuid from the cart
   * @param uuid the uuid of the line item that should be removed
   */
  removeLineItem(uuid: string): Promise<void>;

  /** Adds custom properties to the cart
   * @param properties the custom key to value object to attribute to the cart
   */
  addCartProperties(properties: Record<string, string>): Promise<void>;

  /** Removes the specified cart properties
   * @param keys the collection of keys to be removed from the cart properties
   */
  removeCartProperties(keys: string[]): Promise<void>;

  /** Adds custom properties to the specified line item
   * @param uuid the uuid of the line item to which the properties should be stringd
   * @param properties the custom key to value object to attribute to the line item
   */
  addLineItemProperties(
    uuid: string,
    properties: Record<string, string>,
  ): Promise<void>;

  /** Adds custom properties to multiple line items at the same time.
   * @param lineItemProperties the collection of custom line item properties to apply to their respective line items.
   */
  bulkAddLineItemProperties(
    lineItemProperties: SetLineItemPropertiesInput[],
  ): Promise<void>;

  /** Removes the specified line item properties
   * @param uuid the uuid of the line item to which the properties should be removed
   * @param keys the collection of keys to be removed from the line item properties
   */
  removeLineItemProperties(uuid: string, keys: string[]): Promise<void>;

  /** Add a discount on a line item to the cart
   * @param uuid the uuid of the line item that should receive a discount
   * @param type the type of discount applied (example: 'Percentage')
   * @param title the title attributed with the discount
   * @param amount the percentage or fixed monetary amount deducted with the discout
   */
  setLineItemDiscount(
    uuid: string,
    type: LineItemDiscountType,
    title: string,
    amount: string,
  ): Promise<void>;

  /** Set line item discounts to multiple line items at the same time.
   * @param lineItemDiscounts a map of discounts to add. They key is the uuid of the line item you want to add the discount to. The value is the discount input.
   */
  bulkSetLineItemDiscounts(
    lineItemDiscounts: SetLineItemDiscountInput[],
  ): Promise<void>;

  /** Sets an attributed staff to all line items in the cart.
   * @param staffId the ID of the staff. Providing undefined will clear the attributed staff from all line items.
   */
  setAttributedStaff(staffId: number | undefined): Promise<void>;

  /** Sets an attributed staff to a specific line items in the cart.
   * @param staffId the ID of the staff. Providing undefined will clear the attributed staff on the line item.
   * @param lineItemUuid the UUID of the line item.
   */
  setAttributedStaffToLineItem(
    staffId: number | undefined,
    lineItemUuid: string,
  ): Promise<void>;

  /** Remove all discounts from a line item
   * @param uuid the uuid of the line item whose discounts should be removed
   */
  removeLineItemDiscount(uuid: string): Promise<void>;

  /** Add an address to the customer (Customer must be present)
   * @param address the address object to add to the customer in cart
   */
  addAddress(address: Address): Promise<void>;

  /**
   * Delete an address from the customer (Customer must be present)
   * @param addressId the address ID to delete
   */
  deleteAddress(addressId: number): Promise<void>;

  /** Update the default address for the customer (Customer must be present)
   * @param addressId the address ID to set as the default address
   */
  updateDefaultAddress(addressId: number): Promise<void>;
}

Address

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

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

CountryCode

AF
```
AF
```
AX
```
AX
```
AL
```
AL
```
DZ
```
DZ
```
AD
```
AD
```
AO
```
AO
```
AI
```
AI
```
AG
```
AG
```
AR
```
AR
```
AM
```
AM
```
AW
```
AW
```
AC
```
AC
```
AU
```
AU
```
AT
```
AT
```
AZ
```
AZ
```
BS
```
BS
```
BH
```
BH
```
BD
```
BD
```
BB
```
BB
```
BY
```
BY
```
BE
```
BE
```
BZ
```
BZ
```
BJ
```
BJ
```
BM
```
BM
```
BT
```
BT
```
BO
```
BO
```
BA
```
BA
```
BW
```
BW
```
BV
```
BV
```
BR
```
BR
```
IO
```
IO
```
BN
```
BN
```
BG
```
BG
```
BF
```
BF
```
BI
```
BI
```
KH
```
KH
```
CA
```
CA
```
CV
```
CV
```
BQ
```
BQ
```
KY
```
KY
```
CF
```
CF
```
TD
```
TD
```
CL
```
CL
```
CN
```
CN
```
CX
```
CX
```
CC
```
CC
```
CO
```
CO
```
KM
```
KM
```
CG
```
CG
```
CD
```
CD
```
CK
```
CK
```
CR
```
CR
```
HR
```
HR
```
CU
```
CU
```
CW
```
CW
```
CY
```
CY
```
CZ
```
CZ
```
CI
```
CI
```
DK
```
DK
```
DJ
```
DJ
```
DM
```
DM
```
DO
```
DO
```
EC
```
EC
```
EG
```
EG
```
SV
```
SV
```
GQ
```
GQ
```
ER
```
ER
```
EE
```
EE
```
SZ
```
SZ
```
ET
```
ET
```
FK
```
FK
```
FO
```
FO
```
FJ
```
FJ
```
FI
```
FI
```
FR
```
FR
```
GF
```
GF
```
PF
```
PF
```
TF
```
TF
```
GA
```
GA
```
GM
```
GM
```
GE
```
GE
```
DE
```
DE
```
GH
```
GH
```
GI
```
GI
```
GR
```
GR
```
GL
```
GL
```
GD
```
GD
```
GP
```
GP
```
GT
```
GT
```
GG
```
GG
```
GN
```
GN
```
GW
```
GW
```
GY
```
GY
```
HT
```
HT
```
HM
```
HM
```
VA
```
VA
```
HN
```
HN
```
HK
```
HK
```
HU
```
HU
```
IS
```
IS
```
IN
```
IN
```
ID
```
ID
```
IR
```
IR
```
IQ
```
IQ
```
IE
```
IE
```
IM
```
IM
```
IL
```
IL
```
IT
```
IT
```
JM
```
JM
```
JP
```
JP
```
JE
```
JE
```
JO
```
JO
```
KZ
```
KZ
```
KE
```
KE
```
KI
```
KI
```
KP
```
KP
```
XK
```
XK
```
KW
```
KW
```
KG
```
KG
```
LA
```
LA
```
LV
```
LV
```
LB
```
LB
```
LS
```
LS
```
LR
```
LR
```
LY
```
LY
```
LI
```
LI
```
LT
```
LT
```
LU
```
LU
```
MO
```
MO
```
MG
```
MG
```
MW
```
MW
```
MY
```
MY
```
MV
```
MV
```
ML
```
ML
```
MT
```
MT
```
MQ
```
MQ
```
MR
```
MR
```
MU
```
MU
```
YT
```
YT
```
MX
```
MX
```
MD
```
MD
```
MC
```
MC
```
MN
```
MN
```
ME
```
ME
```
MS
```
MS
```
MA
```
MA
```
MZ
```
MZ
```
MM
```
MM
```
NA
```
NA
```
NR
```
NR
```
NP
```
NP
```
NL
```
NL
```
AN
```
AN
```
NC
```
NC
```
NZ
```
NZ
```
NI
```
NI
```
NE
```
NE
```
NG
```
NG
```
NU
```
NU
```
NF
```
NF
```
MK
```
MK
```
NO
```
NO
```
OM
```
OM
```
PK
```
PK
```
PS
```
PS
```
PA
```
PA
```
PG
```
PG
```
PY
```
PY
```
PE
```
PE
```
PH
```
PH
```
PN
```
PN
```
PL
```
PL
```
PT
```
PT
```
QA
```
QA
```
CM
```
CM
```
RE
```
RE
```
RO
```
RO
```
RU
```
RU
```
RW
```
RW
```
BL
```
BL
```
SH
```
SH
```
KN
```
KN
```
LC
```
LC
```
MF
```
MF
```
PM
```
PM
```
WS
```
WS
```
SM
```
SM
```
ST
```
ST
```
SA
```
SA
```
SN
```
SN
```
RS
```
RS
```
SC
```
SC
```
SL
```
SL
```
SG
```
SG
```
SX
```
SX
```
SK
```
SK
```
SI
```
SI
```
SB
```
SB
```
SO
```
SO
```
ZA
```
ZA
```
GS
```
GS
```
KR
```
KR
```
SS
```
SS
```
ES
```
ES
```
LK
```
LK
```
VC
```
VC
```
SD
```
SD
```
SR
```
SR
```
SJ
```
SJ
```
SE
```
SE
```
CH
```
CH
```
SY
```
SY
```
TW
```
TW
```
TJ
```
TJ
```
TZ
```
TZ
```
TH
```
TH
```
TL
```
TL
```
TG
```
TG
```
TK
```
TK
```
TO
```
TO
```
TT
```
TT
```
TA
```
TA
```
TN
```
TN
```
TR
```
TR
```
TM
```
TM
```
TC
```
TC
```
TV
```
TV
```
UG
```
UG
```
UA
```
UA
```
AE
```
AE
```
GB
```
GB
```
US
```
US
```
UM
```
UM
```
UY
```
UY
```
UZ
```
UZ
```
VU
```
VU
```
VE
```
VE
```
VN
```
VN
```
VG
```
VG
```
WF
```
WF
```
EH
```
EH
```
YE
```
YE
```
ZM
```
ZM
```
ZW
```
ZW
```
ZZ
```
ZZ
```

export enum CountryCode {
  AF = 'AF',
  AX = 'AX',
  AL = 'AL',
  DZ = 'DZ',
  AD = 'AD',
  AO = 'AO',
  AI = 'AI',
  AG = 'AG',
  AR = 'AR',
  AM = 'AM',
  AW = 'AW',
  AC = 'AC',
  AU = 'AU',
  AT = 'AT',
  AZ = 'AZ',
  BS = 'BS',
  BH = 'BH',
  BD = 'BD',
  BB = 'BB',
  BY = 'BY',
  BE = 'BE',
  BZ = 'BZ',
  BJ = 'BJ',
  BM = 'BM',
  BT = 'BT',
  BO = 'BO',
  BA = 'BA',
  BW = 'BW',
  BV = 'BV',
  BR = 'BR',
  IO = 'IO',
  BN = 'BN',
  BG = 'BG',
  BF = 'BF',
  BI = 'BI',
  KH = 'KH',
  CA = 'CA',
  CV = 'CV',
  BQ = 'BQ',
  KY = 'KY',
  CF = 'CF',
  TD = 'TD',
  CL = 'CL',
  CN = 'CN',
  CX = 'CX',
  CC = 'CC',
  CO = 'CO',
  KM = 'KM',
  CG = 'CG',
  CD = 'CD',
  CK = 'CK',
  CR = 'CR',
  HR = 'HR',
  CU = 'CU',
  CW = 'CW',
  CY = 'CY',
  CZ = 'CZ',
  CI = 'CI',
  DK = 'DK',
  DJ = 'DJ',
  DM = 'DM',
  DO = 'DO',
  EC = 'EC',
  EG = 'EG',
  SV = 'SV',
  GQ = 'GQ',
  ER = 'ER',
  EE = 'EE',
  SZ = 'SZ',
  ET = 'ET',
  FK = 'FK',
  FO = 'FO',
  FJ = 'FJ',
  FI = 'FI',
  FR = 'FR',
  GF = 'GF',
  PF = 'PF',
  TF = 'TF',
  GA = 'GA',
  GM = 'GM',
  GE = 'GE',
  DE = 'DE',
  GH = 'GH',
  GI = 'GI',
  GR = 'GR',
  GL = 'GL',
  GD = 'GD',
  GP = 'GP',
  GT = 'GT',
  GG = 'GG',
  GN = 'GN',
  GW = 'GW',
  GY = 'GY',
  HT = 'HT',
  HM = 'HM',
  VA = 'VA',
  HN = 'HN',
  HK = 'HK',
  HU = 'HU',
  IS = 'IS',
  IN = 'IN',
  ID = 'ID',
  IR = 'IR',
  IQ = 'IQ',
  IE = 'IE',
  IM = 'IM',
  IL = 'IL',
  IT = 'IT',
  JM = 'JM',
  JP = 'JP',
  JE = 'JE',
  JO = 'JO',
  KZ = 'KZ',
  KE = 'KE',
  KI = 'KI',
  KP = 'KP',
  XK = 'XK',
  KW = 'KW',
  KG = 'KG',
  LA = 'LA',
  LV = 'LV',
  LB = 'LB',
  LS = 'LS',
  LR = 'LR',
  LY = 'LY',
  LI = 'LI',
  LT = 'LT',
  LU = 'LU',
  MO = 'MO',
  MG = 'MG',
  MW = 'MW',
  MY = 'MY',
  MV = 'MV',
  ML = 'ML',
  MT = 'MT',
  MQ = 'MQ',
  MR = 'MR',
  MU = 'MU',
  YT = 'YT',
  MX = 'MX',
  MD = 'MD',
  MC = 'MC',
  MN = 'MN',
  ME = 'ME',
  MS = 'MS',
  MA = 'MA',
  MZ = 'MZ',
  MM = 'MM',
  NA = 'NA',
  NR = 'NR',
  NP = 'NP',
  NL = 'NL',
  AN = 'AN',
  NC = 'NC',
  NZ = 'NZ',
  NI = 'NI',
  NE = 'NE',
  NG = 'NG',
  NU = 'NU',
  NF = 'NF',
  MK = 'MK',
  NO = 'NO',
  OM = 'OM',
  PK = 'PK',
  PS = 'PS',
  PA = 'PA',
  PG = 'PG',
  PY = 'PY',
  PE = 'PE',
  PH = 'PH',
  PN = 'PN',
  PL = 'PL',
  PT = 'PT',
  QA = 'QA',
  CM = 'CM',
  RE = 'RE',
  RO = 'RO',
  RU = 'RU',
  RW = 'RW',
  BL = 'BL',
  SH = 'SH',
  KN = 'KN',
  LC = 'LC',
  MF = 'MF',
  PM = 'PM',
  WS = 'WS',
  SM = 'SM',
  ST = 'ST',
  SA = 'SA',
  SN = 'SN',
  RS = 'RS',
  SC = 'SC',
  SL = 'SL',
  SG = 'SG',
  SX = 'SX',
  SK = 'SK',
  SI = 'SI',
  SB = 'SB',
  SO = 'SO',
  ZA = 'ZA',
  GS = 'GS',
  KR = 'KR',
  SS = 'SS',
  ES = 'ES',
  LK = 'LK',
  VC = 'VC',
  SD = 'SD',
  SR = 'SR',
  SJ = 'SJ',
  SE = 'SE',
  CH = 'CH',
  SY = 'SY',
  TW = 'TW',
  TJ = 'TJ',
  TZ = 'TZ',
  TH = 'TH',
  TL = 'TL',
  TG = 'TG',
  TK = 'TK',
  TO = 'TO',
  TT = 'TT',
  TA = 'TA',
  TN = 'TN',
  TR = 'TR',
  TM = 'TM',
  TC = 'TC',
  TV = 'TV',
  UG = 'UG',
  UA = 'UA',
  AE = 'AE',
  GB = 'GB',
  US = 'US',
  UM = 'UM',
  UY = 'UY',
  UZ = 'UZ',
  VU = 'VU',
  VE = 'VE',
  VN = 'VN',
  VG = 'VG',
  WF = 'WF',
  EH = 'EH',
  YE = 'YE',
  ZM = 'ZM',
  ZW = 'ZW',
  ZZ = 'ZZ',
}

CustomSale

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

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

CartDiscountType

'Percentage' | 'FixedAmount' | 'Code'

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

SetLineItemDiscountInput

Parameters for adding a line item discount.

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

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

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

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

Customer

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

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

LineItemDiscountType

'Percentage' | 'FixedAmount'

Cart

cartDiscount
```
Discount
```
cartDiscounts
```
Discount[]
```
customer
```
Customer
```
grandTotal
```
string
```
lineItems
```
LineItem[]
```
note
```
string
```
properties
```
Record<string, string>
```
subtotal
```
string
```
taxTotal
```
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;
}

LineItem

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

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

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

Supporting targets

Anchor to cartapiCartApi

CartApiContent

Address

CountryCode

CustomSale

CartDiscountType

SetLineItemPropertiesInput

SetLineItemDiscountInput

LineItemDiscount

Customer

LineItemDiscountType

Cart

Discount

LineItem

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

Cart API
APIs