# CartLineItemApi


This API object is provided to extensions registered for the `purchase.cart-line-item.line-components.render`, `purchase.checkout.cart-line-item.render-after`, `purchase.thank-you.cart-line-item.render-after`, and `customer-account.order-status.cart-line-item.render-after` extension targets.

It extends the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) and provides the [target](#properties-propertydetail-target) cart line item associated with the extension.

### 

```jsx
import {
  reactExtension,
  Text,
  useTarget,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.cart-line-item.render-after',
  () => <Extension />,
);

function Extension() {
  const {
    merchandise: {title},
  } = useTarget();
  return <Text>Line item title: {title}</Text>;
}

```

```js
import {extension} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.cart-line-item.render-after',
  (root, {target}) => {
    const text = root.createText(
      `Line item title: ${target.current.title}`,
    );
    root.appendChild(text);

    target.subscribe((updatedTarget) => {
      text.updateText(
        `Line item title: ${updatedTarget.title}`,
      );
    });
  },
);

```



## Properties
See the [StandardApi examples](/docs/api/checkout-ui-extensions/apis/standardapi#examples) for more information on how to use the API.

### CartLineItemApi


### target

value: `StatefulRemoteSubscribable<CartLine>`

The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable<PresentmentCartLine>`.

### CartLine


### id

value: `string`

These line item IDs are not stable at the moment, they might change after
any operations on the line items. You should always look up for an updated
ID before any call to `applyCartLinesChange` because you'll need the ID to
create a `CartLineChange` object.

### merchandise

value: `Merchandise`

The merchandise being purchased.

### quantity

value: `number`

The quantity of the merchandise being purchased.

### cost

value: `CartLineCost`

The details about the cost components attributed to the cart line.

### attributes

value: `Attribute[]`

The line item additional custom attributes.

### discountAllocations

value: `CartDiscountAllocation[]`

Discounts applied to the cart line.

### lineComponents

value: `CartBundleLineComponent[]`

Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.

### Merchandise


### type

value: `"variant"`



### id

value: `string`

A globally-unique identifier.

### title

value: `string`

The product variant’s title.

### subtitle

value: `string`

The product variant's subtitle.

### image

value: `ImageDetails`

Image associated with the product variant. This field falls back to the product
image if no image is available.

### selectedOptions

value: `SelectedOption[]`

List of product options applied to the variant.

### product

value: `Product`

The product object that the product variant belongs to.

### requiresShipping

value: `boolean`

Whether or not the product requires shipping.

### sellingPlan

value: `SellingPlan`

The selling plan associated with the merchandise.

### ImageDetails


### url

value: `string`

The image URL.

### altText

value: `string`

The alternative text for the image.

### SelectedOption


### name

value: `string`

The name of the merchandise option.

### value

value: `string`

The value of the merchandise option.

### Product


### id

value: `string`

A globally-unique identifier.

### vendor

value: `string`

The product’s vendor name.

### productType

value: `string`

A categorization that a product can be tagged with, commonly used for filtering and searching.

### SellingPlan


### id

value: `string`

A globally-unique identifier.

### CartLineCost


### totalAmount

value: `Money`

The total amount after reductions the buyer can expect to pay that is directly attributable to a single
cart line.

### Money


### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### CurrencyCode


'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'

### Attribute


### key

value: `string`

The key for the attribute.

### value

value: `string`

The value for the attribute.

### CartDiscountAllocation


CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation

### CartCodeDiscountAllocation


### code

value: `string`

The code for the discount

### type

value: `"code"`

The type of the code discount

### discountedAmount

value: `Money`

The money amount that has been discounted from the order

### CartAutomaticDiscountAllocation


### title

value: `string`

The title of the automatic discount

### type

value: `"automatic"`

The type of the automatic discount

### discountedAmount

value: `Money`

The money amount that has been discounted from the order

### CartCustomDiscountAllocation


### title

value: `string`

The title of the custom discount

### type

value: `"custom"`

The type of the custom discount

### discountedAmount

value: `Money`

The money amount that has been discounted from the order

### CartBundleLineComponent


### type

value: `"bundle"`



### id

value: `string`

A unique identifier for the bundle line component.

This ID is not stable. If an operation updates the line items in any way, all IDs could change.

### merchandise

value: `Merchandise`

The merchandise of this bundle line component.

### quantity

value: `number`

The quantity of merchandise being purchased.

### cost

value: `CartLineCost`

The cost attributed to this bundle line component.

### attributes

value: `Attribute[]`

Additional custom attributes for the bundle line component.

## Related
- [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi)
- [CheckoutApi](/docs/api/checkout-ui-extensions/apis/checkoutapi)
- [OrderStatusApi](/docs/api/checkout-ui-extensions/apis/orderstatusapi)
- [PickupPointListApi](/docs/api/checkout-ui-extensions/apis/pickuppointlistapi)
- [PickupLocationListApi](/docs/api/checkout-ui-extensions/apis/pickuplocationlistapi)
- [ShippingOptionItemApi](/docs/api/checkout-ui-extensions/apis/shippingoptionitemapi)
- [ExtensionTargets](/docs/api/checkout-ui-extensions/apis/extensiontargets)