The API for interacting with cart and checkout attributes.
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;
}
The base API object provided to `purchase` extension targets.
The custom attributes left by the customer to the merchant, either in their cart or during checkout.
The key for the attribute.
The value for the attribute.
The API object provided to `purchase.checkout` extension targets.
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.
Updates an attribute on the order. If an attribute with the provided key does not already exist, it gets created.
Key of the attribute to add or update
The type of the `AttributeUpdateChange` API.
Value for the attribute to add or update
The key for the attribute.
The value for the attribute.
AttributeChangeResultSuccess | AttributeChangeResultError
The returned result of a successful update to an attribute.
The type of the `AttributeChangeResultSuccess` API.
The returned result of an unsuccessful update to an attribute with a message detailing the type of error that occurred.
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.
The type of the `AttributeChangeResultError` API.
Returns a function to mutate the `attributes` property of the checkout.
Returns a function to mutate the `attributes` property of the checkout.
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, ); }
Key of the attribute to add or update
The type of the `AttributeUpdateChange` API.
Value for the attribute to add or update
The key for the attribute.
The value for the attribute.
AttributeChangeResultSuccess | AttributeChangeResultError
The returned result of a successful update to an attribute.
The type of the `AttributeChangeResultSuccess` API.
The returned result of an unsuccessful update to an attribute with a message detailing the type of error that occurred.
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.
The type of the `AttributeChangeResultError` API.
Returns the proposed `attributes` applied to the checkout.
Returns the proposed `attributes` applied to the checkout.
export function useAttributes< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): Attribute[] | undefined { return useSubscription(useApi<Target>().attributes); }
The key for the attribute.
The value for the attribute.
Returns the values for the specified `attributes` applied to the checkout.
Returns the values for the specified `attributes` applied to the checkout.
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; }); }