---
title: Attributes
description: The API for interacting with cart and checkout attributes.
api_version: 2024-10
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/attributes
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/attributes.md
---

# Attributes

The API for interacting with cart and checkout attributes.

## OrderStatusApi

The API object provided to this and other `customer-account.order-status` extension targets.

* attributes

  StatefulRemoteSubscribable\<Attribute\[] | undefined>

  required

  Custom attributes left by the customer to the merchant, either in their cart or during checkout.

### Attribute

* key

  The key for the attribute.

  ```ts
  string
  ```

* value

  The value for the attribute.

  ```ts
  string
  ```

```ts
export interface Attribute {
  /**
   * The key for the attribute.
   */
  key: string;

  /**
   * The value for the attribute.
   */
  value: string;
}
```

## use​Attributes()

Returns the proposed `attributes` applied to the checkout.

### Returns

* Attribute\[] | undefined

### Attribute

* key

  The key for the attribute.

  ```ts
  string
  ```

* value

  The value for the attribute.

  ```ts
  string
  ```

```ts
export interface Attribute {
  /**
   * The key for the attribute.
   */
  key: string;

  /**
   * The value for the attribute.
   */
  value: string;
}
```

## use​Attribute​Values([keys](#useattributevalues-propertydetail-keys)​)

Returns the values for the specified `attributes` applied to the checkout.

### Parameters

* keys

  string\[]

  required

  An array of attribute keys.

### Returns

* (string | undefined)\[]

### Examples

* #### Attribute values

  ##### React

  ```jsx
  import {
    Text,
    reactExtension,
    useAttributeValues,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );

  function Extension() {
    const [buyerSelectedFreeTShirt, tshirtSize] =
      useAttributeValues([
        'buyerSelectedFreeTShirt',
        'tshirtSize',
      ]);

    if (Boolean(buyerSelectedFreeTShirt) === true) {
      return (
        <Text>
          You selected a free t-shirt, size:{' '}
          {tshirtSize}
        </Text>
      );
    }

    return null;
  }
  ```