# purchase.checkout.reductions.render-after A static extension target that is rendered in the order summary, after the discount form and discount tag elements. ```jsx import { reactExtension, Checkbox, useApplyAttributeChange, useInstructions, } from '@shopify/ui-extensions-react/checkout'; // 1. Choose an extension target export default reactExtension( 'purchase.checkout.reductions.render-after', () => , ); function Extension() { const applyAttributeChange = useApplyAttributeChange(); const instructions = useInstructions(); // 2. Render a UI return ( I would like to receive a free gift with my order ); async function onCheckboxChange(isChecked) { // 3. Check if the API is available if ( !instructions.attributes.canUpdateAttributes ) { console.error( 'Attributes cannot be updated in this checkout', ); return; } // 4. Call the API to modify checkout const result = await applyAttributeChange({ key: 'requestedFreeGift', type: 'updateAttribute', value: isChecked ? 'yes' : 'no', }); console.log( 'applyAttributeChange result', result, ); } } ``` ```js import { extension, Checkbox, } from '@shopify/ui-extensions/checkout'; // 1. Choose an extension target export default extension( 'purchase.checkout.reductions.render-after', (root, api) => { // 2. Render a UI root.appendChild( root.createComponent( Checkbox, { onChange: onCheckboxChange, }, 'I would like to receive a free gift with my order', ), ); async function onCheckboxChange(isChecked) { // 3. Check if the API is available if ( !api.instructions.current.attributes .canUpdateAttributes ) { console.error( 'Attributes cannot be updated in this checkout', ); return; } // 4. Call the API to modify checkout const result = await api.applyAttributeChange({ key: 'requestedFreeGift', type: 'updateAttribute', value: isChecked ? 'yes' : 'no', }); console.log( 'applyAttributeChange result', result, ); } }, ); ``` ## CheckoutApi The API object provided to this and other `purchase.checkout` extension targets. ### CheckoutApi ### applyAttributeChange value: `(change: AttributeChange) => Promise` 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`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/attributes#standardapi-propertydetail-attributes) property. > Note: This method will return an error if the [cart instruction](https://shopify.dev/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. ### applyCartLinesChange value: `(change: CartLineChange) => Promise` 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`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-lines#standardapi-propertydetail-lines) property. > Note: This method will return an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions#standardapi-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay. ### applyDiscountCodeChange value: `(change: DiscountCodeChange) => Promise` 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`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/discounts#standardapi-propertydetail-discountcodes) property. > Caution: > See [security considerations](https://shopify.dev/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 [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions#standardapi-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay. ### applyGiftCardChange value: `(change: GiftCardChange) => Promise` 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`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/gift-cards#standardapi-propertydetail-appliedgiftcards) property. > Caution: > See [security considerations](https://shopify.dev/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. ### applyMetafieldChange value: `(change: MetafieldChange) => Promise` Performs an update on a piece of metadata attached to the checkout. If successful, this mutation results in an update to the value retrieved through the [`metafields`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/metafields#standardapi-propertydetail-metafields) property. > Note: This method will return an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions#standardapi-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay. ### applyNoteChange value: `(change: NoteChange) => Promise` 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`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/note#standardapi-propertydetail-note) property. > Note: This method will return an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions#standardapi-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay. ### applyShippingAddressChange value: `(change: ShippingAddressUpdateChange) => Promise` Performs an update of the shipping address. Shipping address changes will completely overwrite the existing shipping address added by the user without any prompts. If successful, this mutation results in an update to the value retrieved through the `shippingAddress` property. > Note: This method will return an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions#standardapi-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### experimentalIsShopAppStyle value: `boolean` ### 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. ### AttributeRemoveChange Removes an attribute on the order if an attribute with the provided key already exists. ### key value: `string` Key of the attribute to remove ### type value: `"removeAttribute"` The type of the `AttributeRemoveChange` API. ### 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. ### CartLineAddChange ### attributes value: `Attribute[]` The attributes associated with the line item. ### merchandiseId value: `string` The merchandise ID being added. ### quantity value: `number` The quantity of the merchandise being added. ### sellingPlanId value: `string` The identifier of the selling plan that the merchandise is being purchased with. ### type value: `"addCartLine"` An identifier for changes that add line items. ### CartLine ### attributes value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `string` 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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### sku value: `string` The product variant's sku. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ### CartLineRemoveChange ### id value: `string` Line Item ID. ### quantity value: `number` The quantity being removed for this line item. ### type value: `"removeCartLine"` An identifier for changes that remove line items. ### CartLineUpdateChange ### attributes value: `Attribute[]` The new attributes for the line item. ### id value: `string` Line Item ID. ### merchandiseId value: `string` The new merchandise ID for the line item. ### quantity value: `number` The new quantity for the line item. ### sellingPlanId value: `SellingPlan['id'] | null` The identifier of the selling plan that the merchandise is being purchased with or `null` to remove the the product from the selling plan. ### type value: `"updateCartLine"` An identifier for changes that update line items. ### CartLineChangeResultSuccess ### type value: `"success"` Indicates that the line item was changed successfully. ### CartLineChangeResultError ### 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"` Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error. ### DiscountCodeAddChange ### code value: `string` The code for the discount (case-sensitive) ### type value: `"addDiscountCode"` The type of the `DiscountCodeChange` API. ### DiscountCodeRemoveChange ### code value: `string` The code for the discount (case-sensitive) ### type value: `"removeDiscountCode"` The type of the `DiscountCodeChange` API. ### DiscountCodeChangeResultSuccess ### type value: `"success"` Indicates that the discount code change was applied successfully. ### DiscountCodeChangeResultError ### 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"` Indicates that the discount code change failed. ### GiftCardAddChange ### code value: `string` Gift card code. ### type value: `"addGiftCard"` The type of the `GiftCardChange` API. ### GiftCardRemoveChange ### code value: `string` The full gift card code, or the last four digits of the code. ### type value: `"removeGiftCard"` The type of the `GiftCardChange` API. ### GiftCardChangeResultSuccess ### type value: `"success"` Indicates that the gift card change was applied successfully. ### GiftCardChangeResultError ### 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"` Indicates that the gift card change failed. ### MetafieldRemoveChange Removes a metafield. ### key value: `string` The name of the metafield to remove. ### namespace value: `string` The namespace of the metafield to remove. ### type value: `"removeMetafield"` The type of the `MetafieldRemoveChange` API. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `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). ### value value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### MetafieldUpdateChange Updates a metafield. If a metafield with the provided key and namespace does not already exist, it gets created. ### key value: `string` The name of the metafield to update. ### namespace value: `string` The namespace of the metafield to add. ### type value: `"updateMetafield"` The type of the `MetafieldUpdateChange` API. ### value value: `string | number` The new information to store in the metafield. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### MetafieldRemoveCartChange Removes a cart metafield. ### key value: `string` The name of the metafield to remove. ### namespace value: `string` The namespace of the metafield to remove. ### type value: `"removeCartMetafield"` The type of the `MetafieldRemoveChange` API. ### CartMetafield Represents a custom metadata attached to a resource. ### key value: `string` The key name of a metafield. ### namespace value: `string` The namespace for a metafield. ### type value: `string` The metafield's type name. ### value value: `string` The value of a metafield. ### MetafieldUpdateCartChange Updates a cart metafield. If a metafield with the provided key and namespace does not already exist, it gets created. ### metafield value: `{ key: string; namespace: string; value: string; type: string; }` ### type value: `"updateCartMetafield"` The type of the `MetafieldUpdateChange` API. ### MetafieldChangeResultSuccess ### type value: `"success"` The type of the `MetafieldChangeResultSuccess` API. ### MetafieldChangeResultError ### 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 `MetafieldChangeResultError` API. ### NoteRemoveChange Removes a note ### type value: `"removeNote"` The type of the `NoteRemoveChange` API. ### NoteUpdateChange An Update to a note on the order. for example, the buyer could request detailed packaging instructions in an order note ### note value: `string` The new value of the note. ### type value: `"updateNote"` The type of the `NoteUpdateChange` API. ### NoteChangeResultSuccess ### type value: `"success"` The type of the `NoteChangeResultSuccess` API. ### NoteChangeResultError ### 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 `NoteChangeResultError` API. ### ShippingAddressUpdateChange ### address value: `Partial` Fields to update in the shipping address. You only need to provide values for the fields you want to update — any fields you do not list will keep their current values. ### type value: `"updateShippingAddress"` The type of the `ShippingAddressUpdateChange` API. ### ShippingAddress ### address1 value: `string` The first line of the buyer's address, including street name and number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` The second line of the buyer's address, like apartment number, suite, etc. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### oneTimeUse value: `boolean` Specifies whether the address should be saved to the buyer's account. ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` The buyer's province code, such as state, province, prefecture, or region. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### ShippingAddressChangeResultSuccess The returned result of a successful update to the shipping address. ### errors value: `null` ### type value: `"success"` The type of the `ShippingAddressChangeResultSuccess` API. ### ShippingAddressChangeResultError The returned result of an update to the shipping address with a messages detailing the type of errors that occurred. ### errors value: `ShippingAddressChangeFieldError[]` The errors corresponding to particular fields from a given change ### type value: `"error"` The type of the `ShippingAddressChangeResultError` API. ### ShippingAddressChangeFieldError An error corresponding to a particular field from a given change ### field value: `keyof MailingAddress` field key from MailingAddress where the error 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. ### MailingAddress ### address1 value: `string` The first line of the buyer's address, including street name and number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` The second line of the buyer's address, like apartment number, suite, etc. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` The buyer's province code, such as state, province, prefecture, or region. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ## Related - [APIs](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## StandardApi The base API object provided to this and other `purchase.checkout` and `purchase.thank-you` extension targets. ### StandardApi ### analytics value: `Analytics` The methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event. ### appliedGiftCards value: `StatefulRemoteSubscribable` Gift Cards that have been applied to the checkout. ### applyTrackingConsentChange value: `ApplyTrackingConsentChangeType` Allows setting and updating customer privacy consent settings and tracking consent metafields. > Note: Requires the [`customer_privacy` capability](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#collect-buyer-consent) to be set to `true`. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### appMetafields value: `StatefulRemoteSubscribable` The metafields requested in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer. App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](https://shopify.dev/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### attributes value: `StatefulRemoteSubscribable` The custom attributes left by the customer to the merchant, either in their cart or during checkout. ### availablePaymentOptions value: `StatefulRemoteSubscribable` All available payment options. ### billingAddress value: `StatefulRemoteSubscribable` The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### buyerIdentity value: `BuyerIdentity` Information about the buyer that is interacting with the checkout. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### buyerJourney value: `BuyerJourney` Provides details on the buyer's progression through the checkout. Refer to [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/buyer-journey#examples) examples for more information. ### checkoutSettings value: `StatefulRemoteSubscribable` Settings applied to the buyer's checkout. ### checkoutToken value: `StatefulRemoteSubscribable` A stable ID that represents the current checkout. Matches the `token` field in the [WebPixel checkout payload](https://shopify.dev/docs/api/pixels/customer-events#checkout) and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object). ### cost value: `CartCost` Details on the costs the buyer will pay for this checkout. ### customerPrivacy value: `StatefulRemoteSubscribable` Customer privacy consent settings and a flag denoting if consent has previously been collected. ### deliveryGroups value: `StatefulRemoteSubscribable` A list of delivery groups containing information about the delivery of the items the customer intends to purchase. ### discountAllocations value: `StatefulRemoteSubscribable` Discounts that have been applied to the entire cart. ### discountCodes value: `StatefulRemoteSubscribable` A list of discount codes currently applied to the checkout. ### extension value: `Extension` The meta information about the extension. ### extensionPoint value: `Target` The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file. ### i18n value: `I18n` Utilities for translating content and formatting values according to the current [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization) of the checkout. Refer to [`localization` examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#examples) for more information. ### instructions value: `StatefulRemoteSubscribable` The cart instructions used to create the checkout and possibly limit extension capabilities. These instructions should be checked prior to performing any actions that may be affected by them. For example, if you intend to add a discount code via the `applyDiscountCodeChange` method, check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout. > Caution: As of version `2024-07`, UI extension code must check for instructions before calling select APIs in case those APIs are not available. See the [update guide](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions#examples) for more information. ### lines value: `StatefulRemoteSubscribable` A list of lines containing information about the items the customer intends to purchase. ### localization value: `Localization` The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-i18n) object instead. ### localizedFields value: `StatefulRemoteSubscribable` The API for reading additional fields that are required in checkout under certain circumstances. For example, some countries require additional fields for customs information or tax identification numbers. ### metafields value: `StatefulRemoteSubscribable` The metafields that apply to the current checkout. Metafields are stored locally on the client and are applied to the order object after the checkout completes. These metafields are shared by all extensions running on checkout, and persist for as long as the customer is working on this checkout. Once the order is created, you can query these metafields using the [GraphQL Admin API](https://shopify.dev/docs/admin-api/graphql/reference/orders/order#metafield-2021-01) > Tip: > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later. ### note value: `StatefulRemoteSubscribable` A note left by the customer to the merchant, either in their cart or during checkout. ### query value: `>(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` The method used to query the Storefront GraphQL API with a prefetched token. Refer to [Storefront API access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/storefront-api) for more information. ### selectedPaymentOptions value: `StatefulRemoteSubscribable` Payment options selected by the buyer. ### sessionToken value: `SessionToken` The session token providing a set of claims as a signed JSON Web Token (JWT). The token has a TTL of 5 minutes. If the previous token expires, this value will reflect a new session token with a new signature and expiry. Refer to [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/session-token) for more information. ### settings value: `StatefulRemoteSubscribable` The settings matching the settings definition written in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file. Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/settings#examples) for more information. > Note: When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings. ### shippingAddress value: `StatefulRemoteSubscribable` The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke. An address value is only present if delivery is required. Otherwise, the subscribable value is undefined. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### shop value: `Shop` The shop where the checkout is taking place. ### storage value: `Storage` The key-value storage for the extension. It uses `localStorage` and should persist across the customer's current checkout session. > Caution: Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout. Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier, each activated extension target had its own storage. ### ui value: `Ui` Methods to interact with the extension’s UI. ### version value: `Version` The renderer version being used for the extension. ### Analytics ### publish value: `(name: string, data: Record) => Promise` Publish method to emit analytics events to [Web Pixels](https://shopify.dev/docs/apps/marketing). ### visitor value: `(data: { email?: string; phone?: string; }) => Promise` A method for capturing details about a visitor on the online store. ### VisitorSuccess Represents a successful visitor result. ### type value: `"success"` Indicates that the visitor information was validated and submitted. ### VisitorError Represents an unsuccessful visitor result. ### message value: `string` A message that explains the error. This message is useful for debugging. It's **not** localized, and therefore should not be presented directly to the buyer. ### type value: `"error"` Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property. ### AppliedGiftCard ### amountUsed value: `Money` The amount of the applied gift card that will be used when the checkout is completed. ### balance value: `Money` The current balance of the applied gift card prior to checkout completion. ### lastCharacters value: `string` The last four characters of the applied gift card's code. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### ApplyTrackingConsentChangeType #### Returns: Promise #### Params: - visitorConsent: VisitorConsentChange export type ApplyTrackingConsentChangeType = ( visitorConsent: VisitorConsentChange, ) => Promise; ### VisitorConsentChange ### analytics value: `boolean` Visitor consents to recording data to understand how customers interact with the site. ### marketing value: `boolean` Visitor consents to ads and marketing communications based on customer interests. ### metafields value: `TrackingConsentMetafieldChange[]` Tracking consent metafield data to be saved. If the value is `null`, the metafield will be deleted. ### preferences value: `boolean` Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. ### saleOfData value: `boolean` Opts the visitor out of data sharing / sales. ### type value: `"changeVisitorConsent"` ### TrackingConsentMetafieldChange ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### value value: `string | null` The information to be stored as metadata. If the value is `null`, the metafield will be deleted. ### VisitorConsent ### analytics value: `boolean` Visitor consents to recording data to understand how customers interact with the site. ### marketing value: `boolean` Visitor consents to ads and marketing communications based on customer interests. ### preferences value: `boolean` Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. ### saleOfData value: `boolean` Opts the visitor out of data sharing / sales. ### TrackingConsentChangeResultSuccess The returned result of a successful tracking consent preference update. ### type value: `"success"` The type of the `TrackingConsentChangeResultSuccess` API. ### TrackingConsentChangeResultError The returned result of an unsuccessful tracking consent preference update 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 `TrackingConsentChangeResultError` API. ### AppMetafieldEntry A metafield associated with the shop or a resource on the checkout. ### metafield value: `AppMetafield` The metadata information. ### target value: `AppMetafieldEntryTarget` The target that is associated to the metadata. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`. ### AppMetafield Represents a custom metadata attached to a resource. ### key value: `string` The key name of a metafield. ### namespace value: `string` The namespace for a metafield. App owned metafield namespaces are returned using the `$app` format. See [app owned metafields](https://shopify.dev/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information. ### type value: `string` The metafield's type name. ### value value: `string | number | boolean` The value of a metafield. ### valueType value: `'boolean' | 'float' | 'integer' | 'json_string' | 'string'` The metafield’s information type. ### AppMetafieldEntryTarget The metafield owner. ### id value: `string` The numeric owner ID that is associated with the metafield. ### type value: `| 'customer' | 'product' | 'shop' | 'shopUser' | 'variant' | 'company' | 'companyLocation' | 'cart'` The type of the metafield owner. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### PaymentOption A payment option presented to the buyer. ### handle value: `string` The unique handle for the payment option. This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop. ### type value: `| 'creditCard' | 'deferred' | 'local' | 'manualPayment' | 'offsite' | 'other' | 'paymentOnDelivery' | 'redeemable' | 'wallet' | 'customOnsite'` The type of the payment option. Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions. | Type | Description | |---|---| | `creditCard` | A vaulted or manually entered credit card. | | `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. | | `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market | | `manualPayment` | A manual payment option such as an in-person retail transaction. | | `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. | | `other` | Another type of payment not defined here. | | `paymentOnDelivery` | A payment that will be collected on delivery. | | `redeemable` | A redeemable payment option such as a gift card or store credit. | | `wallet` | An integrated wallet such as PayPal, Google Pay, Apple Pay, etc. | | `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. | ### MailingAddress ### address1 value: `string` The first line of the buyer's address, including street name and number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` The second line of the buyer's address, like apartment number, suite, etc. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` The buyer's province code, such as state, province, prefecture, or region. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### BuyerIdentity ### customer value: `StatefulRemoteSubscribable` The buyer's customer account. The value is undefined if the buyer isn’t a known customer for this shop or if they haven't logged in yet. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### email value: `StatefulRemoteSubscribable` The email address of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `StatefulRemoteSubscribable` The phone number of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### purchasingCompany value: `StatefulRemoteSubscribable` Provides details of the company and the company location that the business customer is purchasing on behalf of. This includes information that can be used to identify the company and the company location that the business customer belongs to. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### Customer Information about a customer who has previously purchased from this shop. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### acceptsEmailMarketing value: `boolean` Defines if the customer accepts email marketing activities. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### acceptsMarketing value: `boolean` Defines if the customer email accepts marketing activities. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). > Caution: This field is deprecated and will be removed in a future version. Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead. ### acceptsSmsMarketing value: `boolean` Defines if the customer accepts SMS marketing activities. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### email value: `string` The email of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The first name of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### fullName value: `string` The full name of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### id value: `string` Customer ID. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### image value: `ImageDetails` The image associated with the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The last name of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### ordersCount value: `number` The number of previous orders made by this customer. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The phone number of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### storeCreditAccounts value: `StoreCreditAccount[]` The Store Credit Accounts owned by the customer and usable during the checkout process. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### StoreCreditAccount Information about a Store Credit Account. ### balance value: `Money` The current balance of the Store Credit Account. ### id value: `string` A globally-unique identifier. ### PurchasingCompany The information about a company that the business customer is purchasing on behalf of. ### company value: `Company` Includes information of the company that the business customer is purchasing on behalf of. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### location value: `CompanyLocation` Includes information of the company location that the business customer is purchasing on behalf of. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### Company ### externalId value: `string` The external ID of the company that can be set by the merchant. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### id value: `string` The company ID. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The name of the company. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### CompanyLocation ### externalId value: `string` The external ID of the company location that can be set by the merchant. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### id value: `string` The company location ID. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The name of the company location. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### BuyerJourney Provides details on the buyer's progression through the checkout. ### activeStep value: `StatefulRemoteSubscribable` What step of checkout the buyer is currently on. ### completed value: `StatefulRemoteSubscribable` This subscribable value will be true if the buyer completed submitting their order. For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order. ### intercept value: `(interceptor: Interceptor) => Promise<() => void>` Installs a function for intercepting and preventing progress on checkout. This returns a promise that resolves to a teardown function. Calling the teardown function will remove the interceptor. To block checkout progress, you must set the [block_progress](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration. If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension. ### steps value: `StatefulRemoteSubscribable` All possible steps a buyer can take to complete the checkout. These steps may vary depending on the type of checkout or the shop's configuration. ### BuyerJourneyStepReference What step of checkout the buyer is currently on. ### handle value: `BuyerJourneyStepHandle` The handle that uniquely identifies the buyer journey step. ### Interceptor A function for intercepting and preventing navigation on checkout. You can block navigation by returning an object with `{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState, errors?: ValidationErrors[]}`. If you do, then you're expected to also update some part of your UI to reflect the reason why navigation was blocked, either by targeting checkout UI fields, passing errors to the page level or rendering the errors in your extension. #### Returns: InterceptorRequest | Promise #### Params: - interceptorProps: InterceptorProps export type Interceptor = ( interceptorProps: InterceptorProps, ) => InterceptorRequest | Promise; ### InterceptorProps ### canBlockProgress value: `boolean` Whether the interceptor has the capability to block a buyer's progress through checkout. This ability might be granted by a merchant in differing checkout contexts. ### InterceptorRequestAllow ### behavior value: `"allow"` Indicates that the interceptor will allow the buyer's journey to continue. ### perform value: `(result: InterceptorResult) => void | Promise` This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once. ### InterceptorResultAllow ### behavior value: `"allow"` Indicates that the buyer was allowed to progress through checkout. ### InterceptorResultBlock ### behavior value: `"block"` Indicates that some part of the checkout UI intercepted and prevented the buyer’s progress. The buyer typically needs to take some action to resolve this issue and to move on to the next step. ### InterceptorRequestBlock ### behavior value: `"block"` Indicates that the interceptor will block the buyer's journey from continuing. ### errors value: `ValidationError[]` Used to pass errors to the checkout UI, outside your extension's UI boundaries. ### perform value: `(result: InterceptorResult) => void | Promise` This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once. ### reason value: `string` The reason for blocking the interceptor request. This value isn't presented to the buyer, so it doesn't need to be localized. The value is used only for Shopify’s own internal debugging and metrics. ### ValidationError ### message value: `string` Error message to be displayed to the buyer. ### target value: `string` The checkout UI field that the error is associated with. Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode` See the [supported targets](https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets) for more information. ### BuyerJourneyStep ### disabled value: `boolean` The disabled state of the buyer journey step. This value will be true if the buyer has not reached the step yet. For example, if the buyer has not reached the `shipping` step yet, `shipping` would be disabled. ### handle value: `BuyerJourneyStepHandle` The handle that uniquely identifies the buyer journey step. ### label value: `string` The localized label of the buyer journey step. ### to value: `string` The url of the buyer journey step. This property leverages the `shopify:` protocol E.g. `shopify:cart` or `shopify:checkout/information`. ### CheckoutSettings Settings describing the behavior of the buyer's checkout. ### orderSubmission value: `'DRAFT_ORDER' | 'ORDER'` The type of order that will be created once the buyer completes checkout. ### paymentTermsTemplate value: `PaymentTermsTemplate` Represents the merchant configured payment terms. ### shippingAddress value: `ShippingAddressSettings` Settings describing the behavior of the shipping address. ### PaymentTermsTemplate Represents the payment terms template object. ### dueDate value: `string` The due date for net payment terms as a ISO 8601 formatted string `YYYY-MM-DDTHH:mm:ss.sssZ`. ### dueInDays value: `number` The number of days between the issued date and due date if using net payment terms. ### id value: `string` A globally-unique ID. ### name value: `string` The name of the payment terms translated to the buyer's current language. Refer to [localization.language](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-localization). ### ShippingAddressSettings Settings describing the behavior of the shipping address. ### isEditable value: `boolean` Describes whether the buyer can ship to any address during checkout. ### CartCost ### subtotalAmount value: `StatefulRemoteSubscribable` A `Money` value representing the subtotal value of the items in the cart at the current step of checkout. ### totalAmount value: `StatefulRemoteSubscribable` A `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated. ### totalShippingAmount value: `StatefulRemoteSubscribable` A `Money` value representing the total shipping a buyer can expect to pay at the current step of checkout. This value includes shipping discounts. Returns undefined if shipping has not been negotiated yet, such as on the information step. ### totalTaxAmount value: `StatefulRemoteSubscribable` A `Money` value representing the total tax a buyer can expect to pay at the current step of checkout or the total tax included in product and shipping prices. Returns undefined if taxes are unavailable. ### CustomerPrivacy ### allowedProcessing value: `AllowedProcessing` An object containing flags for each consent property denoting whether they can be processed based on visitor consent, merchant configuration, and user location. ### metafields value: `TrackingConsentMetafield[]` Stored tracking consent metafield data. ### region value: `CustomerPrivacyRegion` Details about the visitor's current location for use in evaluating if more granular consent controls should render. ### saleOfDataRegion value: `boolean` Whether the visitor is in a region requiring data sale opt-outs. ### shouldShowBanner value: `boolean` Whether a consent banner should be displayed by default when the page loads. Use this as the initial open/expanded state of the consent banner. This is determined by the visitor's current privacy consent, the shop's [region visibility configuration](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located. ### visitorConsent value: `VisitorConsent` An object containing the customer's current privacy consent settings. * ### AllowedProcessing ### analytics value: `boolean` Can collect customer analytics about how the shop was used and interactions made on the shop. ### marketing value: `boolean` Can collect customer preference for marketing, attribution and targeted advertising from the merchant. ### preferences value: `boolean` Can collect customer preferences such as language, currency, size, and more. ### saleOfData value: `boolean` Can collect customer preference for sharing data with third parties, usually for behavioral advertising. ### TrackingConsentMetafield ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### value value: `string` The information to be stored as metadata. ### CustomerPrivacyRegion ### countryCode value: `CountryCode` The [ISO 3166 Alpha-2 format](https://www.iso.org/iso-3166-country-codes.html) for the buyer's country. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` The buyer's province code, such as state, province, prefecture, or region. Province codes can be found by clicking on the `Subdivisions assigned codes` column for countries listed [here](https://en.wikipedia.org/wiki/ISO_3166-2). {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### DeliveryGroup Represents the delivery information and options available for one or more cart lines. ### deliveryOptions value: `DeliveryOption[]` The delivery options available for the delivery group. ### groupType value: `DeliveryGroupType` The type of the delivery group. ### id value: `string` The unique identifier of the delivery group. On the Thank You page this value is undefined. ### isDeliveryRequired value: `boolean` Whether delivery is required for the delivery group. ### selectedDeliveryOption value: `DeliveryOptionReference` The selected delivery option for the delivery group. ### targetedCartLines value: `CartLineReference[]` The cart line references associated to the delivery group. ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` The cost of the delivery. ### costAfterDiscounts value: `Money` The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### DeliveryEstimate ### timeInTransit value: `NumberRange` The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `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). ### value value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### PickupPointOption ### carrier value: `PickupPointCarrier` Information about the carrier that ships to the pickup point. ### code value: `string` The code of the delivery option. ### cost value: `Money` The cost to ship to this pickup point. ### costAfterDiscounts value: `Money` The cost to ship to this pickup point including discounts. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupPointLocation` The location details of the pickup point. ### metafields value: `Metafield[]` The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickupPoint"` The type of this delivery option. ### PickupPointCarrier ### code value: `string` The code identifying the carrier. ### name value: `string` The name of the carrier. ### PickupPointLocation ### address value: `MailingAddress` The address of the pickup point. ### handle value: `string` The unique identifier of the pickup point. ### name value: `string` The name of the pickup point. ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` The location details of the pickup location. ### metafields value: `Metafield[]` The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` The address of the pickup location. ### name value: `string` The name of the pickup location. ### DeliveryOptionReference Represents a reference to a delivery option. ### handle value: `string` The unique identifier of the referenced delivery option. ### CartLineReference Represents a reference to a cart line. ### id value: `string` The unique identifier of the referenced cart line. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartDiscountCode ### code value: `string` The code for the discount ### Extension The meta information about an extension target. ### apiVersion value: `ApiVersion` The API version that was set in the extension config file. ### capabilities value: `StatefulRemoteSubscribable` The allowed capabilities of the extension, defined in your [shopify.extension.toml](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file. * [`api_access`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a customer's progress and the merchant has allowed this blocking behavior. * [`collect_buyer_consent.sms_marketing`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing. * [`collect_buyer_consent.customer_privacy`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register customer consent decisions that will be honored on Shopify-managed services. * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. ### editor value: `Editor` Information about the editor where the extension is being rendered. If the value is undefined, then the extension is not running in an editor. ### rendered value: `StatefulRemoteSubscribable` A Boolean to show whether your extension is currently rendered to the screen. Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that will appear on a later step of the checkout. Your extension might also continue to run after the customer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the customer navigates back. ### scriptUrl value: `string` The URL to the script that started the extension target. ### target value: `Target` The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file. ### version value: `string` The published version of the running extension target. For unpublished extensions, the value is `undefined`. ### Editor ### type value: `"checkout"` Indicates whether the extension is rendering in the checkout editor. ### I18n ### formatCurrency value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string` Returns a localized currency value. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. It uses the buyer's locale by default. ### formatDate value: `(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string` Returns a localized date value. This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses the buyer's locale by default. Formatting options can be passed in as options. ### formatNumber value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string` Returns a localized number. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. It uses the buyer's locale by default. ### translate value: `I18nTranslate` Returns translated content in the buyer's locale, as supported by the extension. - `options.count` is a special numeric value used in pluralization. - The other option keys and values are treated as replacements for interpolation. - If the replacements are all primitives, then `translate()` returns a single string. - If replacements contain UI components, then `translate()` returns an array of elements. ### CartInstructions ### attributes value: `AttributesCartInstructions` Cart instructions related to cart attributes. ### delivery value: `DeliveryCartInstructions` Cart instructions related to delivery. ### discounts value: `DiscountsCartInstructions` Cart instructions related to discounts. ### lines value: `CartLinesCartInstructions` Cart instructions related to cart lines. ### metafields value: `MetafieldsCartInstructions` Cart instructions related to metafields. ### notes value: `NotesCartInstructions` Cart instructions related to notes. ### AttributesCartInstructions ### canUpdateAttributes value: `boolean` Indicates whether or not cart attributes can be updated. ### DeliveryCartInstructions ### canSelectCustomAddress value: `boolean` Indicates whether a buyer can select a custom address. When true, this implies extensions can update the delivery address. ### DiscountsCartInstructions ### canUpdateDiscountCodes value: `boolean` Indicates whether or not discount codes can be updated. ### CartLinesCartInstructions ### canAddCartLine value: `boolean` Indicates whether or not new cart lines can be added. ### canRemoveCartLine value: `boolean` Indicates whether or not cart lines can be removed. ### canUpdateCartLine value: `boolean` Indicates whether or not cart lines can be updated. ### MetafieldsCartInstructions ### canDeleteCartMetafield value: `boolean` Indicates whether or not cart metafields can be deleted. ### canSetCartMetafields value: `boolean` Indicates whether or not cart metafields can be added or updated. ### NotesCartInstructions ### canUpdateNote value: `boolean` Indicates whether or not notes can be updated. ### CartLine ### attributes value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `string` 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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### sku value: `string` The product variant's sku. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ### Localization ### country value: `StatefulRemoteSubscribable` The country context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. If the country is unknown, then the value is undefined. ### currency value: `StatefulRemoteSubscribable` The currency that the customer sees for money amounts in the checkout. ### extensionLanguage value: `StatefulRemoteSubscribable` This is the customer's language, as supported by the extension. If the customer's actual language is not supported by the extension, then this is the language that is used for translations. For example, if the customer's language is 'fr-CA' but your extension only supports translations for 'fr', then the `isoCode` for this language is 'fr'. If your extension does not provide french translations at all, then this value is the default locale for your extension (that is, the one matching your .default.json file). ### language value: `StatefulRemoteSubscribable` The language the customer sees in the checkout. ### market value: `StatefulRemoteSubscribable` The [market](https://shopify.dev/docs/apps/markets) context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. If the market is unknown, then the value is undefined. ### timezone value: `StatefulRemoteSubscribable` The buyer’s time zone. ### Country ### isoCode value: `CountryCode` The ISO-3166-1 code for this country. ### Currency ### isoCode value: `CurrencyCode` The ISO-4217 code for this currency. ### Language ### isoCode value: `string` The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code. ### Market ### handle value: `string` The human-readable, shop-scoped identifier for the market. ### id value: `string` A globally-unique identifier for a market. ### LocalizedField ### key value: `LocalizedFieldKey` ### title value: `string` ### value value: `string` ### GraphQLError GraphQL error returned by the Shopify Storefront APIs. ### extensions value: `{ requestId: string; code: string; }` ### message value: `string` ### SelectedPaymentOption ### handle value: `string` The unique handle for the payment option. This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop. ### type value: `| 'creditCard' | 'deferred' | 'local' | 'manualPayment' | 'offsite' | 'other' | 'paymentOnDelivery' | 'redeemable' | 'wallet' | 'customOnsite'` The type of the payment option. Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions. | Type | Description | |---|---| | `creditCard` | A vaulted or manually entered credit card. | | `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. | | `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market | | `manualPayment` | A manual payment option such as an in-person retail transaction. | | `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. | | `other` | Another type of payment not defined here. | | `paymentOnDelivery` | A payment that will be collected on delivery. | | `redeemable` | A redeemable payment option such as a gift card or store credit. | | `wallet` | An integrated wallet such as PayPal, Google Pay, Apple Pay, etc. | | `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. | ### SessionToken ### get value: `() => Promise` Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself. ### ShippingAddress ### address1 value: `string` The first line of the buyer's address, including street name and number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` The second line of the buyer's address, like apartment number, suite, etc. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### oneTimeUse value: `boolean` Specifies whether the address should be saved to the buyer's account. ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` The buyer's province code, such as state, province, prefecture, or region. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### Shop ### id value: `string` The shop ID. ### myshopifyDomain value: `string` The shop's myshopify.com domain. ### name value: `string` The name of the shop. ### storefrontUrl value: `string` The primary storefront URL. > Caution: > As of version `2024-04` this value will no longer have a trailing slash. ### Storage A key-value storage object for the extension. Stored data is only available to this specific extension and any of its instances. The storage backend is implemented with `localStorage` and should persist across the buyer's checkout session. However, data persistence isn't guaranteed. ### delete value: `(key: string) => Promise` Delete stored data by key. ### read value: `(key: string) => Promise` Read and return a stored value by key. The stored data is deserialized from JSON and returned as its original primitive. Returns `null` if no stored data exists. ### write value: `(key: string, data: any) => Promise` Write stored data for this key. The data must be serializable to JSON. ### Ui ### overlay value: `Overlay` Allows the extension to close an overlay programmatically. Supported overlay components are [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/modal), [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/sheet) and [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/popover). ### Overlay ### close value: `(overlayId: string) => void` Closes the overlay with the given ID. ## Related - [APIs](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout)