# Attributes

The API for interacting with cart and checkout attributes.
### Attribute values

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

export default reactExtension(
  'purchase.checkout.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;
}

```



## StandardApi
The base API object provided to `purchase` extension targets.

### Docs_Standard_AttributesApi


### attributes

value: `StatefulRemoteSubscribable<Attribute[] | undefined>`

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

### Attribute


### key

value: `string`

The key for the attribute.

### value

value: `string`

The value for the attribute.

## Related
- [Targets](/docs/api/checkout-ui-extensions/targets)
- [Components](/docs/api/checkout-ui-extensions/components)
- [Configuration](/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## CheckoutApi
The API object provided to `purchase.checkout` extension targets.

### Docs_Checkout_AttributesApi


### applyAttributeChange

value: `(change: AttributeUpdateChange) => Promise<AttributeChangeResult>`

Performs an update on an attribute attached to the cart and checkout. If successful, this mutation results in an update to the value retrieved through the [`attributes`](/docs/api/checkout-ui-extensions/apis/attributes#standardapi-propertydetail-attributes) property.

> Note: This method will return an error if the [cart instruction](/docs/api/checkout-ui-extensions/apis/cart-instructions#standardapi-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.

### AttributeUpdateChange
Updates an attribute on the order. If an attribute with the provided key does not already exist, it gets created.

### key

value: `string`

Key of the attribute to add or update

### type

value: `"updateAttribute"`

The type of the `AttributeUpdateChange` API.

### value

value: `string`

Value for the attribute to add or update

### Attribute


### key

value: `string`

The key for the attribute.

### value

value: `string`

The value for the attribute.

### AttributeChangeResult


AttributeChangeResultSuccess | AttributeChangeResultError

### AttributeChangeResultSuccess
The returned result of a successful update to an attribute.

### type

value: `"success"`

The type of the `AttributeChangeResultSuccess` API.

### AttributeChangeResultError
The returned result of an unsuccessful update to an attribute with a message detailing the type of error that occurred.

### message

value: `string`

A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.

### type

value: `"error"`

The type of the `AttributeChangeResultError` API.

## Related
- [Targets](/docs/api/checkout-ui-extensions/targets)
- [Components](/docs/api/checkout-ui-extensions/components)
- [Configuration](/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## useApplyAttributeChange
Returns a function to mutate the `attributes` property of the checkout.

### UseApplyAttributeChangeGeneratedType
Returns a function to mutate the `attributes` property of the checkout.

#### Returns: (change: AttributeChange) => Promise<AttributeChangeResult>


export function useApplyAttributeChange<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): (change: AttributeChange) => Promise<AttributeChangeResult> {
  const api = useApi<Target>();

  if ('applyAttributeChange' in api) {
    return api.applyAttributeChange;
  }

  throw new ExtensionHasNoMethodError(
    'applyAttributeChange',
    api.extension.target,
  );
}

### AttributeChange


### key

value: `string`

Key of the attribute to add or update

### type

value: `"updateAttribute"`

The type of the `AttributeUpdateChange` API.

### value

value: `string`

Value for the attribute to add or update

### Attribute


### key

value: `string`

The key for the attribute.

### value

value: `string`

The value for the attribute.

### AttributeChangeResult


AttributeChangeResultSuccess | AttributeChangeResultError

### AttributeChangeResultSuccess
The returned result of a successful update to an attribute.

### type

value: `"success"`

The type of the `AttributeChangeResultSuccess` API.

### AttributeChangeResultError
The returned result of an unsuccessful update to an attribute with a message detailing the type of error that occurred.

### message

value: `string`

A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.

### type

value: `"error"`

The type of the `AttributeChangeResultError` API.

## Related
- [Targets](/docs/api/checkout-ui-extensions/targets)
- [Components](/docs/api/checkout-ui-extensions/components)
- [Configuration](/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## useAttributes
Returns the proposed `attributes` applied to the checkout.

### UseAttributesGeneratedType
Returns the proposed `attributes` applied to the checkout.

#### Returns: Attribute[] | undefined


export function useAttributes<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): Attribute[] | undefined {
  return useSubscription(useApi<Target>().attributes);
}

### Attribute


### key

value: `string`

The key for the attribute.

### value

value: `string`

The value for the attribute.

## Related
- [Targets](/docs/api/checkout-ui-extensions/targets)
- [Components](/docs/api/checkout-ui-extensions/components)
- [Configuration](/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

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

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

#### Returns: (string | undefined)[]


#### Params:
- keys: string[]

export function useAttributeValues<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(keys: string[]): (string | undefined)[] {
  const attributes = useAttributes<Target>();

  if (!attributes?.length) {
    return [];
  }

  return keys.map((key) => {
    const attribute = attributes.find((attribute) => attribute.key === key);
    return attribute?.value;
  });
}

## Related
- [Targets](/docs/api/checkout-ui-extensions/targets)
- [Components](/docs/api/checkout-ui-extensions/components)
- [Configuration](/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)