# ExtensionTargets
A [target](https://shopify.dev/docs/apps/app-extensions/configuration#targets) represents where your checkout UI extension will appear.
You register for [targets](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview) in your [configuration file](https://shopify.dev/docs/api/checkout-ui-extensions/configuration), and you include a JavaScript function that will run at that location in checkout.
The API for each extension target is passed as an argument to your function. While all targets inherit the [`StandardApi`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi), not all of them share the same properties and methods.
For example, the [`purchase.checkout.cart-line-item.render-after`](#typesofextensiontargets-propertydetail-purchasecheckoutcartlineitemrenderafter) target has access to the [`CheckoutApi`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi) to modify a checkout, but the [`purchase.thank-you.cart-line-item.render-after`](#typesofextensiontargets-propertydetail-purchasethankyoucartlineitemrenderafter) target does not.
```jsx
import {
reactExtension,
Banner,
useApi,
} from '@shopify/ui-extensions-react/checkout';
function Extension() {
const {extension} = useApi();
const {target} = extension;
return (
This extension is rendering in the {target}
extension target.
);
}
// You can export a single extension target per file
// ./Actions.jsx
export default reactExtension(
'purchase.checkout.actions.render-before',
() => ,
);
// ./Delivery.jsx
export default reactExtension(
'purchase.checkout.delivery-address.render-before',
() => ,
);
// ./ShippingOptions.jsx
export default reactExtension(
'purchase.checkout.shipping-option-list.render-after',
() => ,
);
// ./Block.jsx
export default reactExtension(
'purchase.checkout.block.render',
() => ,
);
```
```js
import {
extension,
Banner,
} from '@shopify/ui-extensions/checkout';
function renderExtension(root, {extension}) {
root.appendChild(
root.createComponent(
Banner,
{},
`This extension is rendering in the ${extension.target} extension target.`,
),
);
}
// You can export single a extension target per file
// ./Actions.jsx
export default extension(
'purchase.checkout.actions.render-before',
renderExtension,
);
// ./Delivery.jsx
export default extension(
'purchase.checkout.delivery-address.render-before',
renderExtension,
);
// ./ShippingOptions.jsx
export default extension(
'purchase.checkout.shipping-option-list.render-after',
renderExtension,
);
// ./Block.jsx
export default extension(
'purchase.checkout.block.render',
renderExtension,
);
```
```toml
api_version = "2023-07"
[[extensions]]
name = "My checkout extension"
handle = "checkout-ui"
type = "ui_extension"
[[extensions.targeting]]
target = "purchase.checkout.actions.render-before"
module = "./Actions.jsx"
[[extensions.targeting]]
target = "purchase.checkout.delivery-address.render-before"
module = "./Delivery.jsx"
[[extensions.targeting]]
target = "purchase.checkout.shipping-option-list.render-after"
module = "./ShippingOptions.jsx"
[[extensions.targeting]]
target = "purchase.checkout.block.render"
module = "./Block.jsx"
```
## Types of extension targets
See a [visual representation](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) of each extension target.
### ExtensionTargets
A UI extension will register for one or more extension targets using `shopify.extend()`.
An extension target in a UI extension is a plain JavaScript function.
This function receives some API for interacting with the application,
and is expected to return a value in a specific shape.
The input arguments and the output type are different
for each extension target.
### purchase.checkout.actions.render-before
value: `RenderExtension<
CheckoutApi & StandardApi<'purchase.checkout.actions.render-before'>,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CheckoutApi: 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`](https://shopify.dev/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;
/**
* 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/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;
/**
* 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/standardapi#properties-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 buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
*/
applyDiscountCodeChange(
change: DiscountCodeChange,
): 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/standardapi#properties-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.
*/
applyGiftCardChange(change: GiftCardChange): 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/standardapi#properties-propertydetail-metafields) property.
*/
applyMetafieldChange(change: MetafieldChange): 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/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;
/**
* @private
*/
experimentalIsShopAppStyle?: boolean;
/**
* 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*/
applyShippingAddressChange?(
change: ShippingAddressChange,
): Promise;
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* Utilities for translating content and formatting values according to the current
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
* of the checkout.
*
* See [localization examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
* for more information.
*/
i18n: I18n;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable;
/**
* Details about the location, language, and currency of the buyer. 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/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: Localization;
/**
* 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)
*/
metafields: StatefulRemoteSubscribable;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable;
/**
* Used to query the Storefront GraphQL API with a prefetched token.
*
* See [storefront api access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
*/
query: (
query: string,
options?: {variables?: Variables; version?: StorefrontApiVersion},
) => Promise<{data?: Data; errors?: GraphQLError[]}>;
/**
* Payment options selected by the buyer.
*/
selectedPaymentOptions: StatefulRemoteSubscribable;
/**
* Provides access to session tokens, which can be used to verify token claims on your app's server.
*
* See [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
*/
sessionToken: SessionToken;
/**
* The settings matching the settings definition written in the
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
*
* See [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) 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.
*/
settings: StatefulRemoteSubscribable;
/**
* The proposed buyer 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).
*/
shippingAddress?: StatefulRemoteSubscribable;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Key-value storage for the extension target.
*/
storage: Storage;
/**
* Methods to interact with the extension's UI.
*/
ui: Ui;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
}
- Extension: export interface Extension {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* 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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable;
/**
* The URL to the script that started the extension target.
*/
scriptUrl: string;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*/
target: Target;
/**
* The published version of the running extension target.
*
* For unpublished extensions, the value is `undefined`.
*
* @example 3.0.10
*/
version?: string;
}
- AnyComponent: AnyComponent
A static extension target that is rendered immediately before any actions within each step.
### Checkout::Actions::RenderBefore
value: `RenderExtension<
CheckoutApi & StandardApi<'Checkout::Actions::RenderBefore'>,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CheckoutApi: 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`](https://shopify.dev/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;
/**
* 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/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;
/**
* 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/standardapi#properties-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 buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
*/
applyDiscountCodeChange(
change: DiscountCodeChange,
): 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/standardapi#properties-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.
*/
applyGiftCardChange(change: GiftCardChange): 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/standardapi#properties-propertydetail-metafields) property.
*/
applyMetafieldChange(change: MetafieldChange): 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/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;
/**
* @private
*/
experimentalIsShopAppStyle?: boolean;
/**
* 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*/
applyShippingAddressChange?(
change: ShippingAddressChange,
): Promise;
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* Utilities for translating content and formatting values according to the current
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
* of the checkout.
*
* See [localization examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
* for more information.
*/
i18n: I18n;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable;
/**
* Details about the location, language, and currency of the buyer. 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/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: Localization;
/**
* 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)
*/
metafields: StatefulRemoteSubscribable;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable;
/**
* Used to query the Storefront GraphQL API with a prefetched token.
*
* See [storefront api access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
*/
query: (
query: string,
options?: {variables?: Variables; version?: StorefrontApiVersion},
) => Promise<{data?: Data; errors?: GraphQLError[]}>;
/**
* Payment options selected by the buyer.
*/
selectedPaymentOptions: StatefulRemoteSubscribable;
/**
* Provides access to session tokens, which can be used to verify token claims on your app's server.
*
* See [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
*/
sessionToken: SessionToken;
/**
* The settings matching the settings definition written in the
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
*
* See [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) 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.
*/
settings: StatefulRemoteSubscribable;
/**
* The proposed buyer 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).
*/
shippingAddress?: StatefulRemoteSubscribable;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Key-value storage for the extension target.
*/
storage: Storage;
/**
* Methods to interact with the extension's UI.
*/
ui: Ui;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
}
- Extension: export interface Extension {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* 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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable;
/**
* The URL to the script that started the extension target.
*/
scriptUrl: string;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*/
target: Target;
/**
* The published version of the running extension target.
*
* For unpublished extensions, the value is `undefined`.
*
* @example 3.0.10
*/
version?: string;
}
- AnyComponent: AnyComponent
A static extension target that is rendered immediately before any actions within each step.
### purchase.checkout.cart-line-list.render-after
value: `RenderExtension<
CheckoutApi & StandardApi<'purchase.checkout.cart-line-list.render-after'>,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CheckoutApi: 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`](https://shopify.dev/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;
/**
* 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/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;
/**
* 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/standardapi#properties-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 buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
*/
applyDiscountCodeChange(
change: DiscountCodeChange,
): 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/standardapi#properties-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.
*/
applyGiftCardChange(change: GiftCardChange): 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/standardapi#properties-propertydetail-metafields) property.
*/
applyMetafieldChange(change: MetafieldChange): 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/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;
/**
* @private
*/
experimentalIsShopAppStyle?: boolean;
/**
* 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*/
applyShippingAddressChange?(
change: ShippingAddressChange,
): Promise;
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* Utilities for translating content and formatting values according to the current
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
* of the checkout.
*
* See [localization examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
* for more information.
*/
i18n: I18n;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable;
/**
* Details about the location, language, and currency of the buyer. 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/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: Localization;
/**
* 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)
*/
metafields: StatefulRemoteSubscribable;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable;
/**
* Used to query the Storefront GraphQL API with a prefetched token.
*
* See [storefront api access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
*/
query: (
query: string,
options?: {variables?: Variables; version?: StorefrontApiVersion},
) => Promise<{data?: Data; errors?: GraphQLError[]}>;
/**
* Payment options selected by the buyer.
*/
selectedPaymentOptions: StatefulRemoteSubscribable;
/**
* Provides access to session tokens, which can be used to verify token claims on your app's server.
*
* See [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
*/
sessionToken: SessionToken;
/**
* The settings matching the settings definition written in the
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
*
* See [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) 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.
*/
settings: StatefulRemoteSubscribable;
/**
* The proposed buyer 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).
*/
shippingAddress?: StatefulRemoteSubscribable;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Key-value storage for the extension target.
*/
storage: Storage;
/**
* Methods to interact with the extension's UI.
*/
ui: Ui;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
}
- Extension: export interface Extension {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* 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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable;
/**
* The URL to the script that started the extension target.
*/
scriptUrl: string;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*/
target: Target;
/**
* The published version of the running extension target.
*
* For unpublished extensions, the value is `undefined`.
*
* @example 3.0.10
*/
version?: string;
}
- AnyComponent: AnyComponent
A static extension target that is rendered after all line items.
### Checkout::CartLines::RenderAfter
value: `RenderExtension<
CheckoutApi &
StandardApi<'Checkout::CartLines::RenderAfter'> &
OrderStatusApi,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CheckoutApi: 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`](https://shopify.dev/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;
/**
* 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/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;
/**
* 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/standardapi#properties-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 buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
*/
applyDiscountCodeChange(
change: DiscountCodeChange,
): 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/standardapi#properties-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.
*/
applyGiftCardChange(change: GiftCardChange): 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/standardapi#properties-propertydetail-metafields) property.
*/
applyMetafieldChange(change: MetafieldChange): 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/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;
/**
* @private
*/
experimentalIsShopAppStyle?: boolean;
/**
* 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*/
applyShippingAddressChange?(
change: ShippingAddressChange,
): Promise;
}
- CartLine: 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[];
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* Utilities for translating content and formatting values according to the current
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
* of the checkout.
*
* See [localization examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
* for more information.
*/
i18n: I18n;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable;
/**
* Details about the location, language, and currency of the buyer. 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/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: Localization;
/**
* 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)
*/
metafields: StatefulRemoteSubscribable;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable;
/**
* Used to query the Storefront GraphQL API with a prefetched token.
*
* See [storefront api access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
*/
query: (
query: string,
options?: {variables?: Variables; version?: StorefrontApiVersion},
) => Promise<{data?: Data; errors?: GraphQLError[]}>;
/**
* Payment options selected by the buyer.
*/
selectedPaymentOptions: StatefulRemoteSubscribable;
/**
* Provides access to session tokens, which can be used to verify token claims on your app's server.
*
* See [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
*/
sessionToken: SessionToken;
/**
* The settings matching the settings definition written in the
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
*
* See [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) 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.
*/
settings: StatefulRemoteSubscribable;
/**
* The proposed buyer 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).
*/
shippingAddress?: StatefulRemoteSubscribable;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Key-value storage for the extension target.
*/
storage: Storage;
/**
* Methods to interact with the extension's UI.
*/
ui: Ui;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
}
- Extension: export interface Extension {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* 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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable;
/**
* The URL to the script that started the extension target.
*/
scriptUrl: string;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*/
target: Target;
/**
* The published version of the running extension target.
*
* For unpublished extensions, the value is `undefined`.
*
* @example 3.0.10
*/
version?: string;
}
- AnyComponent: AnyComponent
- OrderStatusApi: export interface OrderStatusApi {
/**
* Order information that's available post-checkout.
*/
order: StatefulRemoteSubscribable;
}
- Order: export interface Order {
/**
* A globally-unique identifier.
* @example 'gid://shopify/Order/1'
*/
id: string;
/**
* Unique identifier for the order that appears on the order.
* @example '#1000'
*/
name: string;
/**
* If cancelled, the time at which the order was cancelled.
*/
cancelledAt?: string;
}
A static extension target that is rendered after all line items.
### purchase.checkout.cart-line-item.render-after
value: `RenderExtension<
CheckoutApi &
CartLineItemApi &
StandardApi<'purchase.checkout.cart-line-item.render-after'>,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CheckoutApi: 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`](https://shopify.dev/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;
/**
* 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/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;
/**
* 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/standardapi#properties-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 buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
*/
applyDiscountCodeChange(
change: DiscountCodeChange,
): 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/standardapi#properties-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.
*/
applyGiftCardChange(change: GiftCardChange): 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/standardapi#properties-propertydetail-metafields) property.
*/
applyMetafieldChange(change: MetafieldChange): 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/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;
/**
* @private
*/
experimentalIsShopAppStyle?: boolean;
/**
* 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*/
applyShippingAddressChange?(
change: ShippingAddressChange,
): Promise;
}
- CartLine: 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[];
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* Utilities for translating content and formatting values according to the current
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
* of the checkout.
*
* See [localization examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
* for more information.
*/
i18n: I18n;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable;
/**
* Details about the location, language, and currency of the buyer. 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/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: Localization;
/**
* 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)
*/
metafields: StatefulRemoteSubscribable;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable;
/**
* Used to query the Storefront GraphQL API with a prefetched token.
*
* See [storefront api access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
*/
query: (
query: string,
options?: {variables?: Variables; version?: StorefrontApiVersion},
) => Promise<{data?: Data; errors?: GraphQLError[]}>;
/**
* Payment options selected by the buyer.
*/
selectedPaymentOptions: StatefulRemoteSubscribable;
/**
* Provides access to session tokens, which can be used to verify token claims on your app's server.
*
* See [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
*/
sessionToken: SessionToken;
/**
* The settings matching the settings definition written in the
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
*
* See [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) 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.
*/
settings: StatefulRemoteSubscribable;
/**
* The proposed buyer 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).
*/
shippingAddress?: StatefulRemoteSubscribable;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Key-value storage for the extension target.
*/
storage: Storage;
/**
* Methods to interact with the extension's UI.
*/
ui: Ui;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
}
- Extension: export interface Extension {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* 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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable;
/**
* The URL to the script that started the extension target.
*/
scriptUrl: string;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*/
target: Target;
/**
* The published version of the running extension target.
*
* For unpublished extensions, the value is `undefined`.
*
* @example 3.0.10
*/
version?: string;
}
- AnyComponent: AnyComponent
- CartLineItemApi: export interface CartLineItemApi {
/**
* The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable`.
*/
target: StatefulRemoteSubscribable;
}
A static extension target that renders on every line item, inside the details
under the line item properties element.
### Checkout::CartLineDetails::RenderAfter
value: `RenderExtension<
CheckoutApi &
CartLineItemApi &
StandardApi<'Checkout::CartLineDetails::RenderAfter'> &
OrderStatusApi,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CheckoutApi: 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`](https://shopify.dev/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;
/**
* 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/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;
/**
* 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/standardapi#properties-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 buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
*/
applyDiscountCodeChange(
change: DiscountCodeChange,
): 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/standardapi#properties-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.
*/
applyGiftCardChange(change: GiftCardChange): 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/standardapi#properties-propertydetail-metafields) property.
*/
applyMetafieldChange(change: MetafieldChange): 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/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;
/**
* @private
*/
experimentalIsShopAppStyle?: boolean;
/**
* 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*/
applyShippingAddressChange?(
change: ShippingAddressChange,
): Promise;
}
- CartLine: 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[];
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* Utilities for translating content and formatting values according to the current
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
* of the checkout.
*
* See [localization examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
* for more information.
*/
i18n: I18n;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable;
/**
* Details about the location, language, and currency of the buyer. 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/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: Localization;
/**
* 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)
*/
metafields: StatefulRemoteSubscribable;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable;
/**
* Used to query the Storefront GraphQL API with a prefetched token.
*
* See [storefront api access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
*/
query: (
query: string,
options?: {variables?: Variables; version?: StorefrontApiVersion},
) => Promise<{data?: Data; errors?: GraphQLError[]}>;
/**
* Payment options selected by the buyer.
*/
selectedPaymentOptions: StatefulRemoteSubscribable;
/**
* Provides access to session tokens, which can be used to verify token claims on your app's server.
*
* See [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
*/
sessionToken: SessionToken;
/**
* The settings matching the settings definition written in the
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
*
* See [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) 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.
*/
settings: StatefulRemoteSubscribable;
/**
* The proposed buyer 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).
*/
shippingAddress?: StatefulRemoteSubscribable;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Key-value storage for the extension target.
*/
storage: Storage;
/**
* Methods to interact with the extension's UI.
*/
ui: Ui;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
}
- Extension: export interface Extension {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* 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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable;
/**
* The URL to the script that started the extension target.
*/
scriptUrl: string;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*/
target: Target;
/**
* The published version of the running extension target.
*
* For unpublished extensions, the value is `undefined`.
*
* @example 3.0.10
*/
version?: string;
}
- AnyComponent: AnyComponent
- OrderStatusApi: export interface OrderStatusApi {
/**
* Order information that's available post-checkout.
*/
order: StatefulRemoteSubscribable;
}
- Order: export interface Order {
/**
* A globally-unique identifier.
* @example 'gid://shopify/Order/1'
*/
id: string;
/**
* Unique identifier for the order that appears on the order.
* @example '#1000'
*/
name: string;
/**
* If cancelled, the time at which the order was cancelled.
*/
cancelledAt?: string;
}
- CartLineItemApi: export interface CartLineItemApi {
/**
* The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable`.
*/
target: StatefulRemoteSubscribable;
}
A static extension target that renders on every line item, inside the details
under the line item properties element.
### purchase.cart-line-item.line-components.render
value: `RenderExtension<
CartLineItemApi &
StandardApi<'purchase.cart-line-item.line-components.render'>,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CartLine: 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[];
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* Utilities for translating content and formatting values according to the current
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
* of the checkout.
*
* See [localization examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
* for more information.
*/
i18n: I18n;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable;
/**
* Details about the location, language, and currency of the buyer. 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/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: Localization;
/**
* 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)
*/
metafields: StatefulRemoteSubscribable;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable;
/**
* Used to query the Storefront GraphQL API with a prefetched token.
*
* See [storefront api access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
*/
query: (
query: string,
options?: {variables?: Variables; version?: StorefrontApiVersion},
) => Promise<{data?: Data; errors?: GraphQLError[]}>;
/**
* Payment options selected by the buyer.
*/
selectedPaymentOptions: StatefulRemoteSubscribable;
/**
* Provides access to session tokens, which can be used to verify token claims on your app's server.
*
* See [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
*/
sessionToken: SessionToken;
/**
* The settings matching the settings definition written in the
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
*
* See [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) 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.
*/
settings: StatefulRemoteSubscribable;
/**
* The proposed buyer 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).
*/
shippingAddress?: StatefulRemoteSubscribable;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Key-value storage for the extension target.
*/
storage: Storage;
/**
* Methods to interact with the extension's UI.
*/
ui: Ui;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
}
- Extension: export interface Extension {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* 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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable;
/**
* The URL to the script that started the extension target.
*/
scriptUrl: string;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*/
target: Target;
/**
* The published version of the running extension target.
*
* For unpublished extensions, the value is `undefined`.
*
* @example 3.0.10
*/
version?: string;
}
- AnyComponent: AnyComponent
- CartLineItemApi: export interface CartLineItemApi {
/**
* The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable`.
*/
target: StatefulRemoteSubscribable;
}
A static extension target that renders on every line item, inside the details
under the line item properties element. It replaces the default component rendering.
### Checkout::CartLineDetails::RenderLineComponents
value: `RenderExtension<
CartLineItemApi &
StandardApi<'Checkout::CartLineDetails::RenderLineComponents'>,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CartLine: 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[];
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* Utilities for translating content and formatting values according to the current
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
* of the checkout.
*
* See [localization examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
* for more information.
*/
i18n: I18n;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable;
/**
* Details about the location, language, and currency of the buyer. 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/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: Localization;
/**
* 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)
*/
metafields: StatefulRemoteSubscribable;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable;
/**
* Used to query the Storefront GraphQL API with a prefetched token.
*
* See [storefront api access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
*/
query: (
query: string,
options?: {variables?: Variables; version?: StorefrontApiVersion},
) => Promise<{data?: Data; errors?: GraphQLError[]}>;
/**
* Payment options selected by the buyer.
*/
selectedPaymentOptions: StatefulRemoteSubscribable;
/**
* Provides access to session tokens, which can be used to verify token claims on your app's server.
*
* See [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
*/
sessionToken: SessionToken;
/**
* The settings matching the settings definition written in the
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
*
* See [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) 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.
*/
settings: StatefulRemoteSubscribable;
/**
* The proposed buyer 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).
*/
shippingAddress?: StatefulRemoteSubscribable;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Key-value storage for the extension target.
*/
storage: Storage;
/**
* Methods to interact with the extension's UI.
*/
ui: Ui;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
}
- Extension: export interface Extension {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* 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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable;
/**
* The URL to the script that started the extension target.
*/
scriptUrl: string;
/**
* 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.
*
* @example 'purchase.checkout.block.render'
* @see /docs/api/checkout-ui-extensions/2023-07/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*/
target: Target;
/**
* The published version of the running extension target.
*
* For unpublished extensions, the value is `undefined`.
*
* @example 3.0.10
*/
version?: string;
}
- AnyComponent: AnyComponent
- CartLineItemApi: export interface CartLineItemApi {
/**
* The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable`.
*/
target: StatefulRemoteSubscribable;
}
A static extension target that renders on every line item, inside the details
under the line item properties element. It replaces the default component rendering.
### purchase.checkout.contact.render-after
value: `RenderExtension<
CheckoutApi & StandardApi<'purchase.checkout.contact.render-after'>,
AnyComponent
>`
- RenderExtension: export interface RenderExtension<
Api,
AllowedComponents extends RemoteComponentType<
string,
any,
any
> = RemoteComponentType,
> {
(
connection: RenderExtensionConnection,
api: Api,
): void | Promise;
}
- CheckoutApi: 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`](https://shopify.dev/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;
/**
* 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/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;
/**
* 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/standardapi#properties-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 buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
*/
applyDiscountCodeChange(
change: DiscountCodeChange,
): 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/standardapi#properties-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.
*/
applyGiftCardChange(change: GiftCardChange): 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/standardapi#properties-propertydetail-metafields) property.
*/
applyMetafieldChange(change: MetafieldChange): 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/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;
/**
* @private
*/
experimentalIsShopAppStyle?: boolean;
/**
* 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*/
applyShippingAddressChange?(
change: ShippingAddressChange,
): Promise;
}
- StandardApi: export interface StandardApi {
/**
* Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
*/
analytics: Analytics;
/**
* Gift Cards that have been applied to the checkout.
*/
appliedGiftCards: 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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
*
* > Tip:
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
*/
appMetafields: StatefulRemoteSubscribable;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable;
/**
* All available payment options.
*/
availablePaymentOptions: StatefulRemoteSubscribable;
/**
* 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).
*/
buyerIdentity?: BuyerIdentity;
/**
* Provides details on the buyer's progression through the checkout.
*
* See [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
* examples for more information.
*/
buyerJourney: BuyerJourney;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
*/
deliveryGroups: StatefulRemoteSubscribable;
/**
* A list of discount codes currently applied to the checkout.
*/
discountCodes: StatefulRemoteSubscribable;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable