Cart APIAPIs
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 subscribablesubscribableRemoteSubscribable<Cart>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
on ato implement multiple subscriptions. Usingor the corresponding hooks counts as a subscription.- Anchor to applyCartDiscountapplyCartDiscount(type: CartDiscountType, title: string, amount?: string) => Promise<void>required
Apply a cart level discount
- Anchor to addCartCodeDiscountaddCartCodeDiscount(code: string) => Promise<void>required
Add a code discount to the cart
- Anchor to removeCartDiscountremoveCartDiscount() => Promise<void>required
Remove the cart discount
- Anchor to removeAllDiscountsremoveAllDiscounts(disableAutomaticDiscounts: boolean) => Promise<void>required
Remove all cart and line item discounts
- Anchor to clearCartclearCart() => Promise<void>required
Clear the cart
- Anchor to setCustomersetCustomer(customer: Customer) => Promise<void>required
Set the customer in the cart
- Anchor to removeCustomerremoveCustomer() => Promise<void>required
Remove the current customer from the cart
- Anchor to addCustomSaleaddCustomSale(customSale: CustomSale) => Promise<void>required
Add a custom sale to the cart
- Anchor to addLineItemaddLineItem(variantId: number, quantity: number) => Promise<void>required
Add a line item by variant ID to the cart
- Anchor to removeLineItemremoveLineItem(uuid: string) => Promise<void>required
Remove the line item at this uuid from the cart
- Anchor to addCartPropertiesaddCartProperties(properties: Record<string, string>) => Promise<void>required
Adds custom properties to the cart
- Anchor to removeCartPropertiesremoveCartProperties(keys: string[]) => Promise<void>required
Removes the specified cart properties
- Anchor to addLineItemPropertiesaddLineItemProperties(uuid: string, properties: Record<string, string>) => Promise<void>required
Adds custom properties to the specified line item
- Anchor to bulkAddLineItemPropertiesbulkAddLineItemProperties(lineItemProperties: SetLineItemPropertiesInput[]) => Promise<void>required
Adds custom properties to multiple line items at the same time.
- Anchor to removeLineItemPropertiesremoveLineItemProperties(uuid: string, keys: string[]) => Promise<void>required
Removes the specified line item properties
- Anchor to setLineItemDiscountsetLineItemDiscount(uuid: string, type: LineItemDiscountType, title: string, amount: string) => Promise<void>required
Add a discount on a line item to the cart
- Anchor to bulkSetLineItemDiscountsbulkSetLineItemDiscounts(lineItemDiscounts: SetLineItemDiscountInput[]) => Promise<void>required
Set line item discounts to multiple line items at the same time.
- Anchor to setAttributedStaffsetAttributedStaff(staffId: number) => Promise<void>required
Sets an attributed staff to all line items in the cart.
- Anchor to setAttributedStaffToLineItemsetAttributedStaffToLineItem(staffId: number, lineItemUuid: string) => Promise<void>required
Sets an attributed staff to a specific line items in the cart.
- Anchor to removeLineItemDiscountremoveLineItemDiscount(uuid: string) => Promise<void>required
Remove all discounts from a line item
- Anchor to addAddressaddAddress(address: Address) => Promise<void>required
Add an address to the customer (Customer must be present)
- Anchor to deleteAddressdeleteAddress(addressId: number) => Promise<void>required
Delete an address from the customer (Customer must be present)
- Anchor to updateDefaultAddressupdateDefaultAddress(addressId: number) => Promise<void>required
Update the default address for the customer (Customer must be present)
CartApiContent
- 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> - applyCartDiscount
Apply a cart level discount
(type: CartDiscountType, title: string, amount?: string) => Promise<void> - addCartCodeDiscount
Add a code discount to the cart
(code: string) => Promise<void> - removeCartDiscount
Remove the cart discount
() => Promise<void> - removeAllDiscounts
Remove all cart and line item discounts
(disableAutomaticDiscounts: boolean) => Promise<void> - clearCart
Clear the cart
() => Promise<void> - setCustomer
Set the customer in the cart
(customer: Customer) => Promise<void> - removeCustomer
Remove the current customer from the cart
() => 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> - removeLineItem
Remove the line item at this uuid from the cart
(uuid: string) => Promise<void> - addCartProperties
Adds custom properties to the cart
(properties: Record<string, string>) => Promise<void> - removeCartProperties
Removes the specified cart properties
(keys: string[]) => Promise<void> - addLineItemProperties
Adds custom properties to the specified line item
(uuid: string, properties: Record<string, string>) => Promise<void> - bulkAddLineItemProperties
Adds custom properties to multiple line items at the same time.
(lineItemProperties: SetLineItemPropertiesInput[]) => Promise<void> - removeLineItemProperties
Removes the specified line item properties
(uuid: string, keys: string[]) => Promise<void> - setLineItemDiscount
Add a discount on a line item to the cart
(uuid: string, type: LineItemDiscountType, title: string, amount: string) => Promise<void> - bulkSetLineItemDiscounts
Set line item discounts to multiple line items at the same time.
(lineItemDiscounts: SetLineItemDiscountInput[]) => 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> - removeLineItemDiscount
Remove all discounts from a line item
(uuid: string) => Promise<void> - addAddress
Add an address to the customer (Customer must be present)
(address: Address) => Promise<void> - deleteAddress
Delete an address from the customer (Customer must be present)
(addressId: number) => Promise<void> - 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>;
}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-subscribe-to-cart-changes.Subscribe to cart changes.
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); });