Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Delivery API

The APIs for interacting with delivery and shipping options.

Tip

Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available.

Anchor to StandardApiStandardApi

The base API object provided to purchase extension targets.

Anchor to deliveryGroups deliveryGroups StatefulRemoteSubscribable<[]> required: A list of delivery groups containing information about the delivery of the items the customer intends to purchase.

DeliveryGroup

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

deliveryOptions
The delivery options available for the delivery group.
```
DeliveryOption[]
```
groupType
The type of the delivery group.
```
DeliveryGroupType
```
id
The unique identifier of the delivery group. On the Thank You page this value is undefined.
```
string
```
isDeliveryRequired
Whether delivery is required for the delivery group.
```
boolean
```
selectedDeliveryOption
The selected delivery option for the delivery group.
```
DeliveryOptionReference
```
targetedCartLines
The cart line references associated to the delivery group.
```
CartLineReference[]
```

DeliveryOption

ShippingOption | PickupPointOption | PickupLocationOption

ShippingOption

Represents a delivery option that is a shipping option.

carrier
Information about the carrier.
```
ShippingOptionCarrier
```
code
The code of the delivery option.
```
string
```
cost
The cost of the delivery.
```
Money
```
costAfterDiscounts
The cost of the delivery including discounts.
```
Money
```
deliveryEstimate
Information about the estimated delivery time.
```
DeliveryEstimate
```
description
The description of the delivery option.
```
string
```
handle
The unique identifier of the delivery option.
```
string
```
metafields
The metafields associated with this delivery option.
```
Metafield[]
```
title
The title of the delivery option.
```
string
```
type
The type of this delivery option.
```
'shipping' | 'local'
```

ShippingOptionCarrier

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

Money

amount
The price amount.
```
number
```
currencyCode
The ISO 4217 format for the currency.
```
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'

DeliveryEstimate

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

NumberRange

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

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.
```
'integer' | 'string' | 'json_string'
```

PickupPointOption

carrier
Information about the carrier that ships to the pickup point.
```
PickupPointCarrier
```
code
The code of the delivery option.
```
string
```
cost
The cost to ship to this pickup point.
```
Money
```
costAfterDiscounts
The cost to ship to this pickup point including discounts.
```
Money
```
description
The description of the delivery option.
```
string
```
handle
The unique identifier of the delivery option.
```
string
```
location
The location details of the pickup point.
```
PickupPointLocation
```
metafields
The metafields associated with this delivery option.
```
Metafield[]
```
title
The title of the delivery option.
```
string
```
type
The type of this delivery option.
```
'pickupPoint'
```

PickupPointCarrier

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

PickupPointLocation

address
The address of the pickup point.
```
MailingAddress
```
handle
The unique identifier of the pickup point.
```
string
```
name
The name of the pickup point.
```
string
```

MailingAddress

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
```
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
```
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
```
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
```
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
```
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
```
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
```
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

'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'

PickupLocationOption

code
The code of the delivery option.
```
string
```
description
The description of the delivery option.
```
string
```
handle
The unique identifier of the delivery option.
```
string
```
location
The location details of the pickup location.
```
PickupLocation
```
metafields
The metafields associated with this delivery option.
```
Metafield[]
```
title
The title of the delivery option.
```
string
```
type
The type of this delivery option.
```
'pickup'
```

PickupLocation

address
The address of the pickup location.
```
MailingAddress
```
name
The name of the pickup location.
```
string
```

DeliveryGroupType

The possible types of a delivery group.

'oneTimePurchase' | 'subscription'

DeliveryOptionReference

Represents a reference to a delivery option.

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

CartLineReference

Represents a reference to a cart line.

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

Anchor to useDeliveryGroup
useDeliveryGroup(
deliveryGroup
)

Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes.

Anchor to useDeliveryGroup-parametersParameters

Anchor to deliveryGroup deliveryGroup required

Anchor to useDeliveryGroup-returnsReturns

| undefined

DeliveryGroupDetails

Represents a DeliveryGroup with expanded reference fields and full details.

deliveryOptions
The delivery options available for the delivery group.
```
DeliveryOption[]
```
groupType
The type of the delivery group.
```
DeliveryGroupType
```
id
The unique identifier of the delivery group. On the Thank You page this value is undefined.
```
string
```
isDeliveryRequired
Whether delivery is required for the delivery group.
```
boolean
```
selectedDeliveryOption
The selected delivery option for the delivery group.
```
DeliveryOption
```
targetedCartLines
The cart lines associated to the delivery group.
```
CartLine[]
```

CartLine

attributes
The line item additional custom attributes.
```
Attribute[]
```
cost
The details about the cost components attributed to the cart line.
```
CartLineCost
```
discountAllocations
Discounts applied to the cart line.
```
CartDiscountAllocation[]
```
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
```
lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
```
CartBundleLineComponent[]
```
merchandise
The merchandise being purchased.
```
Merchandise
```
quantity
The quantity of the merchandise being purchased.
```
number
```

Attribute

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

CartLineCost

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

CartDiscountAllocation

CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation

CartCodeDiscountAllocation

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

CartAutomaticDiscountAllocation

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

CartCustomDiscountAllocation

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

CartBundleLineComponent

attributes
Additional custom attributes for the bundle line component.
```
Attribute[]
```
cost
The cost attributed to this bundle line component.
```
CartLineCost
```
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
```
type
```
'bundle'
```

Merchandise

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

ImageDetails

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

Product

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

SelectedOption

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

SellingPlan

id
A globally-unique identifier.
```
string
```
recurringDeliveries
Whether purchasing the selling plan will result in multiple deliveries.
```
boolean
```

Anchor to useDeliveryGroups
useDeliveryGroups()

Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes.

Anchor to useDeliveryGroups-returnsReturns

[]

Anchor to Shipping OptionShipping Option

This API object is provided to extensions registered for the purchase.checkout.shipping-option-item.render-after and purchase.checkout.shipping-option-item.details.render extension targets.

Anchor to isTargetSelected isTargetSelected StatefulRemoteSubscribable<boolean> required: Whether the shipping option the extension is attached to is currently selected in the UI.
Anchor to renderMode renderMode required: The render mode of the shipping option.
Anchor to target target StatefulRemoteSubscribable<> required: The shipping option the extension is attached to.

Anchor to useShippingOptionTarget
useShippingOptionTarget()

Returns the shipping option the extension is attached to. This hook can only be used by extensions in the following extension targets:

purchase.checkout.shipping-option-item.render-after
purchase.checkout.shipping-option-item.details.render

Anchor to useShippingOptionTarget-returnsReturns

{ shippingOptionTarget: ; isTargetSelected: boolean; renderMode: ; }

Anchor to ShippingOptionListApiShippingOptionListApi

This API object is provided to extensions registered for the purchase.checkout.shipping-option-list.render-before and purchase.checkout.shipping-option-list.render-after extension targets.

Anchor to deliverySelectionGroups deliverySelectionGroups StatefulRemoteSubscribable< [] | undefined > required: The list of selection groups available to the buyers. The property will be undefined when no such groups are available.
Anchor to target target StatefulRemoteSubscribable< | undefined> required: The delivery group list the extension is attached to. The target will be undefined when there are no groups for a given type.

DeliverySelectionGroup

A selection group for delivery options.

associatedDeliveryOptions
The associated delivery option handles with the selection group. The handles will match the delivery group's delivery option handles.
```
DeliveryOptionReference[]
```
cost
The sum of each delivery option's cost.
```
Money
```
costAfterDiscounts
The sum of each delivery option's cost after discounts.
```
Money
```
handle
The handle of the selection group.
```
string
```
selected
If the selection group is selected.
```
boolean
```
title
The localized title of the selection group.
```
string
```

DeliveryGroupList

The delivery group list the extension is associated to.

deliveryGroups
The delivery groups that compose this list.
```
DeliveryGroup[]
```
groupType
The group type of the delivery group list.
```
DeliveryGroupType
```

Anchor to useDeliveryGroupTarget
useDeliveryGroupTarget()

Returns the delivery group the extension is attached to. This hook can only be used by extensions in the following extension targets:

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

Caution

Deprecated as of version 2024-07, use useDeliveryGroupListTarget() instead.

Anchor to useDeliveryGroupTarget-returnsReturns

| undefined

Anchor to useDeliveryGroupListTarget
useDeliveryGroupListTarget()

Returns the delivery group list the extension is attached to. This hook can only be used by extensions in the following extension targets:

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

Anchor to useDeliveryGroupListTarget-returnsReturns

| undefined

Anchor to useDeliverySelectionGroups
useDeliverySelectionGroups()

Returns the list of delivery selection groups available to the buyers. This hook can only be used by extensions in the following extension targets:

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

Anchor to useDeliverySelectionGroups-returnsReturns

| [] | undefined

Anchor to PickupPointListApiPickupPointListApi

This API object is provided to extensions registered for the purchase.checkout.pickup-point-list.render-before and purchase.checkout.pickup-point-list.render-after extension targets.

Anchor to isLocationFormVisible isLocationFormVisible StatefulRemoteSubscribable<boolean> required: Reflects which view was active when the extension loaded. When the buyer moves to the next view, the extension restarts with the current value rather than updating in place.

Anchor to PickupLocationListApiPickupLocationListApi

This API object is provided to extensions registered for the purchase.checkout.pickup-location-list.render-before and purchase.checkout.pickup-location-list.render-after extension targets.

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

Anchor to PickupLocationItemApiPickupLocationItemApi

The API object provided to the purchase.checkout.pickup-location-option-item.render-after extension target.

Anchor to isTargetSelected isTargetSelected StatefulRemoteSubscribable<boolean> required: Whether the pickup location is currently selected.
Anchor to target target StatefulRemoteSubscribable<> required: The pickup location the extension is attached to.

Anchor to usePickupLocationOptionTarget
usePickupLocationOptionTarget()

Returns the pickup location option the extension is attached to. This hook can only be used by extensions in the following extension target:

purchase.checkout.pickup-location-option-item.render-after

Anchor to usePickupLocationOptionTarget-returnsReturns

{ pickupLocationOptionTarget: ; isTargetSelected: boolean; }

Examples

React

import {

reactExtension,

Banner,

useDeliveryGroups,

useDeliveryGroup,

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

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

const deliveryGroups = useDeliveryGroups();

const firstDeliveryGroup = useDeliveryGroup(

deliveryGroups[0],

);

if (!firstDeliveryGroup) {

return null;

}

const selectedDeliveryOption =

firstDeliveryGroup?.selectedDeliveryOption;

return (

Selected delivery option:{' '}

{selectedDeliveryOption?.title}

</Banner>

);

}

Examples

React

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

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

function Extension() {
  const deliveryGroups = useDeliveryGroups();
  const firstDeliveryGroup = useDeliveryGroup(
    deliveryGroups[0],
  );

  if (!firstDeliveryGroup) {
    return null;
  }

  const selectedDeliveryOption =
    firstDeliveryGroup?.selectedDeliveryOption;

  return (
    <Banner>
      Selected delivery option:{' '}
      {selectedDeliveryOption?.title}
    </Banner>
  );
}

Reading the selected shipping option

React

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

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

function Extension() {
  const {shippingOptionTarget, isTargetSelected} =
    useShippingOptionTarget();
  const title = shippingOptionTarget.title;

  return (
    <Text>
      Shipping method: {title} is{' '}
      {isTargetSelected ? '' : 'not'} selected.
    </Text>
  );
}

JavaScript

import {extension} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.shipping-option-item.render-after',
  (root, {target, isTargetSelected}) => {
    const titleText = root.createText(
      `Shipping method title: ${target.current.title}`,
    );
    root.appendChild(titleText);

    target.subscribe((updatedTarget) => {
      titleText.updateText(
        `Shipping method title: ${updatedTarget.title}`,
      );
    });

    const selectedText = root.createText(
      getSelectedText(isTargetSelected),
    );
    root.appendChild(selectedText);

    isTargetSelected.subscribe(
      (updatedSelected) => {
        selectedText.updateText(
          getSelectedText(updatedSelected),
        );
      },
    );

    function getSelectedText(selected) {
      return selected
        ? 'Selected'
        : 'Not selected';
    }
  },
);

Reading the selected pickup location option

React

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

export default reactExtension(
  'purchase.checkout.pickup-location-option-item.render-after',
  () => <Extension />,
);

function Extension() {
  const {
    isTargetSelected,
    pickupLocationOptionTarget,
  } = usePickupLocationOptionTarget();

  const title = pickupLocationOptionTarget?.title;

  if (isTargetSelected) {
    return <Text>{title}</Text>;
  }

  return null;
}

JavaScript

import {extension} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.pickup-location-option-item.render-after',
  (root, {isTargetSelected, target}) => {
    const titleText = root.createText(
      target.current.title,
    );
    root.appendChild(titleText);

    target.subscribe((updatedTarget) => {
      titleText.updateText(
        updatedTarget.title || '',
      );
    });

    const selectedText = root.createText(
      getSelectedText(isTargetSelected),
    );
    root.appendChild(selectedText);

    isTargetSelected.subscribe(
      (updatedSelected) => {
        selectedText.updateText(
          getSelectedText(updatedSelected),
        );
      },
    );

    function getSelectedText(selected) {
      return selected
        ? 'Selected'
        : 'Not selected';
    }
  },
);

Determine if the location input form is shown

React

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

export default reactExtension(
  'purchase.checkout.pickup-point-list.render-before',
  () => <Extension />,
);

function Extension() {
  const {isLocationFormVisible} =
    useApi<'purchase.checkout.pickup-point-list.render-before'>();

  const locationFormShown = useSubscription(
    isLocationFormVisible,
  );

  if (locationFormShown) {
    return (
      <Text>
        The customer is being asked to provide
        their location.
      </Text>
    );
  } else {
    return (
      <Text>Pickup points are being shown.</Text>
    );
  }
}

JavaScript

import {extension} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.pickup-point-list.render-before',
  (root, {isLocationFormVisible}) => {
    const content = root.createText(
      getTextContent(
        isLocationFormVisible.current,
      ),
    );
    root.appendChild(content);

    isLocationFormVisible.subscribe(
      (updatedLocationFormVisible) => {
        content.updateText(
          getTextContent(
            updatedLocationFormVisible,
          ),
        );
      },
    );

    function getTextContent(
      isLocationFormVisible,
    ) {
      if (isLocationFormVisible) {
        return 'The customer is being asked to provide their location.';
      } else {
        return 'Pickup points are being shown.';
      }
    }
  },
);

React

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

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

function Extension() {
  const deliveryGroups = useDeliveryGroups();
  const deliveryOptions =
    deliveryGroups[0].deliveryOptions;

  return (
    <Banner>
      First delivery option:{' '}
      {deliveryOptions[0].title}
    </Banner>
  );
}