Choose a version:

CheckoutApi

Requires access to protected customer data for some properties.

This API object is provided to extensions registered for the extension points that appear exclusively pre-purchase.

It extends the StandardApi and provides the write apis for the checkout data.

Anchor to propertiesProperties

See the StandardApi examples for more information on how to use the API.

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.
Anchor to applyCartLinesChange applyCartLinesChange (change: ) => Promise<> required: Performs an update on the merchandise line items. It resolves when the new line items have been negotiated and results in an update to the value retrieved through the lines 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.
Anchor to applyDiscountCodeChange applyDiscountCodeChange (change: ) => Promise<> required: Performs an update on the discount codes. It resolves when the new discount codes have been negotiated and results in an update to the value retrieved through the discountCodes property.

Caution
See security considerations if your extension retrieves discount codes through a network call.
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.
Anchor to applyGiftCardChange applyGiftCardChange (change: ) => Promise<> required: Performs an update on the gift cards. It resolves when gift card change have been negotiated and results in an update to the value retrieved through the appliedGiftCards property.

Caution
See security considerations if your extension retrieves gift card codes through a network call.
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.
Anchor to applyMetafieldChange applyMetafieldChange (change: ) => Promise<> required: Performs an update on a piece of metadata attached to the cart or checkout:

If type is updateMetafield or removeMetafield, this mutation results in an update to the value retrieved through the metafields property. Metafields written by updateMetafield are carried over to the order.

If type is updateCartMetafield or removeCartMetafield, this mutation updates the metafield attached to the cart and results in an update to the value retrieved through the appMetafields property. Metafields written by updateCartMetafields are updated on the cart object only and are not carried over to the order.

Tip
Cart metafields are only available on carts created via the Storefront API version 2023-04 or later.
Anchor to applyNoteChange applyNoteChange (change: ) => Promise<> required: Performs an update on the note attached to the cart and checkout. If successful, this mutation results in an update to the value retrieved through the note 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.

CheckoutApi

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/standardapi#properties-propertydetail-applyattributechange) 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>
```
applyCartLinesChange
Performs an update on the merchandise line items. It resolves when the new line items have been negotiated and results in an update to the value retrieved through the [`lines`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-lines) 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: CartLineChange) => Promise<CartLineChangeResult>
```
applyDiscountCodeChange
Performs an update on the discount codes. It resolves when the new discount codes have been negotiated and results in an update to the value retrieved through the [`discountCodes`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-discountcodes) property. > Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves discount codes through a network call. > 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: DiscountCodeChange) => Promise<DiscountCodeChangeResult>
```
applyGiftCardChange
Performs an update on the gift cards. It resolves when gift card change have been negotiated and results in an update to the value retrieved through the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-appliedgiftcards) property. > Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves gift card codes through a network call. > 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: GiftCardChange) => Promise<GiftCardChangeResult>
```
applyMetafieldChange
Performs an update on a piece of metadata attached to the cart or checkout: - If `type` is `updateMetafield` or `removeMetafield`, this mutation results in an update to the value retrieved through the [`metafields`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-metafields) property. Metafields written by `updateMetafield` are carried over to the order. - If `type` is `updateCartMetafield` or `removeCartMetafield`, this mutation updates the metafield attached to the cart and results in an update to the value retrieved through the [`appMetafields`](/docs/api/checkout-ui-extensions/2023-04/apis/standardapi#properties-propertydetail-appmetafields) property. Metafields written by `updateCartMetafields` are updated on the cart object only and are **not** carried over to the order. > Tip: > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.
```
(change: MetafieldChange) => Promise<MetafieldChangeResult>
```
applyNoteChange
Performs an update on the note attached to the cart and checkout. If successful, this mutation results in an update to the value retrieved through the [`note`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-note) 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: NoteChange) => Promise<NoteChangeResult>
```

export interface CheckoutApi {
  /**
   * 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/standardapi#properties-propertydetail-applyattributechange) 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.
   */
  applyAttributeChange(change: AttributeChange): Promise<AttributeChangeResult>;

  /**
   * Performs an update on the merchandise line items. It resolves when the new
   * line items have been negotiated and results in an update to the value
   * retrieved through the
   * [`lines`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-lines)
   * 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.
   */
  applyCartLinesChange(change: CartLineChange): Promise<CartLineChangeResult>;

  /**
   * Performs an update on the discount codes.
   * It resolves when the new discount codes have been negotiated and results in an update
   * to the value retrieved through the [`discountCodes`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-discountcodes) property.
   *
   * > Caution:
   * > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves discount codes through a network call.
   *
   * > 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.
   */
  applyDiscountCodeChange(
    change: DiscountCodeChange,
  ): Promise<DiscountCodeChangeResult>;

  /**
   * Performs an update on the gift cards.
   * It resolves when gift card change have been negotiated and results in an update
   * to the value retrieved through the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-appliedgiftcards) property.
   *
   * > Caution:
   * > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves gift card codes through a network call.
   *
   * > 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.
   */
  applyGiftCardChange(change: GiftCardChange): Promise<GiftCardChangeResult>;

  /**
   * Performs an update on a piece of metadata attached to the cart or checkout:
   * - If `type` is `updateMetafield` or `removeMetafield`, this mutation results in an update to the value retrieved through the [`metafields`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-metafields) property. Metafields written by `updateMetafield` are carried over to the order.
   * - If `type` is `updateCartMetafield` or `removeCartMetafield`, this mutation updates the metafield attached to the cart and results in an update to the value retrieved through the [`appMetafields`](/docs/api/checkout-ui-extensions/2023-04/apis/standardapi#properties-propertydetail-appmetafields) property. Metafields written by `updateCartMetafields` are updated on the cart object only and are **not** carried over to the order.
   *
   * > Tip:
   * > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.
   */
  applyMetafieldChange(change: MetafieldChange): Promise<MetafieldChangeResult>;

  /**
   * Performs an update on the note attached to the cart and checkout. If
   * successful, this mutation results in an update to the value retrieved
   * through the [`note`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-note) 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.
   */
  applyNoteChange(change: NoteChange): Promise<NoteChangeResult>;
}

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

CartLineChange

CartLineAddChange | CartLineRemoveChange | CartLineUpdateChange

CartLineAddChange

type
An identifier for changes that add line items.
```
"addCartLine"
```
merchandiseId
The merchandise ID being added.
```
string
```
quantity
The quantity of the merchandise being added.
```
number
```
attributes
The attributes associated with the line item.
```
Attribute[]
```
sellingPlanId
The identifier of the selling plan that the merchandise is being purchased with.
```
string
```

export interface CartLineAddChange {
  /**
   * An identifier for changes that add line items.
   */
  type: 'addCartLine';

  /**
   * The merchandise ID being added.
   * @example 'gid://shopify/ProductVariant/123'
   */
  merchandiseId: string;

  /**
   * The quantity of the merchandise being added.
   */
  quantity: number;

  /**
   * The attributes associated with the line item.
   */
  attributes?: Attribute[];

  /**
   * The identifier of the selling plan that the merchandise is being purchased
   * with.
   */
  sellingPlanId?: SellingPlan['id'];
}

CartLine

id
These line item IDs are not stable at the moment, they might change after any operations on the line items. You should always look up for an updated ID before any call to `applyCartLinesChange` because you'll need the ID to create a `CartLineChange` object.
```
string
```
merchandise
The merchandise being purchased.
```
Merchandise
```
quantity
The quantity of the merchandise being purchased.
```
number
```
cost
The details about the cost components attributed to the cart line.
```
CartLineCost
```
attributes
The line item additional custom attributes.
```
Attribute[]
```
discountAllocations
Discounts applied to the cart line.
```
CartDiscountAllocation[]
```
lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
```
CartBundleLineComponent[]
```

export interface CartLine {
  /**
   * These line item IDs are not stable at the moment, they might change after
   * any operations on the line items. You should always look up for an updated
   * ID before any call to `applyCartLinesChange` because you'll need the ID to
   * create a `CartLineChange` object.
   * @example 'gid://shopify/CartLine/123'
   */
  id: string;

  /**
   * The merchandise being purchased.
   */
  merchandise: Merchandise;

  /**
   * The quantity of the merchandise being purchased.
   */
  quantity: number;

  /**
   * The details about the cost components attributed to the cart line.
   */
  cost: CartLineCost;

  /**
   * The line item additional custom attributes.
   */
  attributes: Attribute[];

  /**
   * Discounts applied to the cart line.
   */
  discountAllocations: CartDiscountAllocation[];

  /**
   * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
   */
  lineComponents: CartLineComponentType[];
}

Merchandise

type
```
"variant"
```
id
A globally-unique identifier.
```
string
```
title
The product variant’s title.
```
string
```
subtitle
The product variant's subtitle.
```
string
```
image
Image associated with the product variant. This field falls back to the product image if no image is available.
```
ImageDetails
```
selectedOptions
List of product options applied to the variant.
```
SelectedOption[]
```
product
The product object that the product variant belongs to.
```
Product
```
requiresShipping
Whether or not the product requires shipping.
```
boolean
```
sellingPlan
The selling plan associated with the merchandise.
```
SellingPlan
```

ProductVariant

ImageDetails

url
The image URL.
```
string
```
altText
The alternative text for the image.
```
string
```

export interface ImageDetails {
  /**
   * The image URL.
   */
  url: string;

  /**
   * The alternative text for the image.
   */
  altText?: string;
}

SelectedOption

name
The name of the merchandise option.
```
string
```
value
The value of the merchandise option.
```
string
```

export interface SelectedOption {
  /**
   * The name of the merchandise option.
   */
  name: string;

  /**
   * The value of the merchandise option.
   */
  value: string;
}

Product

id
A globally-unique identifier.
```
string
```
vendor
The product’s vendor name.
```
string
```
productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
```
string
```

export interface Product {
  /**
   * A globally-unique identifier.
   */
  id: string;

  /**
   * The product’s vendor name.
   */
  vendor: string;

  /**
   * A categorization that a product can be tagged with, commonly used for filtering and searching.
   */
  productType: string;
}

SellingPlan

id
A globally-unique identifier.
```
string
```

export interface SellingPlan {
  /**
   * A globally-unique identifier.
   * @example 'gid://shopify/SellingPlan/1'
   */
  id: string;
}

CartLineCost

totalAmount
The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line.
```
Money
```

export interface CartLineCost {
  /**
   * The total amount after reductions the buyer can expect to pay that is directly attributable to a single
   * cart line.
   */
  totalAmount: Money;
}

Money

amount
The price amount.
```
number
```
currencyCode
The ISO 4217 format for the currency.
```
CurrencyCode
```

export interface Money {
  /**
   * The price amount.
   */
  amount: number;
  /**
   * The ISO 4217 format for the currency.
   * @example 'CAD' for Canadian dollar
   */
  currencyCode: CurrencyCode;
}

CurrencyCode

'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'

CartDiscountAllocation

CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation

CartCodeDiscountAllocation

code
The code for the discount
```
string
```
type
The type of the code discount
```
"code"
```
discountedAmount
The money amount that has been discounted from the order
```
Money
```

export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
  /**
   * The code for the discount
   */
  code: string;

  /**
   * The type of the code discount
   */
  type: 'code';
}

CartAutomaticDiscountAllocation

title
The title of the automatic discount
```
string
```
type
The type of the automatic discount
```
"automatic"
```
discountedAmount
The money amount that has been discounted from the order
```
Money
```

export interface CartAutomaticDiscountAllocation
  extends CartDiscountAllocationBase {
  /**
   * The title of the automatic discount
   */
  title: string;

  /**
   * The type of the automatic discount
   */
  type: 'automatic';
}

CartCustomDiscountAllocation

title
The title of the custom discount
```
string
```
type
The type of the custom discount
```
"custom"
```
discountedAmount
The money amount that has been discounted from the order
```
Money
```

export interface CartCustomDiscountAllocation
  extends CartDiscountAllocationBase {
  /**
   * The title of the custom discount
   */
  title: string;

  /**
   * The type of the custom discount
   */
  type: 'custom';
}

CartBundleLineComponent

type
```
"bundle"
```
id
A unique identifier for the bundle line component. This ID is not stable. If an operation updates the line items in any way, all IDs could change.
```
string
```
merchandise
The merchandise of this bundle line component.
```
Merchandise
```
quantity
The quantity of merchandise being purchased.
```
number
```
cost
The cost attributed to this bundle line component.
```
CartLineCost
```
attributes
Additional custom attributes for the bundle line component.
```
Attribute[]
```

export interface CartBundleLineComponent {
  type: 'bundle';

  /**
   * A unique identifier for the bundle line component.
   *
   * This ID is not stable. If an operation updates the line items in any way, all IDs could change.
   *
   * @example 'gid://shopify/CartLineComponent/123'
   */
  id: string;

  /**
   * The merchandise of this bundle line component.
   */
  merchandise: Merchandise;

  /**
   * The quantity of merchandise being purchased.
   */
  quantity: number;

  /**
   * The cost attributed to this bundle line component.
   */
  cost: CartLineCost;

  /**
   * Additional custom attributes for the bundle line component.
   *
   * @example [{key: 'engraving', value: 'hello world'}]
   */
  attributes: Attribute[];
}

CartLineRemoveChange

type
An identifier for changes that remove line items.
```
"removeCartLine"
```
id
Line Item ID.
```
string
```
quantity
The quantity being removed for this line item.
```
number
```

export interface CartLineRemoveChange {
  /**
   * An identifier for changes that remove line items.
   */
  type: 'removeCartLine';

  /**
   * Line Item ID.
   * @example 'gid://shopify/CartLine/123'
   */
  id: string;

  /**
   * The quantity being removed for this line item.
   */
  quantity: number;
}

CartLineUpdateChange

type
An identifier for changes that update line items.
```
"updateCartLine"
```
id
Line Item ID.
```
string
```
merchandiseId
The new merchandise ID for the line item.
```
string
```
quantity
The new quantity for the line item.
```
number
```
attributes
The new attributes for the line item.
```
Attribute[]
```
sellingPlanId
The identifier of the selling plan that the merchandise is being purchased with or `null` to remove the the product from the selling plan.
```
string
```

export interface CartLineUpdateChange {
  /**
   * An identifier for changes that update line items.
   */
  type: 'updateCartLine';

  /**
   * Line Item ID.
   * @example 'gid://shopify/CartLine/123'
   */
  id: string;

  /**
   * The new merchandise ID for the line item.
   * @example 'gid://shopify/ProductVariant/123'
   */

  merchandiseId?: string;
  /**
   * The new quantity for the line item.
   */
  quantity?: number;

  /**
   * The new attributes for the line item.
   */
  attributes?: Attribute[];

  /**
   * The identifier of the selling plan that the merchandise is being purchased
   * with or `null` to remove the the product from the selling plan.
   */
  sellingPlanId?: SellingPlan['id'] | null;
}

CartLineChangeResult

CartLineChangeResultSuccess | CartLineChangeResultError

CartLineChangeResultSuccess

type
Indicates that the line item was changed successfully.
```
"success"
```

export interface CartLineChangeResultSuccess {
  /**
   * Indicates that the line item was changed successfully.
   */
  type: 'success';
}

CartLineChangeResultError

type
Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error.
```
"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 CartLineChangeResultError {
  /**
   * Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error.
   */
  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;
}

DiscountCodeChange

DiscountCodeAddChange | DiscountCodeRemoveChange

DiscountCodeAddChange

type
The type of the `DiscountCodeChange` API.
```
"addDiscountCode"
```
code
The code for the discount
```
string
```

export interface DiscountCodeAddChange {
  /**
   * The type of the `DiscountCodeChange` API.
   */
  type: 'addDiscountCode';

  /**
   * The code for the discount
   */
  code: string;
}

DiscountCodeRemoveChange

type
The type of the `DiscountCodeChange` API.
```
"removeDiscountCode"
```
code
The code for the discount
```
string
```

export interface DiscountCodeRemoveChange {
  /**
   * The type of the `DiscountCodeChange` API.
   */
  type: 'removeDiscountCode';

  /**
   * The code for the discount
   */
  code: string;
}

DiscountCodeChangeResult

DiscountCodeChangeResultSuccess | DiscountCodeChangeResultError

DiscountCodeChangeResultSuccess

type
Indicates that the discount code change was applied successfully.
```
"success"
```

export interface DiscountCodeChangeResultSuccess {
  /**
   * Indicates that the discount code change was applied successfully.
   */
  type: 'success';
}

DiscountCodeChangeResultError

type
Indicates that the discount code change failed.
```
"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 DiscountCodeChangeResultError {
  /**
   * Indicates that the discount code change failed.
   */
  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;
}

GiftCardChange

GiftCardAddChange | GiftCardRemoveChange

GiftCardAddChange

type
The type of the `GiftCardChange` API.
```
"addGiftCard"
```
code
Gift card code.
```
string
```

export interface GiftCardAddChange {
  /**
   * The type of the `GiftCardChange` API.
   */
  type: 'addGiftCard';

  /**
   * Gift card code.
   */
  code: string;
}

GiftCardRemoveChange

type
The type of the `GiftCardChange` API.
```
"removeGiftCard"
```
code
Gift card code.
```
string
```

export interface GiftCardRemoveChange {
  /**
   * The type of the `GiftCardChange` API.
   */
  type: 'removeGiftCard';

  /**
   * Gift card code.
   */
  code: string;
}

GiftCardChangeResult

GiftCardChangeResultSuccess | GiftCardChangeResultError

GiftCardChangeResultSuccess

type
Indicates that the gift card change was applied successfully.
```
"success"
```

export interface GiftCardChangeResultSuccess {
  /**
   * Indicates that the gift card change was applied successfully.
   */
  type: 'success';
}

GiftCardChangeResultError

type
Indicates that the gift card change failed.
```
"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 GiftCardChangeResultError {
  /**
   * Indicates that the gift card change failed.
   */
  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;
}

MetafieldChange

MetafieldRemoveChange | MetafieldUpdateChange | MetafieldRemoveCartChange | MetafieldUpdateCartChange

MetafieldRemoveChange

Removes a metafield.

type
The type of the `MetafieldRemoveChange` API.
```
"removeMetafield"
```
key
The name of the metafield to remove.
```
string
```
namespace
The namespace of the metafield to remove.
```
string
```

export interface MetafieldRemoveChange {
  /**
   * The type of the `MetafieldRemoveChange` API.
   */
  type: 'removeMetafield';

  /**
   * The name of the metafield to remove.
   */
  key: string;

  /**
   * The namespace of the metafield to remove.
   */
  namespace: string;
}

Metafield

Metadata associated with the checkout.

key
The name of the metafield. It must be between 3 and 30 characters in length (inclusive).
```
string
```
namespace
A container for a set of metafields. You need to define a custom namespace for your metafields to distinguish them from the metafields used by other apps. This must be between 2 and 20 characters in length (inclusive).
```
string
```
value
The information to be stored as metadata.
```
string | number
```
valueType
The metafield’s information type.
```
"string" | "integer" | "json_string"
```

export interface Metafield {
  /**
   * The name of the metafield. It must be between 3 and 30 characters in
   * length (inclusive).
   */
  key: string;

  /**
   * A container for a set of metafields. You need to define a custom
   * namespace for your metafields to distinguish them from the metafields
   * used by other apps. This must be between 2 and 20 characters in length (inclusive).
   */
  namespace: string;

  /**
   * The information to be stored as metadata.
   */
  value: string | number;

  /** The metafield’s information type. */
  valueType: 'integer' | 'string' | 'json_string';
}

MetafieldUpdateChange

Updates a metafield. If a metafield with the provided key and namespace does not already exist, it gets created.

type
The type of the `MetafieldUpdateChange` API.
```
"updateMetafield"
```
key
The name of the metafield to update.
```
string
```
namespace
The namespace of the metafield to add.
```
string
```
value
The new information to store in the metafield.
```
string | number
```
valueType
The metafield’s information type.
```
"string" | "integer" | "json_string"
```

export interface MetafieldUpdateChange {
  /**
   * The type of the `MetafieldUpdateChange` API.
   */
  type: 'updateMetafield';

  /** The name of the metafield to update. */
  key: string;

  /** The namespace of the metafield to add. */
  namespace: string;

  /** The new information to store in the metafield. */
  value: string | number;

  /**
   * The metafield’s information type.
   */
  valueType: 'integer' | 'string' | 'json_string';
}

MetafieldRemoveCartChange

Removes a cart metafield.

type
The type of the `MetafieldRemoveCartChange` API.
```
"removeCartMetafield"
```
key
The name of the metafield to remove.
```
string
```
namespace
The namespace of the metafield to remove.
```
string
```

export interface MetafieldRemoveCartChange {
  /**
   * The type of the `MetafieldRemoveCartChange` API.
   */
  type: 'removeCartMetafield';

  /**
   * The name of the metafield to remove.
   */
  key: string;

  /**
   * The namespace of the metafield to remove.
   */
  namespace: string;
}

MetafieldUpdateCartChange

Updates a cart metafield. If a metafield with the provided key and namespace does not already exist, it gets created.

type
The type of the `MetafieldUpdateCartChange` API.
```
"updateCartMetafield"
```

metafield

{ key: string; namespace: string; value: string; type: string; }

export interface MetafieldUpdateCartChange {
  /**
   * The type of the `MetafieldUpdateCartChange` API.
   */
  type: 'updateCartMetafield';

  metafield: {
    /** The name of the metafield to update. */
    key: string;

    /** The namespace of the metafield to add. */
    namespace: string;

    /** The new information to store in the metafield. */
    value: string;

    /**
     * The metafield’s information type.
     * See the [`metafields documentation`](/docs/apps/custom-data/metafields/types) for a list of supported types.
     */
    type: string;
  };
}

MetafieldChangeResult

MetafieldChangeResultSuccess | MetafieldChangeResultError

MetafieldChangeResultSuccess

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

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

MetafieldChangeResultError

type
The type of the `MetafieldChangeResultError` 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 MetafieldChangeResultError {
  /**
   * The type of the `MetafieldChangeResultError` 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;
}

NoteChange

NoteRemoveChange | NoteUpdateChange

NoteRemoveChange

Removes a note

type
The type of the `NoteRemoveChange` API.
```
"removeNote"
```

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

NoteUpdateChange

An Update to a note on the order. for example, the buyer could request detailed packaging instructions in an order note

type
The type of the `NoteUpdateChange` API.
```
"updateNote"
```
note
The new value of the note.
```
string
```

export interface NoteUpdateChange {
  /**
   * The type of the `NoteUpdateChange` API.
   */
  type: 'updateNote';
  /**
   * The new value of the note.
   */
  note: string;
}

NoteChangeResult

NoteChangeResultSuccess | NoteChangeResultError

NoteChangeResultSuccess

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

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

NoteChangeResultError

type
The type of the `NoteChangeResultError` 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 NoteChangeResultError {
  /**
   * The type of the `NoteChangeResultError` 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?

import {

render,

Checkbox,

useApplyAttributeChange,

} from '@shopify/checkout-ui-extensions-react';

// 1. Choose an extension point

render('Checkout::Dynamic::Render', () => (

));

function Extension() {

const applyAttributeChange =

useApplyAttributeChange();

// 2. Render a UI

return (

I would like to receive a free gift with my

order

</Checkbox>

);

// 3. Call API methods to modify the checkout

async function onCheckboxChange(isChecked) {

const result = await applyAttributeChange({

key: 'requestedFreeGift',

type: 'updateAttribute',

value: isChecked ? 'yes' : 'no',

});

console.log(

'applyAttributeChange result',

result,

);

}

examples

React

import {
  render,
  Checkbox,
  useApplyAttributeChange,
} from '@shopify/checkout-ui-extensions-react';

// 1. Choose an extension point
render('Checkout::Dynamic::Render', () => (
  <Extension />
));

function Extension() {
  const applyAttributeChange =
    useApplyAttributeChange();

  // 2. Render a UI
  return (
    <Checkbox onChange={onCheckboxChange}>
      I would like to receive a free gift with my
      order
    </Checkbox>
  );

  // 3. Call API methods to modify the checkout
  async function onCheckboxChange(isChecked) {
    const result = await applyAttributeChange({
      key: 'requestedFreeGift',
      type: 'updateAttribute',
      value: isChecked ? 'yes' : 'no',
    });
    console.log(
      'applyAttributeChange result',
      result,
    );
  }
}

JavaScript

import {
  extend,
  Checkbox,
} from '@shopify/checkout-ui-extensions';

// 1. Choose an extension point
extend(
  'Checkout::Dynamic::Render',
  (root, api) => {
    // 2. Render a UI
    root.appendChild(
      root.createComponent(
        Checkbox,
        {
          onChange: onCheckboxChange,
        },
        'I would like to receive a free gift with my order',
      ),
    );

    // 3. Call API methods to modify the checkout
    async function onCheckboxChange(isChecked) {
      const result =
        await api.applyAttributeChange({
          key: 'requestedFreeGift',
          type: 'updateAttribute',
          value: isChecked ? 'yes' : 'no',
        });
      console.log(
        'applyAttributeChange result',
        result,
      );
    }
  },
);

Anchor to relatedRelated

APIsStandardApi

APIsOrderStatusApi

APIsCartLineDetailsApi

APIsPickupPointsApi

APIsPickupLocationsApi

APIsShippingMethodDetailsApi

APIsExtensionPoints