Choose a version:

Attributes
API

The API for interacting with cart and checkout attributes.

Anchor to standardapiStandardApi

The base API object provided to purchase, and customer-account.order-status extension targets.

Anchor to attributes attributes StatefulRemoteSubscribable<[] | undefined> required: Custom attributes left by the customer to the merchant, either in their cart or during checkout.

Docs_Standard_AttributesApi

attributes
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
```
StatefulRemoteSubscribable<Attribute[] | undefined>
```

export interface Docs_Standard_AttributesApi
  extends Pick<StandardApi, 'attributes'> {}

Attribute

key
The key for the attribute.
```
string
```
value
The value for the attribute.
```
string
```

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

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

Was this section helpful?

Anchor to checkoutapiCheckoutApi

The API object provided to purchase.checkout extension targets.

Anchor to applyAttributeChange applyAttributeChange (change: ) => Promise<> required: 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 property.

Note
This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.

Docs_Checkout_AttributesApi

applyAttributeChange
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 buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
```
(change: AttributeUpdateChange) => Promise<AttributeChangeResult>
```

export interface Docs_Checkout_AttributesApi
  extends Pick<CheckoutApi, 'applyAttributeChange'> {}

AttributeUpdateChange

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

type
The type of the `AttributeUpdateChange` API.
```
"updateAttribute"
```
key
Key of the attribute to add or update
```
string
```
value
Value for the attribute to add or update
```
string
```

export interface AttributeUpdateChange {
  /**
   * The type of the `AttributeUpdateChange` API.
   */
  type: 'updateAttribute';

  /**
   * Key of the attribute to add or update
   */
  key: string;

  /**
   * Value for the attribute to add or update
   */
  value: string;
}

Attribute

key
The key for the attribute.
```
string
```
value
The value for the attribute.
```
string
```

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

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

AttributeChangeResult

AttributeChangeResultSuccess | AttributeChangeResultError

AttributeChangeResultSuccess

The returned result of a successful update to an attribute.

type
The type of the `AttributeChangeResultSuccess` API.
```
"success"
```

export interface AttributeChangeResultSuccess {
  /**
   * The type of the `AttributeChangeResultSuccess` API.
   */
  type: 'success';
}

AttributeChangeResultError

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

type
The type of the `AttributeChangeResultError` API.
```
"error"
```
message
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.
```
string
```

export interface AttributeChangeResultError {
  /**
   * The type of the `AttributeChangeResultError` API.
   */
  type: 'error';

  /**
   * 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.
   */
  message: string;
}

Was this section helpful?

Anchor to useApplyAttributeChange
useApplyAttributeChange()

Returns a function to mutate the attributes property of the checkout.

Anchor to useApplyAttributeChange-returnsReturns

(change: ) => Promise<>

UseApplyAttributeChangeGeneratedType

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

(change: AttributeChange) => Promise<AttributeChangeResult>

(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

type
The type of the `AttributeUpdateChange` API.
```
"updateAttribute"
```
key
Key of the attribute to add or update
```
string
```
value
Value for the attribute to add or update
```
string
```

AttributeUpdateChange

Attribute

key
The key for the attribute.
```
string
```
value
The value for the attribute.
```
string
```

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

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

AttributeChangeResult

AttributeChangeResultSuccess | AttributeChangeResultError

AttributeChangeResultSuccess

The returned result of a successful update to an attribute.

type
The type of the `AttributeChangeResultSuccess` API.
```
"success"
```

export interface AttributeChangeResultSuccess {
  /**
   * The type of the `AttributeChangeResultSuccess` API.
   */
  type: 'success';
}

AttributeChangeResultError

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

type
The type of the `AttributeChangeResultError` API.
```
"error"
```
message
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.
```
string
```

export interface AttributeChangeResultError {
  /**
   * The type of the `AttributeChangeResultError` API.
   */
  type: 'error';

  /**
   * 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.
   */
  message: string;
}

Was this section helpful?

Anchor to useAttributes
useAttributes()

Returns the proposed attributes applied to the checkout.

Anchor to useAttributes-returnsReturns

[] | undefined

UseAttributesGeneratedType

Returns the proposed `attributes` applied to the checkout.

Attribute[] | undefined

Attribute[] | undefined

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

Attribute

key
The key for the attribute.
```
string
```
value
The value for the attribute.
```
string
```

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

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

Was this section helpful?

Anchor to useAttributeValues
useAttributeValues(
keys
)

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

Anchor to useAttributeValues-parametersParameters

Anchor to keys keys string[] required: An array of attribute keys.

Anchor to useAttributeValues-returnsReturns

(string | undefined)[]

UseAttributeValuesGeneratedType

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

keys
An array of attribute keys.
```
string[]
```

(string | undefined)[]

(string | undefined)[]

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

Was this section helpful?

Attribute values

React

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;

}

examples

Attribute values

React

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