Choose a version:

ExtensionTargets

A target represents where your checkout UI extension will appear.

You register for targets in your configuration file, 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, not all of them share the same properties and methods.

For example, the purchase.checkout.cart-line-item.render-after target has access to the CheckoutApi to modify a checkout, but the purchase.thank-you.cart-line-item.render-after target does not.

Anchor to types of extension targetsTypes of extension targets

See a visual representation of each extension target.

Anchor to purchase.checkout.actions.render-before purchase.checkout.actions.render-before < & <'purchase.checkout.actions.render-before'>, > required: A static extension target that is rendered immediately before any actions within each step.
Anchor to purchase.checkout.cart-line-list.render-after purchase.checkout.cart-line-list.render-after < & <'purchase.checkout.cart-line-list.render-after'>, > required: A static extension target that is rendered after all line items.
Anchor to purchase.checkout.cart-line-item.render-after purchase.checkout.cart-line-item.render-after < & & <'purchase.checkout.cart-line-item.render-after'>, > required: A static extension target that renders on every line item, inside the details under the line item properties element.
Anchor to purchase.checkout.contact.render-after purchase.checkout.contact.render-after < & <'purchase.checkout.contact.render-after'>, > required: A static extension target that is rendered immediately after the contact form element.
Anchor to purchase.checkout.delivery-address.render-before purchase.checkout.delivery-address.render-before < & <'purchase.checkout.delivery-address.render-before'>, > required: A static extension target that is rendered between the shipping address header and shipping address form elements.
Anchor to purchase.checkout.block.render purchase.checkout.block.render < & <'purchase.checkout.block.render'>, > required: A dynamic extension target that isn't tied to a specific checkout section or feature. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the checkout editor.

The supported locations for dynamic extension targets can be previewed during development by using a URL parameter.
Anchor to purchase.thank-you.block.render purchase.thank-you.block.render < <'purchase.thank-you.block.render'>, > required: A dynamic extension target that renders exclusively on the Thank you page. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the checkout editor.

The supported locations for dynamic extension targets can be previewed during development by using a URL parameter.
Anchor to purchase.thank-you.cart-line-item.render-after purchase.thank-you.cart-line-item.render-after < & <'purchase.thank-you.cart-line-item.render-after'>, > required: A static extension target that renders on every line item, inside the details under the line item properties element on the Thank you page.
Anchor to purchase.thank-you.cart-line-list.render-after purchase.thank-you.cart-line-list.render-after < <'purchase.thank-you.cart-line-list.render-after'>, > required: A static extension target that is rendered after all line items on the Thank you page.
Anchor to purchase.thank-you.customer-information.render-after purchase.thank-you.customer-information.render-after < <'purchase.thank-you.customer-information.render-after'>, > required: A static extension target that is rendered after a purchase below the customer information on the Thank you page.
Anchor to customer-account.order-status.block.render customer-account.order-status.block.render < & <'customer-account.order-status.block.render'>, > required: A dynamic extension target that renders exclusively on the Order status page. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the checkout editor.

The supported locations for dynamic extension targets can be previewed during development by using a URL parameter.
Anchor to customer-account.order-status.cart-line-item.render-after customer-account.order-status.cart-line-item.render-after < & & <'customer-account.order-status.cart-line-item.render-after'>, > required: A static extension target that renders on every line item, inside the details under the line item properties element on the Order status page.
Anchor to customer-account.order-status.cart-line-list.render-after customer-account.order-status.cart-line-list.render-after < & <'customer-account.order-status.cart-line-list.render-after'>, > required: A static extension target that is rendered after all line items on the Order status page.
Anchor to customer-account.order-status.customer-information.render-after customer-account.order-status.customer-information.render-after < & <'customer-account.order-status.customer-information.render-after'>, > required: A static extension target that is rendered after a purchase below the customer information on the Order status page.
Anchor to purchase.checkout.reductions.render-before purchase.checkout.reductions.render-before < & <'purchase.checkout.reductions.render-before'>, > required: A static extension target that is rendered in the order summary, before the discount form element.
Anchor to purchase.checkout.reductions.render-after purchase.checkout.reductions.render-after < & <'purchase.checkout.reductions.render-after'>, > required: A static extension target that is rendered in the order summary, after the discount form and discount tag elements.
Anchor to purchase.checkout.shipping-option-list.render-before purchase.checkout.shipping-option-list.render-before < & <'purchase.checkout.shipping-option-list.render-before'>, > required: A static extension target that is rendered between the shipping method header and shipping method options.
Anchor to purchase.checkout.shipping-option-list.render-after purchase.checkout.shipping-option-list.render-after < & <'purchase.checkout.shipping-option-list.render-after'>, > required: A static extension target that is rendered after the shipping method options.
Anchor to purchase.checkout.pickup-location-list.render-before purchase.checkout.pickup-location-list.render-before < & & <'purchase.checkout.pickup-location-list.render-before'>, > required: A static extension target that is rendered before pickup location options.
Anchor to purchase.checkout.pickup-location-list.render-after purchase.checkout.pickup-location-list.render-after < & & <'purchase.checkout.pickup-location-list.render-after'>, > required: A static extension target that is rendered after pickup location options.
Anchor to purchase.checkout.shipping-option-item.render-after purchase.checkout.shipping-option-item.render-after < & & <'purchase.checkout.shipping-option-item.render-after'>, > required: A static extension target that is rendered after the shipping method details within the shipping method option list, for each option.
Anchor to purchase.checkout.shipping-option-item.details.render purchase.checkout.shipping-option-item.details.render < & & <'purchase.checkout.shipping-option-item.details.render'>, > required: A static extension target that is rendered under the shipping method within the shipping method option list, for each option.
Anchor to purchase.checkout.pickup-point-list.render-before purchase.checkout.pickup-point-list.render-before < & & <'purchase.checkout.pickup-point-list.render-before'>, > required: A static extension target that is rendered immediately before the pickup points.
Anchor to purchase.checkout.pickup-point-list.render-after purchase.checkout.pickup-point-list.render-after < & & <'purchase.checkout.pickup-point-list.render-after'>, > required: A static extension target that is rendered immediately after the pickup points.
Anchor to Checkout::Actions::RenderBefore Checkout::Actions::RenderBefore < & <'Checkout::Actions::RenderBefore'>, > required: A static extension target that is rendered immediately before any actions within each step.

Deprecated
Use purchase.checkout.actions.render-before instead.
Anchor to Checkout::CartLines::RenderAfter Checkout::CartLines::RenderAfter < & <'Checkout::CartLines::RenderAfter'> & , > required: A static extension target that is rendered after all line items.

Deprecated
Use purchase.checkout.cart-line-list.render-after instead.
Anchor to Checkout::CartLineDetails::RenderAfter Checkout::CartLineDetails::RenderAfter < & & <'Checkout::CartLineDetails::RenderAfter'> & , > required: A static extension target that renders on every line item, inside the details under the line item properties element.

Deprecated
Use purchase.checkout.cart-line-item.render-after instead.
Anchor to Checkout::Contact::RenderAfter Checkout::Contact::RenderAfter < & <'Checkout::Contact::RenderAfter'>, > required: A static extension target that is rendered immediately after the contact form element.

Deprecated
Use purchase.checkout.contact.render-after instead.
Anchor to Checkout::CustomerInformation::RenderAfter Checkout::CustomerInformation::RenderAfter < & & <'Checkout::CustomerInformation::RenderAfter'>, > required: A static extension target that is rendered after a purchase below the customer information.

Deprecated
Use purchase.thank-you.customer-information.render-after or customer-account.order-status.customer-information.render-after instead.
Anchor to Checkout::DeliveryAddress::RenderBefore Checkout::DeliveryAddress::RenderBefore < & <'Checkout::DeliveryAddress::RenderBefore'>, > required: A static extension target that is rendered between the shipping address header and shipping address form elements.

Deprecated
Use purchase.checkout.delivery-address.render-before instead.
Anchor to Checkout::Dynamic::Render Checkout::Dynamic::Render < & & <'Checkout::Dynamic::Render'>, > required: A dynamic extension target that isn't tied to a specific checkout section or feature. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the checkout editor.

The supported locations for dynamic extension targets can be previewed during development by using a URL parameter.

Deprecated
Use purchase.checkout.block.render instead.
Anchor to Checkout::ThankYou::Dynamic::Render Checkout::ThankYou::Dynamic::Render < <'Checkout::ThankYou::Dynamic::Render'>, > required: A dynamic extension target that renders exclusively on the Thank you page. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the checkout editor.

The supported locations for dynamic extension targets can be previewed during development by using a URL parameter.

Deprecated
Use purchase.thank-you.block.render instead.
Anchor to Checkout::ThankYou::CartLineDetails::RenderAfter Checkout::ThankYou::CartLineDetails::RenderAfter < & <'Checkout::ThankYou::CartLineDetails::RenderAfter'>, > required: A static extension target that renders on every line item, inside the details under the line item properties element on the Thank you page.

Deprecated
Use purchase.thank-you.cart-line-item.render-after instead.
Anchor to Checkout::ThankYou::CartLines::RenderAfter Checkout::ThankYou::CartLines::RenderAfter < <'Checkout::ThankYou::CartLines::RenderAfter'>, > required: A static extension target that is rendered after all line items on the Thank you page.

Deprecated
Use purchase.thank-you.cart-line-list.render-after instead.
Anchor to Checkout::ThankYou::CustomerInformation::RenderAfter Checkout::ThankYou::CustomerInformation::RenderAfter < <'Checkout::ThankYou::CustomerInformation::RenderAfter'>, > required: A static extension target that is rendered after a purchase below the customer information on the Thank you page.

Deprecated
Use purchase.thank-you.customer-information.render-after instead.
Anchor to Checkout::OrderStatus::Dynamic::Render Checkout::OrderStatus::Dynamic::Render < & <'Checkout::OrderStatus::Dynamic::Render'>, > required: A dynamic extension target that renders exclusively on the Order status page. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the checkout editor.

The supported locations for dynamic extension targets can be previewed during development by using a URL parameter.

Deprecated
Use customer-account.order-status.block.render instead.
Anchor to Checkout::OrderStatus::CartLineDetails::RenderAfter Checkout::OrderStatus::CartLineDetails::RenderAfter < & & <'Checkout::OrderStatus::CartLineDetails::RenderAfter'>, > required: A static extension target that renders on every line item, inside the details under the line item properties element on the Order status page.

Deprecated
Use customer-account.order-status.cart-line-item.render-after instead.
Anchor to Checkout::OrderStatus::CartLines::RenderAfter Checkout::OrderStatus::CartLines::RenderAfter < & <'Checkout::OrderStatus::CartLines::RenderAfter'>, > required: A static extension target that is rendered after all line items on the Order status page.

Deprecated
Use customer-account.order-status.cart-line-list.render-after instead.
Anchor to Checkout::OrderStatus::CustomerInformation::RenderAfter Checkout::OrderStatus::CustomerInformation::RenderAfter < & <'Checkout::OrderStatus::CustomerInformation::RenderAfter'>, > required: A static extension target that is rendered after a purchase below the customer information on the Order status page.

Deprecated
Use customer-account.order-status.customer-information.render-after instead.
Anchor to Checkout::Reductions::RenderBefore Checkout::Reductions::RenderBefore < & <'Checkout::Reductions::RenderBefore'>, > required: A static extension target that is rendered in the order summary, before the discount form element.

Deprecated
Use purchase.checkout.reductions.render-before instead.
Anchor to Checkout::Reductions::RenderAfter Checkout::Reductions::RenderAfter < & <'Checkout::Reductions::RenderAfter'>, > required: A static extension target that is rendered in the order summary, after the discount form and discount tag elements.

Deprecated
Use purchase.checkout.reductions.render-after instead.
Anchor to Checkout::ShippingMethods::RenderBefore Checkout::ShippingMethods::RenderBefore < & <'Checkout::ShippingMethods::RenderBefore'>, > required: A static extension target that is rendered between the shipping method header and shipping method options.

Deprecated
Use purchase.checkout.shipping-option-list.render-before instead.
Anchor to Checkout::ShippingMethods::RenderAfter Checkout::ShippingMethods::RenderAfter < & <'Checkout::ShippingMethods::RenderAfter'>, > required: A static extension target that is rendered after the shipping method options.

Deprecated
Use purchase.checkout.shipping-option-list.render-after instead.
Anchor to Checkout::PickupLocations::RenderBefore Checkout::PickupLocations::RenderBefore < & & <'Checkout::PickupLocations::RenderBefore'>, > required: A static extension target that is rendered before pickup location options.

Deprecated
Use purchase.checkout.pickup-location-list.render-before instead.
Anchor to Checkout::PickupLocations::RenderAfter Checkout::PickupLocations::RenderAfter < & & <'Checkout::PickupLocations::RenderAfter'>, > required: A static extension target that is rendered after pickup location options.

Deprecated
Use purchase.checkout.pickup-location-list.render-after instead.
Anchor to Checkout::ShippingMethodDetails::RenderAfter Checkout::ShippingMethodDetails::RenderAfter < & & <'Checkout::ShippingMethodDetails::RenderAfter'>, > required: A static extension target that is rendered after the shipping method details within the shipping method option list, for each option.

Deprecated
Use purchase.checkout.shipping-option-item.render-after instead.
Anchor to Checkout::ShippingMethodDetails::RenderExpanded Checkout::ShippingMethodDetails::RenderExpanded < & & <'Checkout::ShippingMethodDetails::RenderExpanded'>, > required: A static extension target that is rendered under the shipping method within the shipping method option list, for each option.

Deprecated
Use purchase.checkout.shipping-option-item.details.render instead.
Anchor to Checkout::PickupPoints::RenderBefore Checkout::PickupPoints::RenderBefore < & & <'Checkout::PickupPoints::RenderBefore'>, > required: A static extension target that is rendered immediately before the pickup points.

Deprecated
Use purchase.checkout.pickup-point-list.render-before instead.
Anchor to Checkout::PickupPoints::RenderAfter Checkout::PickupPoints::RenderAfter < & & <'Checkout::PickupPoints::RenderAfter'>, > required: A static extension target that is rendered immediately after the pickup points.

Deprecated
Use purchase.checkout.pickup-point-list.render-after instead.

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
A static extension target that is rendered immediately before any actions within each step.
```
RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.actions.render-before'>,
    AnyComponent
  >
```
Checkout::Actions::RenderBefore
A static extension target that is rendered immediately before any actions within each step.
```
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Actions::RenderBefore'>,
    AnyComponent
  >
```

purchase.checkout.cart-line-list.render-after

A static extension target that is rendered after all line items.

RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.cart-line-list.render-after'>,
    AnyComponent
  >

Checkout::CartLines::RenderAfter

A static extension target that is rendered after all line items.

RenderExtension<
    CheckoutApi &
      StandardApi<'Checkout::CartLines::RenderAfter'> &
      OrderStatusApi,
    AnyComponent
  >

purchase.checkout.cart-line-item.render-after
A static extension target that renders on every line item, inside the details under the line item properties element.
```
RenderExtension<
    CheckoutApi &
      CartLineItemApi &
      StandardApi<'purchase.checkout.cart-line-item.render-after'>,
    AnyComponent
  >
```

Checkout::CartLineDetails::RenderAfter

A static extension target that renders on every line item, inside the details under the line item properties element.

RenderExtension<
    CheckoutApi &
      CartLineItemApi &
      StandardApi<'Checkout::CartLineDetails::RenderAfter'> &
      OrderStatusApi,
    AnyComponent
  >

purchase.cart-line-item.line-components.render
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.
```
RenderExtension<
    CartLineItemApi &
      StandardApi<'purchase.cart-line-item.line-components.render'>,
    AnyComponent
  >
```
Checkout::CartLineDetails::RenderLineComponents
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.
```
RenderExtension<
    CartLineItemApi &
      StandardApi<'Checkout::CartLineDetails::RenderLineComponents'>,
    AnyComponent
  >
```
purchase.checkout.contact.render-after
A static extension target that is rendered immediately after the contact form element.
```
RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.contact.render-after'>,
    AnyComponent
  >
```
Checkout::Contact::RenderAfter
A static extension target that is rendered immediately after the contact form element.
```
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Contact::RenderAfter'>,
    AnyComponent
  >
```

Checkout::CustomerInformation::RenderAfter

A static extension target that is rendered after a purchase below the customer information.

RenderExtension<
    OrderStatusApi &
      CheckoutApi &
      StandardApi<'Checkout::CustomerInformation::RenderAfter'>,
    AnyComponent
  >

purchase.checkout.delivery-address.render-before
A static extension target that is rendered between the shipping address header and shipping address form elements.
```
RenderExtension<
    CheckoutApi &
      StandardApi<'purchase.checkout.delivery-address.render-before'>,
    AnyComponent
  >
```
Checkout::DeliveryAddress::RenderBefore
A static extension target that is rendered between the shipping address header and shipping address form elements.
```
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::DeliveryAddress::RenderBefore'>,
    AnyComponent
  >
```
purchase.checkout.block.render
A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
```
RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.block.render'>,
    AnyComponent
  >
```
Checkout::Dynamic::Render
A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
```
RenderExtension<
    CheckoutApi & OrderStatusApi & StandardApi<'Checkout::Dynamic::Render'>,
    AnyComponent
  >
```
purchase.thank-you.block.render
A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
```
RenderExtension<
    StandardApi<'purchase.thank-you.block.render'>,
    AnyComponent
  >
```
Checkout::ThankYou::Dynamic::Render
A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
```
RenderExtension<
    StandardApi<'Checkout::ThankYou::Dynamic::Render'>,
    AnyComponent
  >
```
purchase.thank-you.cart-line-item.render-after
A static extension target that renders on every line item, inside the details under the line item properties element on the **Thank you** page.
```
RenderExtension<
    CartLineItemApi &
      StandardApi<'purchase.thank-you.cart-line-item.render-after'>,
    AnyComponent
  >
```
Checkout::ThankYou::CartLineDetails::RenderAfter
A static extension target that renders on every line item, inside the details under the line item properties element on the **Thank you** page.
```
RenderExtension<
    CartLineItemApi &
      StandardApi<'Checkout::ThankYou::CartLineDetails::RenderAfter'>,
    AnyComponent
  >
```
purchase.thank-you.cart-line-list.render-after
A static extension target that is rendered after all line items on the **Thank you** page.
```
RenderExtension<
    StandardApi<'purchase.thank-you.cart-line-list.render-after'>,
    AnyComponent
  >
```
Checkout::ThankYou::CartLines::RenderAfter
A static extension target that is rendered after all line items on the **Thank you** page.
```
RenderExtension<
    StandardApi<'Checkout::ThankYou::CartLines::RenderAfter'>,
    AnyComponent
  >
```
purchase.thank-you.customer-information.render-after
A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.
```
RenderExtension<
    StandardApi<'purchase.thank-you.customer-information.render-after'>,
    AnyComponent
  >
```
Checkout::ThankYou::CustomerInformation::RenderAfter
A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.
```
RenderExtension<
    StandardApi<'Checkout::ThankYou::CustomerInformation::RenderAfter'>,
    AnyComponent
  >
```
customer-account.order-status.block.render
A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Order status** page. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
```
RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'customer-account.order-status.block.render'>,
    AnyComponent
  >
```
Checkout::OrderStatus::Dynamic::Render
A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Order status** page. Unlike static extension targets, dynamic extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
```
RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'Checkout::OrderStatus::Dynamic::Render'>,
    AnyComponent
  >
```
customer-account.order-status.cart-line-item.render-after
A static extension target that renders on every line item, inside the details under the line item properties element on the **Order status** page.
```
RenderExtension<
    CartLineItemApi &
      OrderStatusApi &
      CustomerAccountStandardApi<'customer-account.order-status.cart-line-item.render-after'>,
    AnyComponent
  >
```
Checkout::OrderStatus::CartLineDetails::RenderAfter
A static extension target that renders on every line item, inside the details under the line item properties element on the **Order status** page.
```
RenderExtension<
    CartLineItemApi &
      OrderStatusApi &
      CustomerAccountStandardApi<'Checkout::OrderStatus::CartLineDetails::RenderAfter'>,
    AnyComponent
  >
```

customer-account.order-status.cart-line-list.render-after

A static extension target that is rendered after all line items on the **Order status** page.

RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'customer-account.order-status.cart-line-list.render-after'>,
    AnyComponent
  >

Checkout::OrderStatus::CartLines::RenderAfter

A static extension target that is rendered after all line items on the **Order status** page.

RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'Checkout::OrderStatus::CartLines::RenderAfter'>,
    AnyComponent
  >

customer-account.order-status.customer-information.render-after
A static extension target that is rendered after a purchase below the customer information on the **Order status** page.
```
RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'customer-account.order-status.customer-information.render-after'>,
    AnyComponent
  >
```
Checkout::OrderStatus::CustomerInformation::RenderAfter
A static extension target that is rendered after a purchase below the customer information on the **Order status** page.
```
RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'Checkout::OrderStatus::CustomerInformation::RenderAfter'>,
    AnyComponent
  >
```
purchase.checkout.gift-card.render
A static extension target that renders the gift card entry form fields after the buyer ticks a box to use a gift card. This does not replace the native gift card entry form which is rendered in a separate part of checkout.
```
RenderExtension<
    RedeemableApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.gift-card.render'>,
    AnyComponent
  >
```
Checkout::GiftCard::Render
A static extension target that renders the gift card entry form fields after the buyer ticks a box to use a gift card. This does not replace the native gift card entry form which is rendered in a separate part of checkout.
```
RenderExtension<
    RedeemableApi & CheckoutApi & StandardApi<'Checkout::GiftCard::Render'>,
    AnyComponent
  >
```

purchase.checkout.payment-option-item.details.render

A static extension target that renders the form fields for a payment method when selected by the buyer.

RenderExtension<
    PaymentOptionItemApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.payment-option-item.details.render'>,
    AnyComponent
  >

Checkout::PaymentMethod::Render

A static extension target that renders the form fields for a payment method when selected by the buyer.

RenderExtension<
    PaymentOptionItemApi &
      CheckoutApi &
      StandardApi<'Checkout::PaymentMethod::Render'>,
    AnyComponent
  >

purchase.checkout.payment-option-item.action-required.render
A static extension target that renders a form modal when a buyer selects the custom onsite payment method.
```
RenderExtension<
    CheckoutApi &
      StandardApi<'purchase.checkout.payment-option-item.action-required.render'>,
    AnyComponent
  >
```
Checkout::PaymentMethod::RenderRequiredAction
A static extension target that renders a form modal when a buyer selects the custom onsite payment method.
```
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::PaymentMethod::RenderRequiredAction'>,
    AnyComponent
  >
```
purchase.checkout.reductions.render-before
A static extension target that is rendered in the order summary, before the discount form element.
```
RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.reductions.render-before'>,
    AnyComponent
  >
```
Checkout::Reductions::RenderBefore
A static extension target that is rendered in the order summary, before the discount form element.
```
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Reductions::RenderBefore'>,
    AnyComponent
  >
```
purchase.checkout.reductions.render-after
A static extension target that is rendered in the order summary, after the discount form and discount tag elements.
```
RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.reductions.render-after'>,
    AnyComponent
  >
```
Checkout::Reductions::RenderAfter
A static extension target that is rendered in the order summary, after the discount form and discount tag elements.
```
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Reductions::RenderAfter'>,
    AnyComponent
  >
```
purchase.checkout.shipping-option-list.render-before
A static extension target that is rendered between the shipping method header and shipping method options.
```
RenderExtension<
    CheckoutApi &
      StandardApi<'purchase.checkout.shipping-option-list.render-before'>,
    AnyComponent
  >
```
Checkout::ShippingMethods::RenderBefore
A static extension target that is rendered between the shipping method header and shipping method options.
```
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::ShippingMethods::RenderBefore'>,
    AnyComponent
  >
```

purchase.checkout.shipping-option-list.render-after

A static extension target that is rendered after the shipping method options.

RenderExtension<
    CheckoutApi &
      StandardApi<'purchase.checkout.shipping-option-list.render-after'>,
    AnyComponent
  >

Checkout::ShippingMethods::RenderAfter
A static extension target that is rendered after the shipping method options.
```
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::ShippingMethods::RenderAfter'>,
    AnyComponent
  >
```

purchase.checkout.pickup-location-list.render-before

A static extension target that is rendered before pickup location options.

RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.pickup-location-list.render-before'>,
    AnyComponent
  >

Checkout::PickupLocations::RenderBefore

A static extension target that is rendered before pickup location options.

RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupLocations::RenderBefore'>,
    AnyComponent
  >

purchase.checkout.pickup-location-list.render-after

A static extension target that is rendered after pickup location options.

RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.pickup-location-list.render-after'>,
    AnyComponent
  >

Checkout::PickupLocations::RenderAfter

A static extension target that is rendered after pickup location options.

RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupLocations::RenderAfter'>,
    AnyComponent
  >

purchase.checkout.shipping-option-item.render-after
A static extension target that is rendered after the shipping method details within the shipping method option list, for each option.
```
RenderExtension<
    ShippingOptionItemApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.shipping-option-item.render-after'>,
    AnyComponent
  >
```
Checkout::ShippingMethodDetails::RenderAfter
A static extension target that is rendered after the shipping method details within the shipping method option list, for each option.
```
RenderExtension<
    ShippingOptionItemApi &
      CheckoutApi &
      StandardApi<'Checkout::ShippingMethodDetails::RenderAfter'>,
    AnyComponent
  >
```
purchase.checkout.shipping-option-item.details.render
A static extension target that is rendered under the shipping method within the shipping method option list, for each option.
```
RenderExtension<
    ShippingOptionItemApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.shipping-option-item.details.render'>,
    AnyComponent
  >
```
Checkout::ShippingMethodDetails::RenderExpanded
A static extension target that is rendered under the shipping method within the shipping method option list, for each option.
```
RenderExtension<
    ShippingOptionItemApi &
      CheckoutApi &
      StandardApi<'Checkout::ShippingMethodDetails::RenderExpanded'>,
    AnyComponent
  >
```

purchase.checkout.pickup-point-list.render-before

A static extension target that is rendered immediately before the pickup points.

RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.pickup-point-list.render-before'>,
    AnyComponent
  >

Checkout::PickupPoints::RenderBefore

A static extension target that is rendered immediately before the pickup points.

RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupPoints::RenderBefore'>,
    AnyComponent
  >

purchase.checkout.pickup-point-list.render-after

A static extension target that is rendered immediately after the pickup points.

RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.pickup-point-list.render-after'>,
    AnyComponent
  >

Checkout::PickupPoints::RenderAfter

A static extension target that is rendered immediately after the pickup points.

RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupPoints::RenderAfter'>,
    AnyComponent
  >

export interface ExtensionTargets {
  /**
   * A static extension target that is rendered immediately before any actions within each step.
   */
  'purchase.checkout.actions.render-before': RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.actions.render-before'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered immediately before any actions within each step.
   *
   * @deprecated Use `purchase.checkout.actions.render-before` instead.
   */
  'Checkout::Actions::RenderBefore': RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Actions::RenderBefore'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after all line items.
   */
  'purchase.checkout.cart-line-list.render-after': RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.cart-line-list.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after all line items.
   *
   * @deprecated Use `purchase.checkout.cart-line-list.render-after` instead.
   */
  'Checkout::CartLines::RenderAfter': RenderExtension<
    CheckoutApi &
      StandardApi<'Checkout::CartLines::RenderAfter'> &
      OrderStatusApi,
    AnyComponent
  >;
  /**
   * A static extension target that renders on every line item, inside the details
   * under the line item properties element.
   */
  'purchase.checkout.cart-line-item.render-after': RenderExtension<
    CheckoutApi &
      CartLineItemApi &
      StandardApi<'purchase.checkout.cart-line-item.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders on every line item, inside the details
   * under the line item properties element.
   *
   * @deprecated Use `purchase.checkout.cart-line-item.render-after` instead.
   */
  'Checkout::CartLineDetails::RenderAfter': RenderExtension<
    CheckoutApi &
      CartLineItemApi &
      StandardApi<'Checkout::CartLineDetails::RenderAfter'> &
      OrderStatusApi,
    AnyComponent
  >;
  /**
   * 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.
   * @private
   */
  'purchase.cart-line-item.line-components.render': RenderExtension<
    CartLineItemApi &
      StandardApi<'purchase.cart-line-item.line-components.render'>,
    AnyComponent
  >;
  /**
   * 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.
   *
   * @deprecated Use `purchase.cart-line-item.line-components.render` instead.
   * @private
   */
  'Checkout::CartLineDetails::RenderLineComponents': RenderExtension<
    CartLineItemApi &
      StandardApi<'Checkout::CartLineDetails::RenderLineComponents'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered immediately after the contact form element.
   */
  'purchase.checkout.contact.render-after': RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.contact.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered immediately after the contact form element.
   *
   * @deprecated Use `purchase.checkout.contact.render-after` instead.
   */
  'Checkout::Contact::RenderAfter': RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Contact::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after a purchase below the customer information.
   *
   * @deprecated Use `purchase.thank-you.customer-information.render-after` or
   * `customer-account.order-status.customer-information.render-after` instead.
   */
  'Checkout::CustomerInformation::RenderAfter': RenderExtension<
    OrderStatusApi &
      CheckoutApi &
      StandardApi<'Checkout::CustomerInformation::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered between the shipping address header
   * and shipping address form elements.
   */
  'purchase.checkout.delivery-address.render-before': RenderExtension<
    CheckoutApi &
      StandardApi<'purchase.checkout.delivery-address.render-before'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered between the shipping address header
   * and shipping address form elements.
   *
   * @deprecated Use `purchase.checkout.delivery-address.render-before` instead.
   */
  'Checkout::DeliveryAddress::RenderBefore': RenderExtension<
    CheckoutApi & StandardApi<'Checkout::DeliveryAddress::RenderBefore'>,
    AnyComponent
  >;
  /**
   * A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that isn't tied to a specific checkout section or feature.
   * Unlike static extension targets, dynamic extension targets render where the merchant
   * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
   *
   * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development
   * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
   */
  'purchase.checkout.block.render': RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.block.render'>,
    AnyComponent
  >;
  /**
   * A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that isn't tied to a specific checkout section or feature.
   * Unlike static extension targets, dynamic extension targets render where the merchant
   * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
   *
   * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development
   * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
   *
   * @deprecated Use `purchase.checkout.block.render` instead.
   */
  'Checkout::Dynamic::Render': RenderExtension<
    CheckoutApi & OrderStatusApi & StandardApi<'Checkout::Dynamic::Render'>,
    AnyComponent
  >;
  /**
   * A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Thank you** page.
   * Unlike static extension targets, dynamic extension targets render where the merchant
   * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
   *
   * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development
   * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
   *
   */
  'purchase.thank-you.block.render': RenderExtension<
    StandardApi<'purchase.thank-you.block.render'>,
    AnyComponent
  >;
  /**
   * A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Thank you** page.
   * Unlike static extension targets, dynamic extension targets render where the merchant
   * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
   *
   * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development
   * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
   *
   * @deprecated Use `purchase.thank-you.block.render` instead.
   */
  'Checkout::ThankYou::Dynamic::Render': RenderExtension<
    StandardApi<'Checkout::ThankYou::Dynamic::Render'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders on every line item, inside the details
   * under the line item properties element on the **Thank you** page.
   */
  'purchase.thank-you.cart-line-item.render-after': RenderExtension<
    CartLineItemApi &
      StandardApi<'purchase.thank-you.cart-line-item.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders on every line item, inside the details
   * under the line item properties element on the **Thank you** page.
   *
   * @deprecated Use `purchase.thank-you.cart-line-item.render-after` instead.
   */
  'Checkout::ThankYou::CartLineDetails::RenderAfter': RenderExtension<
    CartLineItemApi &
      StandardApi<'Checkout::ThankYou::CartLineDetails::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after all line items on the **Thank you** page.
   */
  'purchase.thank-you.cart-line-list.render-after': RenderExtension<
    StandardApi<'purchase.thank-you.cart-line-list.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after all line items on the **Thank you** page.
   *
   * @deprecated Use `purchase.thank-you.cart-line-list.render-after` instead.
   */
  'Checkout::ThankYou::CartLines::RenderAfter': RenderExtension<
    StandardApi<'Checkout::ThankYou::CartLines::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.
   */
  'purchase.thank-you.customer-information.render-after': RenderExtension<
    StandardApi<'purchase.thank-you.customer-information.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.
   *
   * @deprecated Use `purchase.thank-you.customer-information.render-after` instead.
   */
  'Checkout::ThankYou::CustomerInformation::RenderAfter': RenderExtension<
    StandardApi<'Checkout::ThankYou::CustomerInformation::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Order status** page.
   * Unlike static extension targets, dynamic extension targets render where the merchant
   * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
   *
   * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development
   * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
   */
  'customer-account.order-status.block.render': RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'customer-account.order-status.block.render'>,
    AnyComponent
  >;
  /**
   * A [dynamic extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Order status** page.
   * Unlike static extension targets, dynamic extension targets render where the merchant
   * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
   *
   * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for dynamic extension targets can be previewed during development
   * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#dynamic-extension-targets).
   *
   * @deprecated Use `customer-account.order-status.block.render` instead.
   */
  'Checkout::OrderStatus::Dynamic::Render': RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'Checkout::OrderStatus::Dynamic::Render'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders on every line item, inside the details
   * under the line item properties element on the **Order status** page.
   */
  'customer-account.order-status.cart-line-item.render-after': RenderExtension<
    CartLineItemApi &
      OrderStatusApi &
      CustomerAccountStandardApi<'customer-account.order-status.cart-line-item.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders on every line item, inside the details
   * under the line item properties element on the **Order status** page.
   *
   * @deprecated Use `customer-account.order-status.cart-line-item.render-after` instead.
   */
  'Checkout::OrderStatus::CartLineDetails::RenderAfter': RenderExtension<
    CartLineItemApi &
      OrderStatusApi &
      CustomerAccountStandardApi<'Checkout::OrderStatus::CartLineDetails::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after all line items on the **Order status** page.
   */
  'customer-account.order-status.cart-line-list.render-after': RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'customer-account.order-status.cart-line-list.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after all line items on the **Order status** page.
   *
   * @deprecated Use `customer-account.order-status.cart-line-list.render-after` instead.
   */
  'Checkout::OrderStatus::CartLines::RenderAfter': RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'Checkout::OrderStatus::CartLines::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after a purchase below the customer information on the **Order status** page.
   */
  'customer-account.order-status.customer-information.render-after': RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'customer-account.order-status.customer-information.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after a purchase below the customer information on the **Order status** page.
   *
   * @deprecated Use `customer-account.order-status.customer-information.render-after` instead.
   */
  'Checkout::OrderStatus::CustomerInformation::RenderAfter': RenderExtension<
    OrderStatusApi &
      CustomerAccountStandardApi<'Checkout::OrderStatus::CustomerInformation::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders the gift card entry form fields after
   * the buyer ticks a box to use a gift card. This does not replace the
   * native gift card entry form which is rendered in a separate part of checkout.
   *
   * @private
   */
  'purchase.checkout.gift-card.render': RenderExtension<
    RedeemableApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.gift-card.render'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders the gift card entry form fields after
   * the buyer ticks a box to use a gift card. This does not replace the
   * native gift card entry form which is rendered in a separate part of checkout.
   *
   * @private
   * @deprecated Use `purchase.checkout.gift-card.render` instead.
   */
  'Checkout::GiftCard::Render': RenderExtension<
    RedeemableApi & CheckoutApi & StandardApi<'Checkout::GiftCard::Render'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders the form fields for a payment method when selected by the buyer.
   *
   * @private
   */
  'purchase.checkout.payment-option-item.details.render': RenderExtension<
    PaymentOptionItemApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.payment-option-item.details.render'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders the form fields for a payment method when selected by the buyer.
   *
   * @private
   * @deprecated Use `purchase.checkout.payment-option-item.details.render` instead.
   */
  'Checkout::PaymentMethod::Render': RenderExtension<
    PaymentOptionItemApi &
      CheckoutApi &
      StandardApi<'Checkout::PaymentMethod::Render'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders a form modal when a buyer selects the custom onsite payment method.
   *
   * @private
   */
  'purchase.checkout.payment-option-item.action-required.render': RenderExtension<
    CheckoutApi &
      StandardApi<'purchase.checkout.payment-option-item.action-required.render'>,
    AnyComponent
  >;
  /**
   * A static extension target that renders a form modal when a buyer selects the custom onsite payment method.
   *
   * @private
   * @deprecated Use `purchase.checkout.payment-option-item.action-required.render` instead.
   */
  'Checkout::PaymentMethod::RenderRequiredAction': RenderExtension<
    CheckoutApi & StandardApi<'Checkout::PaymentMethod::RenderRequiredAction'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered in the order summary, before the discount form element.
   */
  'purchase.checkout.reductions.render-before': RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.reductions.render-before'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered in the order summary, before the discount form element.
   *
   * @deprecated Use `purchase.checkout.reductions.render-before` instead.
   */
  'Checkout::Reductions::RenderBefore': RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Reductions::RenderBefore'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered in the order summary, after the discount form
   * and discount tag elements.
   */
  'purchase.checkout.reductions.render-after': RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.reductions.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered in the order summary, after the discount form
   * and discount tag elements.
   *
   * @deprecated Use `purchase.checkout.reductions.render-after` instead.
   */
  'Checkout::Reductions::RenderAfter': RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Reductions::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered between the shipping method
   * header and shipping method options.
   */
  'purchase.checkout.shipping-option-list.render-before': RenderExtension<
    CheckoutApi &
      StandardApi<'purchase.checkout.shipping-option-list.render-before'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered between the shipping method
   * header and shipping method options.
   *
   * @deprecated Use `purchase.checkout.shipping-option-list.render-before` instead.
   */
  'Checkout::ShippingMethods::RenderBefore': RenderExtension<
    CheckoutApi & StandardApi<'Checkout::ShippingMethods::RenderBefore'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after the shipping method
   * options.
   */
  'purchase.checkout.shipping-option-list.render-after': RenderExtension<
    CheckoutApi &
      StandardApi<'purchase.checkout.shipping-option-list.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after the shipping method
   * options.
   *
   * @deprecated Use `purchase.checkout.shipping-option-list.render-after` instead.
   */
  'Checkout::ShippingMethods::RenderAfter': RenderExtension<
    CheckoutApi & StandardApi<'Checkout::ShippingMethods::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered before pickup location options.
   */
  'purchase.checkout.pickup-location-list.render-before': RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.pickup-location-list.render-before'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered before pickup location options.
   *
   * @deprecated Use `purchase.checkout.pickup-location-list.render-before` instead.
   */
  'Checkout::PickupLocations::RenderBefore': RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupLocations::RenderBefore'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after pickup location options.
   */
  'purchase.checkout.pickup-location-list.render-after': RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.pickup-location-list.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after pickup location options.
   *
   * @deprecated Use `purchase.checkout.pickup-location-list.render-after` instead.
   */
  'Checkout::PickupLocations::RenderAfter': RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupLocations::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after the shipping method
   * details within the shipping method option list, for each option.
   */
  'purchase.checkout.shipping-option-item.render-after': RenderExtension<
    ShippingOptionItemApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.shipping-option-item.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered after the shipping method
   * details within the shipping method option list, for each option.
   *
   * @deprecated Use `purchase.checkout.shipping-option-item.render-after` instead.
   */
  'Checkout::ShippingMethodDetails::RenderAfter': RenderExtension<
    ShippingOptionItemApi &
      CheckoutApi &
      StandardApi<'Checkout::ShippingMethodDetails::RenderAfter'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered under the shipping method
   * within the shipping method option list, for each option.
   */
  'purchase.checkout.shipping-option-item.details.render': RenderExtension<
    ShippingOptionItemApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.shipping-option-item.details.render'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered under the shipping method
   * within the shipping method option list, for each option.
   *
   * @deprecated Use `purchase.checkout.shipping-option-item.details.render` instead.
   */
  'Checkout::ShippingMethodDetails::RenderExpanded': RenderExtension<
    ShippingOptionItemApi &
      CheckoutApi &
      StandardApi<'Checkout::ShippingMethodDetails::RenderExpanded'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered immediately before the pickup points.
   */
  'purchase.checkout.pickup-point-list.render-before': RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.pickup-point-list.render-before'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered immediately before the pickup points.
   *
   * @deprecated Use `purchase.checkout.pickup-point-list.render-before` instead.
   */
  'Checkout::PickupPoints::RenderBefore': RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupPoints::RenderBefore'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered immediately after the pickup points.
   */
  'purchase.checkout.pickup-point-list.render-after': RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'purchase.checkout.pickup-point-list.render-after'>,
    AnyComponent
  >;
  /**
   * A static extension target that is rendered immediately after the pickup points.
   *
   * @deprecated Use `purchase.checkout.pickup-point-list.render-after` instead.
   */
  'Checkout::PickupPoints::RenderAfter': RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupPoints::RenderAfter'>,
    AnyComponent
  >;
}

RenderExtension

export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}

CheckoutApi

applyAttributeChange
Performs an update on an attribute attached to the cart and checkout. If successful, this mutation results in an update to the value retrieved through the [`attributes`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-applyattributechange) property. > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
```
(change: AttributeUpdateChange) => Promise<AttributeChangeResult>
```
applyCartLinesChange
Performs an update on the merchandise line items. It resolves when the new line items have been negotiated and results in an update to the value retrieved through the [`lines`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-lines) property. > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
```
(change: CartLineChange) => Promise<CartLineChangeResult>
```
applyDiscountCodeChange
Performs an update on the discount codes. It resolves when the new discount codes have been negotiated and results in an update to the value retrieved through the [`discountCodes`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-discountcodes) property. > Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves discount codes through a network call. > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
```
(change: DiscountCodeChange) => Promise<DiscountCodeChangeResult>
```
applyGiftCardChange
Performs an update on the gift cards. It resolves when gift card change have been negotiated and results in an update to the value retrieved through the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-appliedgiftcards) property. > Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves gift card codes through a network call. > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
```
(change: GiftCardChange) => Promise<GiftCardChangeResult>
```
applyMetafieldChange
Performs an update on a piece of metadata attached to the checkout. If successful, this mutation results in an update to the value retrieved through the [`metafields`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-metafields) property.
```
(change: MetafieldChange) => Promise<MetafieldChangeResult>
```
applyNoteChange
Performs an update on the note attached to the cart and checkout. If successful, this mutation results in an update to the value retrieved through the [`note`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-note) property. > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
```
(change: NoteChange) => Promise<NoteChangeResult>
```
experimentalIsShopAppStyle
```
boolean
```
applyShippingAddressChange
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](/docs/apps/store/data-protection/protected-customer-data).
```
(change: ShippingAddressUpdateChange) => Promise<ShippingAddressChangeResult>
```

export interface CheckoutApi {
  /**
   * Performs an update on an attribute attached to the cart and checkout. If
   * successful, this mutation results in an update to the value retrieved
   * through the [`attributes`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-applyattributechange) property.
   *
   * > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
   */
  applyAttributeChange(change: AttributeChange): Promise<AttributeChangeResult>;

  /**
   * Performs an update on the merchandise line items. It resolves when the new
   * line items have been negotiated and results in an update to the value
   * retrieved through the
   * [`lines`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-lines)
   * property.
   *
   * > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
   */
  applyCartLinesChange(change: CartLineChange): Promise<CartLineChangeResult>;

  /**
   * Performs an update on the discount codes.
   * It resolves when the new discount codes have been negotiated and results in an update
   * to the value retrieved through the [`discountCodes`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-discountcodes) property.
   *
   * > Caution:
   * > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves discount codes through a network call.
   *
   * > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
   */
  applyDiscountCodeChange(
    change: DiscountCodeChange,
  ): Promise<DiscountCodeChangeResult>;

  /**
   * Performs an update on the gift cards.
   * It resolves when gift card change have been negotiated and results in an update
   * to the value retrieved through the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-appliedgiftcards) property.
   *
   * > Caution:
   * > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves gift card codes through a network call.
   *
   * > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
   */
  applyGiftCardChange(change: GiftCardChange): Promise<GiftCardChangeResult>;

  /**
   * Performs an update on a piece of metadata attached to the checkout. If
   * successful, this mutation results in an update to the value retrieved
   * through the [`metafields`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-metafields) property.
   */
  applyMetafieldChange(change: MetafieldChange): Promise<MetafieldChangeResult>;

  /**
   * Performs an update on the note attached to the cart and checkout. If
   * successful, this mutation results in an update to the value retrieved
   * through the [`note`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-note) property.
   *
   * > Note: This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
   */
  applyNoteChange(change: NoteChange): Promise<NoteChangeResult>;

  /**
   * @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](/docs/apps/store/data-protection/protected-customer-data).
   */
  applyShippingAddressChange?(
    change: ShippingAddressChange,
  ): Promise<ShippingAddressChangeResult>;
}

AttributeUpdateChange

Updates an attribute on the order. If an attribute with the provided key does not already exist, it gets created.

type
The type of the `AttributeUpdateChange` API.
```
"updateAttribute"
```
key
Key of the attribute to add or update
```
string
```
value
Value for the attribute to add or update
```
string
```

export interface AttributeUpdateChange {
  /**
   * The type of the `AttributeUpdateChange` API.
   */
  type: 'updateAttribute';

  /**
   * Key of the attribute to add or update
   */
  key: string;

  /**
   * Value for the attribute to add or update
   */
  value: string;
}

Attribute

key
The key for the attribute.
```
string
```
value
The value for the attribute.
```
string
```

export interface Attribute {
  /**
   * The key for the attribute.
   */
  key: string;

  /**
   * The value for the attribute.
   */
  value: string;
}

AttributeChangeResult

AttributeChangeResultSuccess | AttributeChangeResultError

AttributeChangeResultSuccess

The returned result of a successful update to an attribute.

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

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

AttributeChangeResultError

The returned result of an unsuccessful update to an attribute with a message detailing the type of error that occurred.

type
The type of the `AttributeChangeResultError` API.
```
"error"
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface AttributeChangeResultError {
  /**
   * The type of the `AttributeChangeResultError` API.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

CartLineChange

CartLineAddChange | CartLineRemoveChange | CartLineUpdateChange

CartLineAddChange

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

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

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

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

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

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

CartLine

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

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

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

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

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

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

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

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

Merchandise

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

ProductVariant

ImageDetails

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

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

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

SelectedOption

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

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

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

Product

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

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

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

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

SellingPlan

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

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

CartLineCost

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

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

Money

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

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

CurrencyCode

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

CartDiscountAllocation

CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation

CartCodeDiscountAllocation

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

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

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

CartAutomaticDiscountAllocation

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

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

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

CartCustomDiscountAllocation

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

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

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

CartBundleLineComponent

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

export interface CartBundleLineComponent {
  type: 'bundle';

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

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

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

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

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

CartLineRemoveChange

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

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

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

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

CartLineUpdateChange

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

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

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

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

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

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

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

CartLineChangeResult

CartLineChangeResultSuccess | CartLineChangeResultError

CartLineChangeResultSuccess

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

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

CartLineChangeResultError

type
Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error.
```
"error"
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface CartLineChangeResultError {
  /**
   * Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

DiscountCodeChange

DiscountCodeAddChange | DiscountCodeRemoveChange

DiscountCodeAddChange

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

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

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

DiscountCodeRemoveChange

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

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

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

DiscountCodeChangeResult

DiscountCodeChangeResultSuccess | DiscountCodeChangeResultError

DiscountCodeChangeResultSuccess

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

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

DiscountCodeChangeResultError

type
Indicates that the discount code change failed.
```
"error"
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface DiscountCodeChangeResultError {
  /**
   * Indicates that the discount code change failed.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

GiftCardChange

GiftCardAddChange | GiftCardRemoveChange

GiftCardAddChange

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

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

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

GiftCardRemoveChange

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

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

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

GiftCardChangeResult

GiftCardChangeResultSuccess | GiftCardChangeResultError

GiftCardChangeResultSuccess

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

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

GiftCardChangeResultError

type
Indicates that the gift card change failed.
```
"error"
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface GiftCardChangeResultError {
  /**
   * Indicates that the gift card change failed.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

MetafieldChange

MetafieldRemoveChange | MetafieldUpdateChange | MetafieldRemoveCartChange | MetafieldUpdateCartChange

MetafieldRemoveChange

Removes a metafield.

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

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

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

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

Metafield

Metadata associated with the checkout.

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

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

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

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

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

MetafieldUpdateChange

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

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

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

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

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

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

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

MetafieldRemoveCartChange

Removes a cart metafield.

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

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

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

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

CartMetafield

Represents a custom metadata attached to a resource.

key
The key name of a metafield.
```
string
```
namespace
The namespace for a metafield.
```
string
```
value
The value of a metafield.
```
string
```
type
The metafield's type name.
```
string
```

export interface CartMetafield {
  /** The key name of a metafield. */
  key: string;

  /** The namespace for a metafield. */
  namespace: string;

  /** The value of a metafield. */
  value: string;

  /** The metafield's type name. */
  type: string;
}

MetafieldUpdateCartChange

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

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

metafield

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

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

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

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

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

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

MetafieldChangeResult

MetafieldChangeResultSuccess | MetafieldChangeResultError

MetafieldChangeResultSuccess

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

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

MetafieldChangeResultError

type
The type of the `MetafieldChangeResultError` API.
```
"error"
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface MetafieldChangeResultError {
  /**
   * The type of the `MetafieldChangeResultError` API.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

NoteChange

NoteRemoveChange | NoteUpdateChange

NoteRemoveChange

Removes a note

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

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

NoteUpdateChange

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

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

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

NoteChangeResult

NoteChangeResultSuccess | NoteChangeResultError

NoteChangeResultSuccess

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

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

NoteChangeResultError

type
The type of the `NoteChangeResultError` API.
```
"error"
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface NoteChangeResultError {
  /**
   * The type of the `NoteChangeResultError` API.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

ShippingAddressUpdateChange

type
The type of the `ShippingAddressUpdateChange` API.
```
"updateShippingAddress"
```
address
Fields to update in the shipping address. You only need to provide values for the fields you want to update — any fields you do not list will keep their current values.
```
Partial<MailingAddress>
```

export interface ShippingAddressUpdateChange {
  /**
   * The type of the `ShippingAddressUpdateChange` API.
   */
  type: 'updateShippingAddress';

  /**
   * Fields to update in the shipping address. You only need to provide
   * values for the fields you want to update — any fields you do not list
   * will keep their current values.
   */
  address: Partial<MailingAddress>;
}

MailingAddress

name
The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
firstName
The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
lastName
The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
company
The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
address1
The first line of the buyer's address, including street name and number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
address2
The second line of the buyer's address, like apartment number, suite, etc. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
city
The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
zip
The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
countryCode
The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
CountryCode
```
provinceCode
The buyer's province code, such as state, province, prefecture, or region. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
phone
The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```

export interface MailingAddress {
  /**
   * The buyer's full name.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'John Doe'
   */
  name?: string;

  /**
   * The buyer's first name.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'John'
   */
  firstName?: string;

  /**
   * The buyer's last name.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'Doe'
   */
  lastName?: string;

  /**
   * The buyer's company name.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'Shopify'
   */
  company?: string;

  /**
   * The first line of the buyer's address, including street name and number.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example '151 O'Connor Street'
   */
  address1?: string;

  /**
   * The second line of the buyer's address, like apartment number, suite, etc.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'Ground floor'
   */
  address2?: string;

  /**
   * The buyer's city.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'Ottawa'
   */
  city?: string;

  /**
   * The buyer's postal or ZIP code.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'K2P 2L8'
   */
  zip?: string;

  /**
   * The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'CA' for Canada.
   */
  countryCode?: CountryCode;

  /**
   * The buyer's province code, such as state, province, prefecture, or region.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'ON' for Ontario.
   */
  provinceCode?: string;

  /**
   * The buyer's phone number.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example '+1 613 111 2222'.
   */
  phone?: string;
}

CountryCode

'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ'

ShippingAddressChangeResult

ShippingAddressChangeResultSuccess | ShippingAddressChangeResultError

ShippingAddressChangeResultSuccess

The returned result of a successful update to the shipping address.

type
The type of the `ShippingAddressChangeResultSuccess` API.
```
"success"
```
errors
```
null
```

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

  errors: null;
}

ShippingAddressChangeResultError

The returned result of an update to the shipping address with a messages detailing the type of errors that occurred.

type
The type of the `ShippingAddressChangeResultError` API.
```
"error"
```
errors
The errors corresponding to particular fields from a given change
```
ShippingAddressChangeFieldError[]
```

export interface ShippingAddressChangeResultError {
  /**
   * The type of the `ShippingAddressChangeResultError` API.
   */
  type: 'error';

  /**
   * The errors corresponding to particular fields from a given change
   */
  errors: ShippingAddressChangeFieldError[];
}

ShippingAddressChangeFieldError

An error corresponding to a particular field from a given change

field
field key from MailingAddress where the error occurred
```
keyof MailingAddress
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface ShippingAddressChangeFieldError {
  /**
   * field key from MailingAddress where the error occurred
   */
  field?: keyof MailingAddress;

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

StandardApi

analytics
Methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event.
```
Analytics
```
appliedGiftCards
Gift Cards that have been applied to the checkout.
```
StatefulRemoteSubscribable<AppliedGiftCard[]>
```
appMetafields
The metafields requested in the [`shopify.extension.toml`](/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](/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.*
```
StatefulRemoteSubscribable<AppMetafieldEntry[]>
```
attributes
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
```
StatefulRemoteSubscribable<Attribute[] | undefined>
```
availablePaymentOptions
All available payment options.
```
StatefulRemoteSubscribable<PaymentOption[]>
```
buyerIdentity
Information about the buyer that is interacting with the checkout. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
BuyerIdentity
```
buyerJourney
Provides details on the buyer's progression through the checkout. See [buyer journey](/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey) examples for more information.
```
BuyerJourney
```
checkoutSettings
Settings applied to the buyer's checkout.
```
StatefulRemoteSubscribable<CheckoutSettings>
```
cost
Details on the costs the buyer will pay for this checkout.
```
CartCost
```
deliveryGroups
A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
```
StatefulRemoteSubscribable<DeliveryGroup[]>
```
discountCodes
A list of discount codes currently applied to the checkout.
```
StatefulRemoteSubscribable<CartDiscountCode[]>
```
discountAllocations
Discounts that have been applied to the entire cart.
```
StatefulRemoteSubscribable<CartDiscountAllocation[]>
```
extension
Meta information about the extension.
```
Extension<Target>
```
extensionPoint
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.
```
Target
```
i18n
Utilities for translating content and formatting values according to the current [`localization`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization) of the checkout. See [localization examples](/docs/api/checkout-ui-extensions/apis/standardapi#example-localization) for more information.
```
I18n
```
lines
A list of lines containing information about the items the customer intends to purchase.
```
StatefulRemoteSubscribable<CartLine[]>
```
localization
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`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-i18n) object instead.
```
Localization
```
metafields
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](/docs/admin-api/graphql/reference/orders/order#metafield-2021-01)
```
StatefulRemoteSubscribable<Metafield[]>
```
note
A note left by the customer to the merchant, either in their cart or during checkout.
```
StatefulRemoteSubscribable<string | undefined>
```
query
Used to query the Storefront GraphQL API with a prefetched token. See [storefront api access examples](/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
```
<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>
```
selectedPaymentOptions
Payment options selected by the buyer.
```
StatefulRemoteSubscribable<SelectedPaymentOption[]>
```
sessionToken
Provides access to session tokens, which can be used to verify token claims on your app's server. See [session token examples](/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
```
SessionToken
```
settings
The settings matching the settings definition written in the [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration) file. See [settings examples](/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.
```
StatefulRemoteSubscribable<ExtensionSettings>
```
shippingAddress
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](/docs/apps/store/data-protection/protected-customer-data).
```
StatefulRemoteSubscribable<MailingAddress | undefined>
```
shop
Shop where the checkout is taking place.
```
Shop
```
storage
Key-value storage for the extension target.
```
Storage
```
ui
Methods to interact with the extension's UI.
```
Ui
```
version
The renderer version being used for the extension.
```
Version
```

export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
  /**
   * Methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event.
   */
  analytics: Analytics;

  /**
   * Gift Cards that have been applied to the checkout.
   */
  appliedGiftCards: StatefulRemoteSubscribable<AppliedGiftCard[]>;

  /**
   * The metafields requested in the
   * [`shopify.extension.toml`](/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](/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<AppMetafieldEntry[]>;

  /**
   * Custom attributes left by the customer to the merchant, either in their cart or during checkout.
   */
  attributes: StatefulRemoteSubscribable<Attribute[] | undefined>;

  /**
   * All available payment options.
   */
  availablePaymentOptions: StatefulRemoteSubscribable<PaymentOption[]>;

  /**
   * Information about the buyer that is interacting with the checkout.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  buyerIdentity?: BuyerIdentity;

  /**
   * Provides details on the buyer's progression through the checkout.
   *
   * See [buyer journey](/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<CheckoutSettings>;

  /**
   * 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<DeliveryGroup[]>;

  /**
   * A list of discount codes currently applied to the checkout.
   */
  discountCodes: StatefulRemoteSubscribable<CartDiscountCode[]>;

  /**
   * Discounts that have been applied to the entire cart.
   */
  discountAllocations: StatefulRemoteSubscribable<CartDiscountAllocation[]>;

  /**
   * Meta information about the extension.
   */
  extension: Extension<Target>;

  /**
   * The identifier that specifies where in Shopify’s UI your code is being
   * injected. This will be one of the targets you have included in your
   * extension’s configuration file.
   *
   * @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`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
   * of the checkout.
   *
   * See [localization examples](/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<CartLine[]>;

  /**
   * 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`](/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](/docs/admin-api/graphql/reference/orders/order#metafield-2021-01)
   */
  metafields: StatefulRemoteSubscribable<Metafield[]>;

  /**
   * A note left by the customer to the merchant, either in their cart or during checkout.
   */
  note: StatefulRemoteSubscribable<string | undefined>;

  /**
   * Used to query the Storefront GraphQL API with a prefetched token.
   *
   * See [storefront api access examples](/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
   */
  query: <Data = unknown, Variables = {[key: string]: unknown}>(
    query: string,
    options?: {variables?: Variables; version?: StorefrontApiVersion},
  ) => Promise<{data?: Data; errors?: GraphQLError[]}>;

  /**
   * Payment options selected by the buyer.
   */
  selectedPaymentOptions: StatefulRemoteSubscribable<SelectedPaymentOption[]>;

  /**
   * Provides access to session tokens, which can be used to verify token claims on your app's server.
   *
   * See [session token examples](/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`](/docs/api/checkout-ui-extensions/configuration) file.
   *
   *  See [settings examples](/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<ExtensionSettings>;

  /**
   * 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](/docs/apps/store/data-protection/protected-customer-data).
   */
  shippingAddress?: StatefulRemoteSubscribable<MailingAddress | undefined>;

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

Analytics

publish
Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
```
(name: string, data: { [key: string]: unknown; }) => Promise<boolean>
```

export interface Analytics {
  /**
   * Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
   */
  publish(name: string, data: {[key: string]: unknown}): Promise<boolean>;
}

AppliedGiftCard

lastCharacters
The last four characters of the applied gift card's code.
```
string
```
amountUsed
The amount of the applied gift card that will be used when the checkout is completed.
```
Money
```
balance
The current balance of the applied gift card prior to checkout completion.
```
Money
```

export interface AppliedGiftCard {
  /**
   * The last four characters of the applied gift card's code.
   */
  lastCharacters: string;

  /**
   * The amount of the applied gift card that will be used when the checkout is completed.
   */
  amountUsed: Money;

  /**
   * The current balance of the applied gift card prior to checkout completion.
   */
  balance: Money;
}

AppMetafieldEntry

A metafield associated with the shop or a resource on the checkout.

target
The target that is associated to the metadata. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.
```
AppMetafieldEntryTarget
```
metafield
The metadata information.
```
AppMetafield
```

export interface AppMetafieldEntry {
  /**
   * The target that is associated to the metadata.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.
   */
  target: AppMetafieldEntryTarget;

  /** The metadata information. */
  metafield: AppMetafield;
}

AppMetafieldEntryTarget

The metafield owner.

type
The type of the metafield owner. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.
```
"cart" | "shop" | "customer" | "product" | "variant" | "company" | "companyLocation"
```
id
The numeric owner ID that is associated with the metafield.
```
string
```

export interface AppMetafieldEntryTarget {
  /**
   * The type of the metafield owner.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.
   */
  type:
    | 'customer'
    | 'product'
    | 'shop'
    | 'variant'
    | 'company'
    | 'companyLocation'
    | 'cart';

  /** The numeric owner ID that is associated with the metafield. */
  id: string;
}

AppMetafield

Represents a custom metadata attached to a resource.

key
The key name of a metafield.
```
string
```
namespace
The namespace for a metafield.
```
string
```
value
The value of a metafield.
```
string | number | boolean
```

valueType

The metafield’s information type.

"string" | "boolean" | "integer" | "json_string" | "float"

type
The metafield's type name.
```
string
```

export interface AppMetafield {
  /** The key name of a metafield. */
  key: string;

  /** The namespace for a metafield. */
  namespace: string;

  /** The value of a metafield. */
  value: string | number | boolean;

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

  /** The metafield's type name. */
  type: string;
}

PaymentOption

A payment option presented to the buyer.

type
The type of the payment option. Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions. | Type | Description | |---|---| | `creditCard` | A vaulted or manually entered credit card. | | `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. | | `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market | | `manualPayment` | A manual payment option such as an in-person retail transaction. | | `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. | | `other` | Another type of payment not defined here. | | `paymentOnDelivery` | A payment that will be collected on delivery. | | `redeemable` | A redeemable payment option such as a gift card or store credit. | | `wallet` | An integrated wallet such as PayPal, Google Pay, Apple Pay, etc. | | `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. |
```
"creditCard" | "deferred" | "local" | "manualPayment" | "offsite" | "other" | "paymentOnDelivery" | "redeemable" | "wallet" | "customOnsite"
```
handle
The unique handle for the payment option. This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop.
```
string
```

export interface PaymentOption {
  /**
   * The type of the payment option.
   *
   * Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions.
   *
   * | Type  | Description  |
   * |---|---|
   * | `creditCard`  |  A vaulted or manually entered credit card.  |
   * | `deferred`  |  A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time.  |
   * | `local`  |  A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market  |
   * | `manualPayment`  |  A manual payment option such as an in-person retail transaction.  |
   * | `offsite`  |  A payment processed outside of Shopify's checkout, excluding integrated wallets.  |
   * | `other`  |  Another type of payment not defined here.  |
   * | `paymentOnDelivery`  |  A payment that will be collected on delivery.  |
   * | `redeemable`  |  A redeemable payment option such as a gift card or store credit.  |
   * | `wallet`  |  An integrated wallet such as PayPal, Google Pay, Apple Pay, etc.  |
   * | `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. |
   */
  type:
    | 'creditCard'
    | 'deferred'
    | 'local'
    | 'manualPayment'
    | 'offsite'
    | 'other'
    | 'paymentOnDelivery'
    | 'redeemable'
    | 'wallet'
    | 'customOnsite';

  /**
   * The unique handle for the payment option.
   *
   * This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop.
   */
  handle: string;
}

BuyerIdentity

customer
The buyer's customer account. The value is undefined if the buyer isn’t a known customer for this shop or if they haven't logged in yet. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
StatefulRemoteSubscribable<Customer | undefined>
```
email
The email address of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
StatefulRemoteSubscribable<string | undefined>
```
phone
The phone number of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
StatefulRemoteSubscribable<string | undefined>
```
purchasingCompany
Provides details of the company and the company location that the business customer is purchasing on behalf of. This includes information that can be used to identify the company and the company location that the business customer belongs to. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
StatefulRemoteSubscribable<PurchasingCompany | undefined>
```

export interface BuyerIdentity {
  /**
   * The buyer's customer account. The value is undefined if the buyer isn’t a
   * known customer for this shop or if they haven't logged in yet.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  customer: StatefulRemoteSubscribable<Customer | undefined>;

  /**
   * The email address of the buyer that is interacting with the cart.
   * The value is `undefined` if the app does not have access to customer data.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  email: StatefulRemoteSubscribable<string | undefined>;

  /**
   * The phone number of the buyer that is interacting with the cart.
   * The value is `undefined` if the app does not have access to customer data.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  phone: StatefulRemoteSubscribable<string | undefined>;

  /**
   * Provides details of the company and the company location that the business customer is purchasing on behalf of.
   * This includes information that can be used to identify the company and the company location that the business
   * customer belongs to.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  purchasingCompany: StatefulRemoteSubscribable<PurchasingCompany | undefined>;
}

Customer

Information about a customer who has previously purchased from this shop. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).

id
Customer ID. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
email
The email of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
phone
The phone number of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
fullName
The full name of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
firstName
The first name of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
lastName
The last name of the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
image
The image associated with the customer. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
ImageDetails
```
acceptsMarketing
Defines if the customer accepts marketing activities.
```
boolean
```
storeCreditAccounts
The Store Credit Accounts owned by the customer and usable during the checkout process. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
StoreCreditAccount[]
```

export interface Customer {
  /**
   * Customer ID.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @example 'gid://shopify/Customer/123'
   */
  id: string;
  /**
   * The email of the customer.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  email?: string;
  /**
   * The phone number of the customer.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  phone?: string;
  /**
   * The full name of the customer.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  fullName?: string;
  /**
   * The first name of the customer.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  firstName?: string;
  /**
   * The last name of the customer.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  lastName?: string;
  /**
   * The image associated with the customer.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  image: ImageDetails;
  /**
   * Defines if the customer accepts marketing activities.
   */
  acceptsMarketing: boolean;
  /**
   * The Store Credit Accounts owned by the customer and usable during the checkout process.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   *
   * @private
   */
  storeCreditAccounts: StoreCreditAccount[];
}

StoreCreditAccount

Information about a Store Credit Account.

id
A globally-unique identifier.
```
string
```
balance
The current balance of the Store Credit Account.
```
Money
```

export interface StoreCreditAccount {
  /**
   * A globally-unique identifier.
   * @example 'gid://shopify/StoreCreditAccount/1'
   */
  id: string;
  /**
   * The current balance of the Store Credit Account.
   */
  balance: Money;
}

PurchasingCompany

Information about a company that the business customer is purchasing on behalf of.

company
Includes information of the company that the business customer is purchasing on behalf of. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
Company
```
location
Includes information of the company location that the business customer is purchasing on behalf of. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
CompanyLocation
```

export interface PurchasingCompany {
  /**
   * Includes information of the company that the business customer is purchasing on behalf of.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  company: Company;
  /**
   * Includes information of the company location that the business customer is purchasing on behalf of.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  location: CompanyLocation;
}

Company

id
The company ID. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
name
The name of the company. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
externalId
The external ID of the company that can be set by the merchant. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```

export interface Company {
  /**
   * The company ID.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  id: string;
  /**
   * The name of the company.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  name: string;
  /**
   * The external ID of the company that can be set by the merchant.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  externalId?: string;
}

CompanyLocation

id
The company location ID. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
name
The name of the company location. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```
externalId
The external ID of the company location that can be set by the merchant. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```

export interface CompanyLocation {
  /**
   * The company location ID.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  id: string;
  /**
   * The name of the company location.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  name: string;
  /**
   * The external ID of the company location that can be set by the merchant.
   *
   * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
   */
  externalId?: string;
}

BuyerJourney

Provides details on the buyer's progression through the checkout.

intercept
Installs a function for intercepting and preventing progress on checkout. This returns a promise that resolves to a teardown function. Calling the teardown function will remove the interceptor. To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration.
```
(interceptor: Interceptor) => Promise<() => void>
```
completed
This subscribable value will be true if the buyer completed submitting their order. For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order.
```
StatefulRemoteSubscribable<boolean>
```

export interface BuyerJourney {
  /**
   * Installs a function for intercepting and preventing progress on checkout.
   *
   * This returns a promise that resolves to a teardown function. Calling the
   * teardown function will remove the interceptor.
   *
   * To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress)
   * capability in your extension's configuration.
   */
  intercept(interceptor: Interceptor): Promise<() => void>;

  /**
   * This subscribable value will be true if the buyer completed submitting their order.
   *
   * For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order.
   */
  completed: StatefulRemoteSubscribable<boolean>;
}

Interceptor

A function for intercepting and preventing navigation on checkout. You can block navigation by returning an object with `{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState, errors?: ValidationErrors[]}`. If you do, then you're expected to also update some part of your UI to reflect the reason why navigation was blocked, either by targeting checkout UI fields, passing errors to the page level or rendering the errors in your extension.

(
  interceptorProps: InterceptorProps,
) => InterceptorRequest | Promise<InterceptorRequest>

InterceptorProps

canBlockProgress
Whether the interceptor has the capability to block a buyer's progress through checkout. This ability might be granted by a merchant in differing checkout contexts.
```
boolean
```

export interface InterceptorProps {
  /**
   * Whether the interceptor has the capability to block a buyer's progress through
   * checkout. This ability might be granted by a merchant in differing checkout contexts.
   */
  canBlockProgress: boolean;
}

InterceptorRequest

InterceptorRequestAllow | InterceptorRequestBlock

InterceptorRequestAllow

behavior
Indicates that the interceptor will allow the buyer's journey to continue.
```
"allow"
```
perform
This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.
```
(result: InterceptorResult) => void | Promise<void>
```

interface InterceptorRequestAllow {
  /**
   * Indicates that the interceptor will allow the buyer's journey to continue.
   */
  behavior: 'allow';

  /**
   * This callback is called when all interceptors finish. We recommend
   * setting errors or reasons for blocking at this stage, so that all the errors in
   * the UI show up at once.
   * @param result InterceptorResult with behavior as either 'allow' or 'block'
   */
  perform?(result: InterceptorResult): void | Promise<void>;
}

InterceptorResult

InterceptorResultAllow | InterceptorResultBlock

InterceptorResultAllow

behavior
Indicates that the buyer was allowed to progress through checkout.
```
"allow"
```

interface InterceptorResultAllow {
  /**
   * Indicates that the buyer was allowed to progress through checkout.
   */
  behavior: 'allow';
}

InterceptorResultBlock

behavior
Indicates that some part of the checkout UI intercepted and prevented the buyer’s progress. The buyer typically needs to take some action to resolve this issue and to move on to the next step.
```
"block"
```

interface InterceptorResultBlock {
  /**
   * Indicates that some part of the checkout UI intercepted and prevented
   * the buyer’s progress. The buyer typically needs to take some action
   * to resolve this issue and to move on to the next step.
   */
  behavior: 'block';
}

InterceptorRequestBlock

behavior
Indicates that the interceptor will block the buyer's journey from continuing.
```
"block"
```
reason
The reason for blocking the interceptor request. This value isn't presented to the buyer, so it doesn't need to be localized. The value is used only for Shopify’s own internal debugging and metrics.
```
string
```
errors
Used to pass errors to the checkout UI, outside your extension's UI boundaries.
```
ValidationError[]
```
perform
This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.
```
(result: InterceptorResult) => void | Promise<void>
```

interface InterceptorRequestBlock {
  /**
   * Indicates that the interceptor will block the buyer's journey from continuing.
   */
  behavior: 'block';

  /**
   * The reason for blocking the interceptor request. This value isn't presented to
   * the buyer, so it doesn't need to be localized. The value is used only for Shopify’s
   * own internal debugging and metrics.
   */
  reason: string;

  /**
   * Used to pass errors to the checkout UI, outside your extension's UI boundaries.
   */
  errors?: ValidationError[];

  /**
   * This callback is called when all interceptors finish. We recommend
   * setting errors or reasons for blocking at this stage, so that all the errors in
   * the UI show up at once.
   * @param result InterceptorResult with behavior as either 'allow' or 'block'
   */
  perform?(result: InterceptorResult): void | Promise<void>;
}

ValidationError

message
Error message to be displayed to the buyer.
```
string
```
target
The checkout UI field that the error is associated with. Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode` See the [supported targets](/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets) for more information.
```
string
```

export interface ValidationError {
  /**
   * Error message to be displayed to the buyer.
   */
  message: string;
  /**
   * The checkout UI field that the error is associated with.
   *
   * Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode`
   *
   * See the [supported targets](/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets)
   * for more information.
   */
  target?: string;
}

CheckoutSettings

Settings describing the behavior of the buyer's checkout.

orderSubmission
The type of order that will be created once the buyer completes checkout.
```
"DRAFT_ORDER" | "ORDER"
```
paymentTermsTemplate
Represents the merchant configured payment terms.
```
PaymentTermsTemplate
```
shippingAddress
Settings describing the behavior of the shipping address.
```
ShippingAddressSettings
```

export interface CheckoutSettings {
  /**
   * The type of order that will be created once the buyer completes checkout.
   */
  orderSubmission: 'DRAFT_ORDER' | 'ORDER';
  /**
   * Represents the merchant configured payment terms.
   */
  paymentTermsTemplate?: PaymentTermsTemplate;
  /**
   * Settings describing the behavior of the shipping address.
   */
  shippingAddress: ShippingAddressSettings;
}

PaymentTermsTemplate

Represents the payment terms template object.

id
A globally-unique ID.
```
string
```
name
The name of the payment terms translated to the buyer's current language. See [localization.language](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization).
```
string
```
dueDate
The due date for net payment terms as a ISO 8601 formatted string `YYYY-MM-DDTHH:mm:ss.sssZ`.
```
string
```
dueInDays
The number of days between the issued date and due date if using net payment terms.
```
number
```

export interface PaymentTermsTemplate {
  /**
   * A globally-unique ID.
   * @example 'gid://shopify/PaymentTermsTemplate/1'
   */
  id: string;
  /**
   * The name of the payment terms translated to the buyer's current language. See [localization.language](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization).
   */
  name: string;
  /**
   * The due date for net payment terms as a ISO 8601 formatted string `YYYY-MM-DDTHH:mm:ss.sssZ`.
   */
  dueDate?: string;
  /**
   * The number of days between the issued date and due date if using net payment terms.
   */
  dueInDays?: number;
}

ShippingAddressSettings

Settings describing the behavior of the shipping address.

isEditable
Describes whether the buyer can ship to any address during checkout.
```
boolean
```

export interface ShippingAddressSettings {
  /**
   * Describes whether the buyer can ship to any address during checkout.
   */
  isEditable: boolean;
}

CartCost

totalAmount
A `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated.
```
StatefulRemoteSubscribable<Money>
```

export interface CartCost {
  /**
   * A `Money` value representing the minimum a buyer can expect to pay at the current
   * step of checkout. This value excludes amounts yet to be negotiated. For example,
   * the information step might not have delivery costs calculated.
   */
  totalAmount: StatefulRemoteSubscribable<Money>;
}

DeliveryGroup

Represents the delivery information and options available for one or more cart lines.

targetedCartLines
The cart line references associated to the delivery group.
```
CartLineReference[]
```
deliveryOptions
The delivery options available for the delivery group.
```
DeliveryOption[]
```
selectedDeliveryOption
The selected delivery option for the delivery group.
```
DeliveryOptionReference
```
groupType
The type of the delivery group.
```
DeliveryGroupType
```
isDeliveryRequired
Whether delivery is required for the delivery group.
```
boolean
```

export interface DeliveryGroup {
  /**
   * The cart line references associated to the delivery group.
   */
  targetedCartLines: CartLineReference[];

  /**
   * The delivery options available for the delivery group.
   */
  deliveryOptions: DeliveryOption[];

  /**
   * The selected delivery option for the delivery group.
   */
  selectedDeliveryOption?: DeliveryOptionReference;

  /**
   * The type of the delivery group.
   */
  groupType: DeliveryGroupType;

  /**
   * Whether delivery is required for the delivery group.
   */
  isDeliveryRequired: boolean;
}

CartLineReference

Represents a reference to a cart line.

id
The unique identifier of the referenced cart line.
```
string
```

export interface CartLineReference {
  /**
   * The unique identifier of the referenced cart line.
   */
  id: string;
}

DeliveryOption

Represents a base interface for a single delivery option.

handle
The unique identifier of the delivery option.
```
string
```
title
The title of the delivery option.
```
string
```
description
The description of the delivery option.
```
string
```

export interface DeliveryOption {
  /**
   * The unique identifier of the delivery option.
   */
  handle: string;

  /**
   * The title of the delivery option.
   */
  title?: string;

  /**
   * The description of the delivery option.
   */
  description?: string;
}

DeliveryOptionReference

Represents a reference to a delivery option.

handle
The unique identifier of the referenced delivery option.
```
string
```

export interface DeliveryOptionReference {
  /**
   * The unique identifier of the referenced delivery option.
   */
  handle: string;
}

DeliveryGroupType

The possible types of a delivery group.

'oneTimePurchase' | 'subscription'

CartDiscountCode

code
The code for the discount
```
string
```

export interface CartDiscountCode {
  /**
   * The code for the discount
   */
  code: string;
}

Extension

Meta information about an extension target.

apiVersion
The API version that was set in the extension config file.
```
ApiVersion
```
capabilities
The allowed capabilities of the extension, defined in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
```
StatefulRemoteSubscribable<Capability[]>
```
editor
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
```
Editor
```
rendered
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.
```
StatefulRemoteSubscribable<boolean>
```
scriptUrl
The URL to the script that started the extension target.
```
string
```
target
The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
```
Target
```
version
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
```
string
```

export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
  /**
   * 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](/docs/api/checkout-ui-extensions/configuration) file.
   *
   * * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
   *
   * * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
   *
   * * [`block_progress`](/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<Capability[]>;

  /**
   * 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<boolean>;

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

ApiVersion

Union of supported API versions

'2023-04' | '2023-07' | 'unstable'

Capability

The capabilities an extension has access to. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.

'api_access' | 'network_access' | 'block_progress'

Editor

type
Indicates whether the extension is rendering in the checkout editor.
```
"checkout"
```

export interface Editor {
  /**
   * Indicates whether the extension is rendering in the checkout editor.
   */
  type: 'checkout';
}

I18n

formatNumber
Returns a localized number. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. It uses the buyer's locale by default.
```
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string
```
formatCurrency
Returns a localized currency value. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. It uses the buyer's locale by default.
```
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string
```
formatDate
Returns a localized date value. This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses the buyer's locale by default. Formatting options can be passed in as options.
```
(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string
```
translate
Returns translated content in the buyer's locale, as supported by the extension. - `options.count` is a special numeric value used in pluralization. - The other option keys and values are treated as replacements for interpolation. - If the replacements are all primitives, then `translate()` returns a single string. - If replacements contain UI components, then `translate()` returns an array of elements.
```
I18nTranslate
```

export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}

I18nTranslate

This returns a translated string matching a key in a locale file.

export interface I18nTranslate {
  <ReplacementType = string>(
    key: string,
    options?: {[placeholderKey: string]: ReplacementType | string | number},
  ): ReplacementType extends string | number
    ? string
    : (string | ReplacementType)[];
}

Localization

currency
The currency that the buyer sees for money amounts in the checkout.
```
StatefulRemoteSubscribable<Currency>
```
timezone
The buyer’s time zone.
```
StatefulRemoteSubscribable<Timezone>
```
language
The language the buyer sees in the checkout.
```
StatefulRemoteSubscribable<Language>
```
extensionLanguage
This is the buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, this is the fallback locale used for translations. For example, if the buyer's language is 'fr-CA' but your extension only supports translations for 'fr', then the `isoCode` for this language is 'fr'. If your extension does not provide french translations at all, this value is the default locale for your extension (that is, the one matching your .default.json file).
```
StatefulRemoteSubscribable<Language>
```
country
The country context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. The value is undefined if unknown.
```
StatefulRemoteSubscribable<Country | undefined>
```
market
The [market](/docs/apps/markets) context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. The value is undefined if unknown.
```
StatefulRemoteSubscribable<Market | undefined>
```

export interface Localization {
  /**
   * The currency that the buyer sees for money amounts in the checkout.
   */
  currency: StatefulRemoteSubscribable<Currency>;

  /**
   * The buyer’s time zone.
   */
  timezone: StatefulRemoteSubscribable<Timezone>;

  /**
   * The language the buyer sees in the checkout.
   */
  language: StatefulRemoteSubscribable<Language>;

  /**
   * This is the buyer's language, as supported by the extension.
   * If the buyer's actual language is not supported by the extension,
   * this is the fallback locale used for translations.
   *
   * For example, if the buyer's language is 'fr-CA' but your extension
   * only supports translations for 'fr', then the `isoCode` for this
   * language is 'fr'. If your extension does not provide french
   * translations at all, this value is the default locale for your
   * extension (that is, the one matching your .default.json file).
   */
  extensionLanguage: StatefulRemoteSubscribable<Language>;

  /**
   * The country context of the checkout. This value carries over from the
   * context of the cart, where it was used to contextualize the storefront
   * experience. It will update if the buyer changes the country of their
   * shipping address. The value is undefined if unknown.
   */
  country: StatefulRemoteSubscribable<Country | undefined>;

  /**
   * The [market](/docs/apps/markets) context of the
   * checkout. This value carries over from the context of the cart, where it
   * was used to contextualize the storefront experience. It will update if the
   * buyer changes the country of their shipping address. The value is undefined
   * if unknown.
   */
  market: StatefulRemoteSubscribable<Market | undefined>;
}

Currency

isoCode
The ISO-4217 code for this currency.
```
CurrencyCode
```

export interface Currency {
  /**
   * The ISO-4217 code for this currency.
   * @see https://www.iso.org/iso-4217-currency-codes.html
   */
  isoCode: CurrencyCode;
}

Timezone

'Africa/Abidjan' | 'Africa/Algiers' | 'Africa/Bissau' | 'Africa/Cairo' | 'Africa/Casablanca' | 'Africa/Ceuta' | 'Africa/El_Aaiun' | 'Africa/Johannesburg' | 'Africa/Juba' | 'Africa/Khartoum' | 'Africa/Lagos' | 'Africa/Maputo' | 'Africa/Monrovia' | 'Africa/Nairobi' | 'Africa/Ndjamena' | 'Africa/Sao_Tome' | 'Africa/Tripoli' | 'Africa/Tunis' | 'Africa/Windhoek' | 'America/Adak' | 'America/Anchorage' | 'America/Araguaina' | 'America/Argentina/Buenos_Aires' | 'America/Argentina/Catamarca' | 'America/Argentina/Cordoba' | 'America/Argentina/Jujuy' | 'America/Argentina/La_Rioja' | 'America/Argentina/Mendoza' | 'America/Argentina/Rio_Gallegos' | 'America/Argentina/Salta' | 'America/Argentina/San_Juan' | 'America/Argentina/San_Luis' | 'America/Argentina/Tucuman' | 'America/Argentina/Ushuaia' | 'America/Asuncion' | 'America/Bahia' | 'America/Bahia_Banderas' | 'America/Barbados' | 'America/Belem' | 'America/Belize' | 'America/Boa_Vista' | 'America/Bogota' | 'America/Boise' | 'America/Cambridge_Bay' | 'America/Campo_Grande' | 'America/Cancun' | 'America/Caracas' | 'America/Cayenne' | 'America/Chicago' | 'America/Chihuahua' | 'America/Costa_Rica' | 'America/Cuiaba' | 'America/Danmarkshavn' | 'America/Dawson' | 'America/Dawson_Creek' | 'America/Denver' | 'America/Detroit' | 'America/Edmonton' | 'America/Eirunepe' | 'America/El_Salvador' | 'America/Fort_Nelson' | 'America/Fortaleza' | 'America/Glace_Bay' | 'America/Goose_Bay' | 'America/Grand_Turk' | 'America/Guatemala' | 'America/Guayaquil' | 'America/Guyana' | 'America/Halifax' | 'America/Havana' | 'America/Hermosillo' | 'America/Indiana/Indianapolis' | 'America/Indiana/Knox' | 'America/Indiana/Marengo' | 'America/Indiana/Petersburg' | 'America/Indiana/Tell_City' | 'America/Indiana/Vevay' | 'America/Indiana/Vincennes' | 'America/Indiana/Winamac' | 'America/Inuvik' | 'America/Iqaluit' | 'America/Jamaica' | 'America/Juneau' | 'America/Kentucky/Louisville' | 'America/Kentucky/Monticello' | 'America/La_Paz' | 'America/Lima' | 'America/Los_Angeles' | 'America/Maceio' | 'America/Managua' | 'America/Manaus' | 'America/Martinique' | 'America/Matamoros' | 'America/Mazatlan' | 'America/Menominee' | 'America/Merida' | 'America/Metlakatla' | 'America/Mexico_City' | 'America/Miquelon' | 'America/Moncton' | 'America/Monterrey' | 'America/Montevideo' | 'America/New_York' | 'America/Nipigon' | 'America/Nome' | 'America/Noronha' | 'America/North_Dakota/Beulah' | 'America/North_Dakota/Center' | 'America/North_Dakota/New_Salem' | 'America/Nuuk' | 'America/Ojinaga' | 'America/Panama' | 'America/Pangnirtung' | 'America/Paramaribo' | 'America/Phoenix' | 'America/Port-au-Prince' | 'America/Porto_Velho' | 'America/Puerto_Rico' | 'America/Punta_Arenas' | 'America/Rainy_River' | 'America/Rankin_Inlet' | 'America/Recife' | 'America/Regina' | 'America/Resolute' | 'America/Rio_Branco' | 'America/Santarem' | 'America/Santiago' | 'America/Santo_Domingo' | 'America/Sao_Paulo' | 'America/Scoresbysund' | 'America/Sitka' | 'America/St_Johns' | 'America/Swift_Current' | 'America/Tegucigalpa' | 'America/Thule' | 'America/Thunder_Bay' | 'America/Tijuana' | 'America/Toronto' | 'America/Vancouver' | 'America/Whitehorse' | 'America/Winnipeg' | 'America/Yakutat' | 'America/Yellowknife' | 'Antarctica/Casey' | 'Antarctica/Davis' | 'Antarctica/Macquarie' | 'Antarctica/Mawson' | 'Antarctica/Palmer' | 'Antarctica/Rothera' | 'Antarctica/Troll' | 'Antarctica/Vostok' | 'Asia/Almaty' | 'Asia/Amman' | 'Asia/Anadyr' | 'Asia/Aqtau' | 'Asia/Aqtobe' | 'Asia/Ashgabat' | 'Asia/Atyrau' | 'Asia/Baghdad' | 'Asia/Baku' | 'Asia/Bangkok' | 'Asia/Barnaul' | 'Asia/Beirut' | 'Asia/Bishkek' | 'Asia/Brunei' | 'Asia/Chita' | 'Asia/Choibalsan' | 'Asia/Colombo' | 'Asia/Damascus' | 'Asia/Dhaka' | 'Asia/Dili' | 'Asia/Dubai' | 'Asia/Dushanbe' | 'Asia/Famagusta' | 'Asia/Gaza' | 'Asia/Hebron' | 'Asia/Ho_Chi_Minh' | 'Asia/Hong_Kong' | 'Asia/Hovd' | 'Asia/Irkutsk' | 'Asia/Jakarta' | 'Asia/Jayapura' | 'Asia/Jerusalem' | 'Asia/Kabul' | 'Asia/Kamchatka' | 'Asia/Karachi' | 'Asia/Kathmandu' | 'Asia/Khandyga' | 'Asia/Kolkata' | 'Asia/Krasnoyarsk' | 'Asia/Kuala_Lumpur' | 'Asia/Kuching' | 'Asia/Macau' | 'Asia/Magadan' | 'Asia/Makassar' | 'Asia/Manila' | 'Asia/Nicosia' | 'Asia/Novokuznetsk' | 'Asia/Novosibirsk' | 'Asia/Omsk' | 'Asia/Oral' | 'Asia/Pontianak' | 'Asia/Pyongyang' | 'Asia/Qatar' | 'Asia/Qostanay' | 'Asia/Qyzylorda' | 'Asia/Riyadh' | 'Asia/Sakhalin' | 'Asia/Samarkand' | 'Asia/Seoul' | 'Asia/Shanghai' | 'Asia/Singapore' | 'Asia/Srednekolymsk' | 'Asia/Taipei' | 'Asia/Tashkent' | 'Asia/Tbilisi' | 'Asia/Tehran' | 'Asia/Thimphu' | 'Asia/Tokyo' | 'Asia/Tomsk' | 'Asia/Ulaanbaatar' | 'Asia/Urumqi' | 'Asia/Ust-Nera' | 'Asia/Vladivostok' | 'Asia/Yakutsk' | 'Asia/Yangon' | 'Asia/Yekaterinburg' | 'Asia/Yerevan' | 'Atlantic/Azores' | 'Atlantic/Bermuda' | 'Atlantic/Canary' | 'Atlantic/Cape_Verde' | 'Atlantic/Faroe' | 'Atlantic/Madeira' | 'Atlantic/Reykjavik' | 'Atlantic/South_Georgia' | 'Atlantic/Stanley' | 'Australia/Adelaide' | 'Australia/Brisbane' | 'Australia/Broken_Hill' | 'Australia/Darwin' | 'Australia/Eucla' | 'Australia/Hobart' | 'Australia/Lindeman' | 'Australia/Lord_Howe' | 'Australia/Melbourne' | 'Australia/Perth' | 'Australia/Sydney' | 'CET' | 'CST6CDT' | 'EET' | 'EST' | 'EST5EDT' | 'Etc/GMT' | 'Etc/GMT-1' | 'Etc/GMT-10' | 'Etc/GMT-11' | 'Etc/GMT-12' | 'Etc/GMT-13' | 'Etc/GMT-14' | 'Etc/GMT-2' | 'Etc/GMT-3' | 'Etc/GMT-4' | 'Etc/GMT-5' | 'Etc/GMT-6' | 'Etc/GMT-7' | 'Etc/GMT-8' | 'Etc/GMT-9' | 'Etc/GMT+1' | 'Etc/GMT+10' | 'Etc/GMT+11' | 'Etc/GMT+12' | 'Etc/GMT+2' | 'Etc/GMT+3' | 'Etc/GMT+4' | 'Etc/GMT+5' | 'Etc/GMT+6' | 'Etc/GMT+7' | 'Etc/GMT+8' | 'Etc/GMT+9' | 'Etc/UTC' | 'Europe/Amsterdam' | 'Europe/Andorra' | 'Europe/Astrakhan' | 'Europe/Athens' | 'Europe/Belgrade' | 'Europe/Berlin' | 'Europe/Brussels' | 'Europe/Bucharest' | 'Europe/Budapest' | 'Europe/Chisinau' | 'Europe/Copenhagen' | 'Europe/Dublin' | 'Europe/Gibraltar' | 'Europe/Helsinki' | 'Europe/Istanbul' | 'Europe/Kaliningrad' | 'Europe/Kiev' | 'Europe/Kirov' | 'Europe/Lisbon' | 'Europe/London' | 'Europe/Luxembourg' | 'Europe/Madrid' | 'Europe/Malta' | 'Europe/Minsk' | 'Europe/Monaco' | 'Europe/Moscow' | 'Europe/Oslo' | 'Europe/Paris' | 'Europe/Prague' | 'Europe/Riga' | 'Europe/Rome' | 'Europe/Samara' | 'Europe/Saratov' | 'Europe/Simferopol' | 'Europe/Sofia' | 'Europe/Stockholm' | 'Europe/Tallinn' | 'Europe/Tirane' | 'Europe/Ulyanovsk' | 'Europe/Uzhgorod' | 'Europe/Vienna' | 'Europe/Vilnius' | 'Europe/Volgograd' | 'Europe/Warsaw' | 'Europe/Zaporozhye' | 'Europe/Zurich' | 'HST' | 'Indian/Chagos' | 'Indian/Christmas' | 'Indian/Cocos' | 'Indian/Kerguelen' | 'Indian/Mahe' | 'Indian/Maldives' | 'Indian/Mauritius' | 'Indian/Reunion' | 'MET' | 'MST' | 'MST7MDT' | 'Pacific/Apia' | 'Pacific/Auckland' | 'Pacific/Bougainville' | 'Pacific/Chatham' | 'Pacific/Chuuk' | 'Pacific/Easter' | 'Pacific/Efate' | 'Pacific/Fakaofo' | 'Pacific/Fiji' | 'Pacific/Funafuti' | 'Pacific/Galapagos' | 'Pacific/Gambier' | 'Pacific/Guadalcanal' | 'Pacific/Guam' | 'Pacific/Honolulu' | 'Pacific/Kanton' | 'Pacific/Kiritimati' | 'Pacific/Kosrae' | 'Pacific/Kwajalein' | 'Pacific/Majuro' | 'Pacific/Marquesas' | 'Pacific/Nauru' | 'Pacific/Niue' | 'Pacific/Norfolk' | 'Pacific/Noumea' | 'Pacific/Pago_Pago' | 'Pacific/Palau' | 'Pacific/Pitcairn' | 'Pacific/Pohnpei' | 'Pacific/Port_Moresby' | 'Pacific/Rarotonga' | 'Pacific/Tahiti' | 'Pacific/Tarawa' | 'Pacific/Tongatapu' | 'Pacific/Wake' | 'Pacific/Wallis' | 'PST8PDT' | 'WET'

Language

isoCode
The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
```
string
```

export interface Language {
  /**
   * The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
   *
   * @example 'en' for English, or 'en-US' for English local to United States.
   * @see https://en.wikipedia.org/wiki/IETF_language_tag
   * @see https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
   */
  isoCode: string;
}

Country

isoCode
The ISO-3166-1 code for this country.
```
CountryCode
```

export interface Country {
  /**
   * The ISO-3166-1 code for this country.
   * @see https://www.iso.org/iso-3166-country-codes.html
   */
  isoCode: CountryCode;
}

Market

id
A globally-unique identifier for a market.
```
string
```
handle
The human-readable, shop-scoped identifier for the market.
```
string
```

export interface Market {
  /**
   * A globally-unique identifier for a market.
   */
  id: string;

  /**
   * The human-readable, shop-scoped identifier for the market.
   */
  handle: string;
}

StorefrontApiVersion

Union of supported storefront API versions

'2022-04' | '2022-07' | '2022-10' | '2023-01' | '2023-04' | '2023-07' | 'unstable'

SelectedPaymentOption

A payment option selected by the buyer.

handle
The unique handle referencing `PaymentOption.handle`. See [availablePaymentOptions](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-availablepaymentoptions).
```
string
```

export interface SelectedPaymentOption {
  /**
   * The unique handle referencing `PaymentOption.handle`.
   *
   * See [availablePaymentOptions](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-availablepaymentoptions).
   */
  handle: string;
}

SessionToken

get
Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself.
```
() => Promise<string>
```

export interface SessionToken {
  /**
   * Requests a session token that hasn't expired. You should call this method every
   * time you need to make a request to your backend in order to get a valid token.
   * This method will return cached tokens when possible, so you don’t need to worry
   * about storing these tokens yourself.
   */
  get(): Promise<string>;
}

ExtensionSettings

The merchant-defined setting values for the extension.

[key: string]
```
string | number | boolean | undefined
```

export interface ExtensionSettings {
  [key: string]: string | number | boolean | undefined;
}

Shop

id
The shop ID.
```
string
```
name
The name of the shop.
```
string
```
storefrontUrl
The primary storefront URL.
```
string
```
myshopifyDomain
The shop's myshopify.com domain.
```
string
```

export interface Shop {
  /**
   * The shop ID.
   * @example 'gid://shopify/Shop/123'
   */
  id: string;
  /**
   * The name of the shop.
   */
  name: string;
  /**
   * The primary storefront URL.
   */
  storefrontUrl?: string;
  /**
   * The shop's myshopify.com domain.
   */
  myshopifyDomain: string;
}

Storage

A key-value storage object for extension targets. Stored data is only available to this specific app at this specific extension target. The storage backend is implemented with `localStorage` and should persist across the buyer's checkout session. However, data persistence isn't guaranteed.

read
Read and return a stored value by key. The stored data is deserialized from JSON and returned as its original primitive. Returns `null` if no stored data exists.
```
<T = unknown>(key: string) => Promise<T>
```
write
Write stored data for this key. The data must be serializable to JSON.
```
(key: string, data: any) => Promise<void>
```
delete
Delete stored data by key.
```
(key: string) => Promise<void>
```

export interface Storage {
  /**
   * Read and return a stored value by key.
   *
   * The stored data is deserialized from JSON and returned as
   * its original primitive.
   *
   * Returns `null` if no stored data exists.
   */
  read<T = unknown>(key: string): Promise<T | null>;

  /**
   * Write stored data for this key.
   *
   * The data must be serializable to JSON.
   */
  write(key: string, data: any): Promise<void>;

  /**
   * Delete stored data by key.
   */
  delete(key: string): Promise<void>;
}

Ui

overlay
```
{ close(overlayId: string): void; }
```

export interface Ui {
  overlay: {
    close(overlayId: string): void;
  };
}

Version

string

AnyComponent

AnyComponent

OrderStatusApi

order
Order information that's available post-checkout.
```
StatefulRemoteSubscribable<Order | undefined>
```

export interface OrderStatusApi {
  /**
   * Order information that's available post-checkout.
   */
  order: StatefulRemoteSubscribable<Order | undefined>;
}

Order

Information about an order that was placed.

id
A globally-unique identifier.
```
string
```
name
Unique identifier for the order that appears on the order.
```
string
```
cancelledAt
If cancelled, the time at which the order was cancelled.
```
string
```

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

target
The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable<PresentmentCartLine>`.
```
StatefulRemoteSubscribable<CartLine>
```

export interface CartLineItemApi {
  /**
   * The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable<PresentmentCartLine>`.
   */
  target: StatefulRemoteSubscribable<CartLine>;
}

CustomerAccountStandardApi

The part of the standard API implemented for customer-account targets. Must match the types defined in the `surfaces/customer-account` section of this package.

Pick<
    StandardApi<Target>,
    | 'analytics'
    | 'appliedGiftCards'
    | 'appMetafields'
    | 'attributes'
    | 'buyerIdentity'
    | 'checkoutSettings'
    | 'cost'
    | 'discountCodes'
    | 'discountAllocations'
    | 'extension'
    | 'extensionPoint'
    | 'i18n'
    | 'lines'
    | 'localization'
    | 'metafields'
    | 'note'
    | 'query'
    | 'sessionToken'
    | 'settings'
    | 'shippingAddress'
    | 'shop'
    | 'storage'
    | 'ui'
    | 'version'
  >

RedeemableApi

applyRedeemableChange
Applies a redeemable change to add a redeemable payment method.
```
(change: RedeemableAddChange) => Promise<RedeemableChangeResult>
```

export interface RedeemableApi {
  /**
   * Applies a redeemable change to add a redeemable payment method.
   */
  applyRedeemableChange(
    change: RedeemableChange,
  ): Promise<RedeemableChangeResult>;
}

RedeemableAddChange

type
The type of the `RedeemableChange` API.
```
"redeemableAddChange"
```
attributes
The redeemable attributes
```
RedeemableAttribute[]
```

export interface RedeemableAddChange {
  /**
   * The type of the `RedeemableChange` API.
   */
  type: 'redeemableAddChange';

  /**
   * The redeemable attributes
   */
  attributes: RedeemableAttribute[];
}

RedeemableAttribute

A key-value pair that represents an attribute of a redeemable payment method.

key
```
string
```
value
```
string
```

export interface RedeemableAttribute {
  key: string;
  value: string;
}

RedeemableChangeResult

RedeemableChangeResultSuccess | RedeemableChangeResultError

RedeemableChangeResultSuccess

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

export interface RedeemableChangeResultSuccess {
  /**
   * Indicates that the redeemable change was applied successfully.
   */
  type: 'success';
}

RedeemableChangeResultError

type
Indicates that the redeemable change was not applied successfully.
```
"error"
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface RedeemableChangeResultError {
  /**
   * Indicates that the redeemable change was not applied successfully.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

PaymentOptionItemApi

applyPaymentMethodAttributesChange

Sets the attributes of the related payment method.

(change: PaymentMethodAttributesUpdateChange) => Promise<PaymentMethodAttributesResult>

export interface PaymentOptionItemApi {
  /**
   * Sets the attributes of the related payment method.
   */
  applyPaymentMethodAttributesChange(
    change: PaymentMethodAttributesChange,
  ): Promise<PaymentMethodAttributesResult>;
}

PaymentMethodAttributesUpdateChange

type
The type of the `PaymentMethodAttributesChange` API.
```
"updatePaymentMethodAttributes"
```
attributes
The payment method attributes
```
PaymentMethodAttribute[]
```

export interface PaymentMethodAttributesUpdateChange {
  /**
   * The type of the `PaymentMethodAttributesChange` API.
   */
  type: 'updatePaymentMethodAttributes';

  /**
   * The payment method attributes
   */
  attributes: PaymentMethodAttribute[];
}

PaymentMethodAttribute

A key-value pair that represents an attribute of a payment method.

key
```
string
```
value
```
string | number | boolean
```

export interface PaymentMethodAttribute {
  key: string;
  value: string | number | boolean;
}

PaymentMethodAttributesResult

PaymentMethodAttributesResultSuccess | PaymentMethodAttributesResultError

PaymentMethodAttributesResultSuccess

type
Indicates that the payment method attributes were set successfully.
```
"success"
```

export interface PaymentMethodAttributesResultSuccess {
  /**
   * Indicates that the payment method attributes were set successfully.
   */
  type: 'success';
}

PaymentMethodAttributesResultError

type
Indicates that the payment method attributes were not set successfully.
```
"error"
```
message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```

export interface PaymentMethodAttributesResultError {
  /**
   * Indicates that the payment method attributes were not set successfully.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It is **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}

PickupLocationListApi

isLocationFormVisible
Whether the customer location input form is shown to the buyer.
```
StatefulRemoteSubscribable<boolean>
```

export interface PickupLocationListApi {
  /**
   * Whether the customer location input form is shown to the buyer.
   */
  isLocationFormVisible: StatefulRemoteSubscribable<boolean>;
}

ShippingOptionItemApi

target
The shipping option the extension is attached to.
```
StatefulRemoteSubscribable<ShippingOption>
```
isTargetSelected
Whether the shipping option the extension is attached to is currently selected in the UI.
```
StatefulRemoteSubscribable<boolean>
```

export interface ShippingOptionItemApi {
  /**
   * The shipping option the extension is attached to.
   */
  target: StatefulRemoteSubscribable<ShippingOption>;

  /**
   * Whether the shipping option the extension is attached to is currently selected in the UI.
   */
  isTargetSelected: StatefulRemoteSubscribable<boolean>;
}

ShippingOption

Represents a delivery option that is a shipping option.

type
The type of this delivery option.
```
"shipping" | "local"
```
carrier
Information about the carrier.
```
ShippingOptionCarrier
```
cost
The cost of the delivery.
```
Money
```
costAfterDiscounts
The cost of the delivery including discounts.
```
Money
```
deliveryEstimate
Information about the estimated delivery time.
```
DeliveryEstimate
```
handle
The unique identifier of the delivery option.
```
string
```
title
The title of the delivery option.
```
string
```
description
The description of the delivery option.
```
string
```

export interface ShippingOption extends DeliveryOption {
  /**
   * The type of this delivery option.
   */
  type: 'shipping' | 'local';

  /**
   * Information about the carrier.
   */
  carrier: ShippingOptionCarrier;

  /**
   * The cost of the delivery.
   */
  cost: Money;

  /**
   * The cost of the delivery including discounts.
   */
  costAfterDiscounts: Money;

  /**
   * Information about the estimated delivery time.
   */
  deliveryEstimate: DeliveryEstimate;
}

ShippingOptionCarrier

name
The name of the carrier.
```
string
```

export interface ShippingOptionCarrier {
  /**
   * The name of the carrier.
   */
  name?: string;
}

DeliveryEstimate

timeInTransit
The estimated time in transit for the delivery in seconds.
```
NumberRange
```

export interface DeliveryEstimate {
  /**
   * The estimated time in transit for the delivery in seconds.
   */
  timeInTransit?: NumberRange;
}

NumberRange

lower
The lower bound of the number range.
```
number
```
upper
The upper bound of the number range.
```
number
```

export interface NumberRange {
  /**
   * The lower bound of the number range.
   */
  lower?: number;

  /**
   * The upper bound of the number range.
   */
  upper?: number;
}

PickupPointListApi

isLocationFormVisible
Whether the customer location input form is shown to the buyer.
```
StatefulRemoteSubscribable<boolean>
```

export interface PickupPointListApi {
  /**
   * Whether the customer location input form is shown to the buyer.
   */
  isLocationFormVisible: StatefulRemoteSubscribable<boolean>;
}

Was this section helpful?

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.

</Banner>

);

}

// You can export a single extension target per file

// ./Actions.jsx

export default reactExtension(

'purchase.checkout.actions.render-before',

() => <Extension />,

);

// ./Delivery.jsx

export default reactExtension(

'purchase.checkout.delivery-address.render-before',

() => <Extension />,

);

// ./ShippingOptions.jsx

export default reactExtension(

'purchase.checkout.shipping-option-list.render-after',

() => <Extension />,

);

// ./Block.jsx

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

examples

React

import {
  reactExtension,
  Banner,
  useApi,
} from '@shopify/ui-extensions-react/checkout';

function Extension() {
  const {extension} = useApi();
  const {target} = extension;

  return (
    <Banner>
      This extension is rendering in the {target}
      extension target.
    </Banner>
  );
}

// You can export a single extension target per file

// ./Actions.jsx
export default reactExtension(
  'purchase.checkout.actions.render-before',
  () => <Extension />,
);

// ./Delivery.jsx
export default reactExtension(
  'purchase.checkout.delivery-address.render-before',
  () => <Extension />,
);

// ./ShippingOptions.jsx
export default reactExtension(
  'purchase.checkout.shipping-option-list.render-after',
  () => <Extension />,
);

// ./Block.jsx
export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

JavaScript

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,
);

shopify.extension.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"

Anchor to relatedRelated

APIsPickupPointListApi

APIsPickupLocationListApi

APIsShippingOptionItemApi