AttributesAPI
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 attributesattributesStatefulRemoteSubscribable<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.
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;
}
Anchor to checkoutapiCheckoutApi
The API object provided to purchase.checkout
extension targets.
- Anchor to applyAttributeChangeapplyAttributeChange(change: AttributeUpdateChange) => Promise<AttributeChangeResult>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.NoteThis method will return an error if 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.
- 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;
}
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;
}
Anchor to useApplyAttributeChangeuse Apply Attribute Change()
Returns a function to mutate the attributes
property of the checkout.
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
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;
}
Anchor to useAttributesuse Attributes()
Returns the proposed attributes
applied to the checkout.
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;
}
Returns the values for the specified attributes
applied to the checkout.
Anchor to useAttributeValues-parametersParameters
- Anchor to keyskeysstring[]required
An array of attribute keys.
Attribute values
React
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; }