# Delivery


  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.
  

```jsx
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>
  );
}

```

## StandardApi

The base API object provided to `purchase` extension targets.

### Docs_Standard_DeliveryApi

### deliveryGroups

value: `StatefulRemoteSubscribable<DeliveryGroup[]>`

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

value: `DeliveryOption[]`

The delivery options available for the delivery group.

### groupType

value: `DeliveryGroupType`

The type of the delivery group.

### id

value: `string`

The unique identifier of the delivery group. On the Thank You page this value is undefined.

### isDeliveryRequired

value: `boolean`

Whether delivery is required for the delivery group.

### selectedDeliveryOption

value: `DeliveryOptionReference`

The selected delivery option for the delivery group.

### targetedCartLines

value: `CartLineReference[]`

The cart line references associated to the delivery group.

### ShippingOption

Represents a delivery option that is a shipping option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `'shipping' | 'local'`

The type of this delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

### PickupPointOption

### carrier

value: `PickupPointCarrier`

Information about the carrier that ships to the pickup point.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost to ship to this pickup point.

### costAfterDiscounts

value: `Money`

The cost to ship to this pickup point including discounts.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupPointLocation`

The location details of the pickup point.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickupPoint"`

The type of this delivery option.

### PickupPointCarrier

### code

value: `string`

The code identifying the carrier.

### name

value: `string`

The name of the carrier.

### PickupPointLocation

### address

value: `MailingAddress`

The address of the pickup point.

### handle

value: `string`

The unique identifier of the pickup point.

### name

value: `string`

The name of the pickup point.

### MailingAddress

### address1

value: `string`

The first line of the buyer's address, including street name and number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### address2

value: `string`

The second line of the buyer's address, like apartment number, suite, etc.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### city

value: `string`

The buyer's city.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### company

value: `string`

The buyer's company name.

{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### countryCode

value: `CountryCode`

The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### firstName

value: `string`

The buyer's first name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### lastName

value: `string`

The buyer's last name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### name

value: `string`

The buyer's full name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### phone

value: `string`

The buyer's phone number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### provinceCode

value: `string`

The buyer's province code, such as state, province, prefecture, or region.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### zip

value: `string`

The buyer's postal or ZIP code.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### Metafield

Metadata associated with the checkout.

### key

value: `string`

The name of the metafield. It must be between 3 and 30 characters in length (inclusive).

### namespace

value: `string`

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

### value

value: `string | number`

The information to be stored as metadata.

### valueType

value: `'integer' | 'string' | 'json_string'`

The metafield’s information type.

### PickupLocationOption

### code

value: `string`

The code of the delivery option.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupLocation`

The location details of the pickup location.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickup"`

The type of this delivery option.

### PickupLocation

### address

value: `MailingAddress`

The address of the pickup location.

### name

value: `string`

The name of the pickup location.

### DeliveryOptionReference

Represents a reference to a delivery option.

### handle

value: `string`

The unique identifier of the referenced delivery option.

### CartLineReference

Represents a reference to a cart line.

### id

value: `string`

The unique identifier of the referenced cart line.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## useDeliveryGroup

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

### UseDeliveryGroupGeneratedType

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

#### Returns: DeliveryGroupDetails | undefined

#### Params:

- deliveryGroup: DeliveryGroup
export function useDeliveryGroup<
  ID extends RenderExtensionTarget = RenderExtensionTarget,
>(deliveryGroup: DeliveryGroup | undefined): DeliveryGroupDetails | undefined {
  const {lines} = useApi<ID>();
  const cartLines = useSubscription(lines);

  return useMemo(() => {
    if (!deliveryGroup) {
      return undefined;
    }

    const deliveryGroupDetails = {
      ...deliveryGroup,
      selectedDeliveryOption: getSelectedDeliveryOption(deliveryGroup),
      targetedCartLines: getTargetedCartLines(deliveryGroup, cartLines),
    };

    return deliveryGroupDetails;
  }, [deliveryGroup, cartLines]);
}


### DeliveryGroup

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

### deliveryOptions

value: `DeliveryOption[]`

The delivery options available for the delivery group.

### groupType

value: `DeliveryGroupType`

The type of the delivery group.

### id

value: `string`

The unique identifier of the delivery group. On the Thank You page this value is undefined.

### isDeliveryRequired

value: `boolean`

Whether delivery is required for the delivery group.

### selectedDeliveryOption

value: `DeliveryOptionReference`

The selected delivery option for the delivery group.

### targetedCartLines

value: `CartLineReference[]`

The cart line references associated to the delivery group.

### ShippingOption

Represents a delivery option that is a shipping option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `'shipping' | 'local'`

The type of this delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

### PickupPointOption

### carrier

value: `PickupPointCarrier`

Information about the carrier that ships to the pickup point.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost to ship to this pickup point.

### costAfterDiscounts

value: `Money`

The cost to ship to this pickup point including discounts.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupPointLocation`

The location details of the pickup point.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickupPoint"`

The type of this delivery option.

### PickupPointCarrier

### code

value: `string`

The code identifying the carrier.

### name

value: `string`

The name of the carrier.

### PickupPointLocation

### address

value: `MailingAddress`

The address of the pickup point.

### handle

value: `string`

The unique identifier of the pickup point.

### name

value: `string`

The name of the pickup point.

### MailingAddress

### address1

value: `string`

The first line of the buyer's address, including street name and number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### address2

value: `string`

The second line of the buyer's address, like apartment number, suite, etc.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### city

value: `string`

The buyer's city.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### company

value: `string`

The buyer's company name.

{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### countryCode

value: `CountryCode`

The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### firstName

value: `string`

The buyer's first name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### lastName

value: `string`

The buyer's last name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### name

value: `string`

The buyer's full name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### phone

value: `string`

The buyer's phone number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### provinceCode

value: `string`

The buyer's province code, such as state, province, prefecture, or region.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### zip

value: `string`

The buyer's postal or ZIP code.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### Metafield

Metadata associated with the checkout.

### key

value: `string`

The name of the metafield. It must be between 3 and 30 characters in length (inclusive).

### namespace

value: `string`

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

### value

value: `string | number`

The information to be stored as metadata.

### valueType

value: `'integer' | 'string' | 'json_string'`

The metafield’s information type.

### PickupLocationOption

### code

value: `string`

The code of the delivery option.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupLocation`

The location details of the pickup location.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickup"`

The type of this delivery option.

### PickupLocation

### address

value: `MailingAddress`

The address of the pickup location.

### name

value: `string`

The name of the pickup location.

### DeliveryOptionReference

Represents a reference to a delivery option.

### handle

value: `string`

The unique identifier of the referenced delivery option.

### CartLineReference

Represents a reference to a cart line.

### id

value: `string`

The unique identifier of the referenced cart line.

### DeliveryGroupDetails

Represents a DeliveryGroup with expanded reference fields and full details.

### deliveryOptions

value: `DeliveryOption[]`

The delivery options available for the delivery group.

### groupType

value: `DeliveryGroupType`

The type of the delivery group.

### id

value: `string`

The unique identifier of the delivery group. On the Thank You page this value is undefined.

### isDeliveryRequired

value: `boolean`

Whether delivery is required for the delivery group.

### selectedDeliveryOption

value: `DeliveryOption`

The selected delivery option for the delivery group.

### targetedCartLines

value: `CartLine[]`

The cart lines associated to the delivery group.

### CartLine

### attributes

value: `Attribute[]`

The line item additional custom attributes.

### cost

value: `CartLineCost`

The details about the cost components attributed to the cart line.

### discountAllocations

value: `CartDiscountAllocation[]`

Discounts applied to the cart line.

### id

value: `string`

These line item IDs are not stable at the moment, they might change after any operations on the line items. You should always look up for an updated ID before any call to `applyCartLinesChange` because you'll need the ID to create a `CartLineChange` object.

### lineComponents

value: `CartBundleLineComponent[]`

Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.

### merchandise

value: `Merchandise`

The merchandise being purchased.

### quantity

value: `number`

The quantity of the merchandise being purchased.

### Attribute

### key

value: `string`

The key for the attribute.

### value

value: `string`

The value for the attribute.

### CartLineCost

### totalAmount

value: `Money`

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

### CartCodeDiscountAllocation

### code

value: `string`

The code for the discount

### discountedAmount

value: `Money`

The money amount that has been discounted from the order

### type

value: `"code"`

The type of the code discount

### CartAutomaticDiscountAllocation

### discountedAmount

value: `Money`

The money amount that has been discounted from the order

### title

value: `string`

The title of the automatic discount

### type

value: `"automatic"`

The type of the automatic discount

### CartCustomDiscountAllocation

### discountedAmount

value: `Money`

The money amount that has been discounted from the order

### title

value: `string`

The title of the custom discount

### type

value: `"custom"`

The type of the custom discount

### CartBundleLineComponent

### attributes

value: `Attribute[]`

Additional custom attributes for the bundle line component.

### cost

value: `CartLineCost`

The cost attributed to this bundle line component.

### id

value: `string`

A unique identifier for the bundle line component.

This ID is not stable. If an operation updates the line items in any way, all IDs could change.

### merchandise

value: `Merchandise`

The merchandise of this bundle line component.

### quantity

value: `number`

The quantity of merchandise being purchased.

### type

value: `"bundle"`


### Merchandise

### id

value: `string`

A globally-unique identifier.

### image

value: `ImageDetails`

Image associated with the product variant. This field falls back to the product image if no image is available.

### product

value: `Product`

The product object that the product variant belongs to.

### requiresShipping

value: `boolean`

Whether or not the product requires shipping.

### selectedOptions

value: `SelectedOption[]`

List of product options applied to the variant.

### sellingPlan

value: `SellingPlan`

The selling plan associated with the merchandise.

### sku

value: `string`

The product variant's sku.

### subtitle

value: `string`

The product variant's subtitle.

### title

value: `string`

The product variant’s title.

### type

value: `"variant"`


### ImageDetails

### altText

value: `string`

The alternative text for the image.

### url

value: `string`

The image URL.

### Product

### id

value: `string`

A globally-unique identifier.

### productType

value: `string`

A categorization that a product can be tagged with, commonly used for filtering and searching.

### vendor

value: `string`

The product’s vendor name.

### SelectedOption

### name

value: `string`

The name of the merchandise option.

### value

value: `string`

The value of the merchandise option.

### SellingPlan

### id

value: `string`

A globally-unique identifier.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## useDeliveryGroups

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

### UseDeliveryGroupsGeneratedType

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

#### Returns: DeliveryGroup[]
export function useDeliveryGroups<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): DeliveryGroup[] {
  const api = useApi<Target>();

  if (!('deliveryGroups' in api)) {
    throw new ExtensionHasNoMethodError('deliveryGroups', api.extension.target);
  }

  return useSubscription(api.deliveryGroups);
}


### DeliveryGroup

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

### deliveryOptions

value: `DeliveryOption[]`

The delivery options available for the delivery group.

### groupType

value: `DeliveryGroupType`

The type of the delivery group.

### id

value: `string`

The unique identifier of the delivery group. On the Thank You page this value is undefined.

### isDeliveryRequired

value: `boolean`

Whether delivery is required for the delivery group.

### selectedDeliveryOption

value: `DeliveryOptionReference`

The selected delivery option for the delivery group.

### targetedCartLines

value: `CartLineReference[]`

The cart line references associated to the delivery group.

### ShippingOption

Represents a delivery option that is a shipping option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `'shipping' | 'local'`

The type of this delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

### PickupPointOption

### carrier

value: `PickupPointCarrier`

Information about the carrier that ships to the pickup point.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost to ship to this pickup point.

### costAfterDiscounts

value: `Money`

The cost to ship to this pickup point including discounts.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupPointLocation`

The location details of the pickup point.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickupPoint"`

The type of this delivery option.

### PickupPointCarrier

### code

value: `string`

The code identifying the carrier.

### name

value: `string`

The name of the carrier.

### PickupPointLocation

### address

value: `MailingAddress`

The address of the pickup point.

### handle

value: `string`

The unique identifier of the pickup point.

### name

value: `string`

The name of the pickup point.

### MailingAddress

### address1

value: `string`

The first line of the buyer's address, including street name and number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### address2

value: `string`

The second line of the buyer's address, like apartment number, suite, etc.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### city

value: `string`

The buyer's city.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### company

value: `string`

The buyer's company name.

{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### countryCode

value: `CountryCode`

The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### firstName

value: `string`

The buyer's first name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### lastName

value: `string`

The buyer's last name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### name

value: `string`

The buyer's full name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### phone

value: `string`

The buyer's phone number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### provinceCode

value: `string`

The buyer's province code, such as state, province, prefecture, or region.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### zip

value: `string`

The buyer's postal or ZIP code.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### Metafield

Metadata associated with the checkout.

### key

value: `string`

The name of the metafield. It must be between 3 and 30 characters in length (inclusive).

### namespace

value: `string`

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

### value

value: `string | number`

The information to be stored as metadata.

### valueType

value: `'integer' | 'string' | 'json_string'`

The metafield’s information type.

### PickupLocationOption

### code

value: `string`

The code of the delivery option.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupLocation`

The location details of the pickup location.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickup"`

The type of this delivery option.

### PickupLocation

### address

value: `MailingAddress`

The address of the pickup location.

### name

value: `string`

The name of the pickup location.

### DeliveryOptionReference

Represents a reference to a delivery option.

### handle

value: `string`

The unique identifier of the referenced delivery option.

### CartLineReference

Represents a reference to a cart line.

### id

value: `string`

The unique identifier of the referenced cart line.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## Shipping 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.

### ShippingOptionItemApi

### isTargetSelected

value: `StatefulRemoteSubscribable<boolean>`

Whether the shipping option the extension is attached to is currently selected in the UI.

### renderMode

value: `ShippingOptionItemRenderMode`

The render mode of the shipping option.

### target

value: `StatefulRemoteSubscribable<ShippingOption>`

The shipping option the extension is attached to.

### ShippingOptionItemRenderMode

The render mode of a shipping option.

### overlay

value: `boolean`

Whether the shipping option is rendered in an overlay.

### ShippingOption

Represents a delivery option that is a shipping option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `'shipping' | 'local'`

The type of this delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## useShippingOptionTarget

Returns the shipping option for the `purchase.checkout.shipping-option-item.render-after` and `purchase.checkout.shipping-option-item.details.render` attached extensions.

### UseShippingOptionTargetGeneratedType

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`

#### Returns: {
  shippingOptionTarget: ShippingOption;
  isTargetSelected: boolean;
  renderMode: ShippingOptionItemRenderMode;
}
export function useShippingOptionTarget(): {
  shippingOptionTarget: ShippingOption;
  isTargetSelected: boolean;
  renderMode: ShippingOptionItemRenderMode;
} {
  const api = useApi<
    | 'purchase.checkout.shipping-option-item.render-after'
    | 'purchase.checkout.shipping-option-item.details.render'
  >();
  if (!api.target || api.isTargetSelected === undefined) {
    throw new ExtensionHasNoTargetError(
      'useShippingOptionTarget',
      api.extension.target,
    );
  }

  const shippingOptionTarget = useSubscription(api.target);
  const isTargetSelected = useSubscription(api.isTargetSelected);
  const renderMode = api.renderMode;

  const shippingOption = useMemo(() => {
    return {
      shippingOptionTarget,
      isTargetSelected,
      renderMode,
    };
  }, [shippingOptionTarget, isTargetSelected, renderMode]);

  return shippingOption;
}


### ShippingOption

Represents a delivery option that is a shipping option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `'shipping' | 'local'`

The type of this delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

### ShippingOptionItemRenderMode

The render mode of a shipping option.

### overlay

value: `boolean`

Whether the shipping option is rendered in an overlay.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## ShippingOptionListApi

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.

### ShippingOptionListApi

### deliverySelectionGroups

value: `StatefulRemoteSubscribable<
    DeliverySelectionGroup[] | undefined
  >`

The list of selection groups available to the buyers. The property will be undefined when no such groups are available.

### target

value: `StatefulRemoteSubscribable<DeliveryGroupList | undefined>`

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

value: `DeliveryOptionReference[]`

The associated delivery option handles with the selection group. The handles will match the delivery group's delivery option handles.

### cost

value: `Money`

The sum of each delivery option's cost.

### costAfterDiscounts

value: `Money`

The sum of each delivery option's cost after discounts.

### handle

value: `string`

The handle of the selection group.

### selected

value: `boolean`

If the selection group is selected.

### title

value: `string`

The localized title of the selection group.

### DeliveryOptionReference

Represents a reference to a delivery option.

### handle

value: `string`

The unique identifier of the referenced delivery option.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryGroupList

The delivery group list the extension is associated to.

### deliveryGroups

value: `DeliveryGroup[]`

The delivery groups that compose this list.

### groupType

value: `DeliveryGroupType`

The group type of the delivery group list.

### DeliveryGroup

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

### deliveryOptions

value: `DeliveryOption[]`

The delivery options available for the delivery group.

### groupType

value: `DeliveryGroupType`

The type of the delivery group.

### id

value: `string`

The unique identifier of the delivery group. On the Thank You page this value is undefined.

### isDeliveryRequired

value: `boolean`

Whether delivery is required for the delivery group.

### selectedDeliveryOption

value: `DeliveryOptionReference`

The selected delivery option for the delivery group.

### targetedCartLines

value: `CartLineReference[]`

The cart line references associated to the delivery group.

### ShippingOption

Represents a delivery option that is a shipping option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `'shipping' | 'local'`

The type of this delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

### PickupPointOption

### carrier

value: `PickupPointCarrier`

Information about the carrier that ships to the pickup point.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost to ship to this pickup point.

### costAfterDiscounts

value: `Money`

The cost to ship to this pickup point including discounts.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupPointLocation`

The location details of the pickup point.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickupPoint"`

The type of this delivery option.

### PickupPointCarrier

### code

value: `string`

The code identifying the carrier.

### name

value: `string`

The name of the carrier.

### PickupPointLocation

### address

value: `MailingAddress`

The address of the pickup point.

### handle

value: `string`

The unique identifier of the pickup point.

### name

value: `string`

The name of the pickup point.

### MailingAddress

### address1

value: `string`

The first line of the buyer's address, including street name and number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### address2

value: `string`

The second line of the buyer's address, like apartment number, suite, etc.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### city

value: `string`

The buyer's city.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### company

value: `string`

The buyer's company name.

{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### countryCode

value: `CountryCode`

The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### firstName

value: `string`

The buyer's first name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### lastName

value: `string`

The buyer's last name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### name

value: `string`

The buyer's full name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### phone

value: `string`

The buyer's phone number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### provinceCode

value: `string`

The buyer's province code, such as state, province, prefecture, or region.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### zip

value: `string`

The buyer's postal or ZIP code.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### Metafield

Metadata associated with the checkout.

### key

value: `string`

The name of the metafield. It must be between 3 and 30 characters in length (inclusive).

### namespace

value: `string`

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

### value

value: `string | number`

The information to be stored as metadata.

### valueType

value: `'integer' | 'string' | 'json_string'`

The metafield’s information type.

### PickupLocationOption

### code

value: `string`

The code of the delivery option.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupLocation`

The location details of the pickup location.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickup"`

The type of this delivery option.

### PickupLocation

### address

value: `MailingAddress`

The address of the pickup location.

### name

value: `string`

The name of the pickup location.

### CartLineReference

Represents a reference to a cart line.

### id

value: `string`

The unique identifier of the referenced cart line.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## useDeliveryGroupTarget

Returns the delivery group for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions. This is deprecated, use `useDeliveryGroupListTarget()` instead.

### UseDeliveryGroupTargetGeneratedType

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.

#### Returns: DeliveryGroup | undefined
export function useDeliveryGroupTarget(): DeliveryGroup | undefined {
  const api = useApi<
    | 'purchase.checkout.shipping-option-list.render-before'
    | 'purchase.checkout.shipping-option-list.render-after'
  >();

  const target = useSubscription(api.target);
  return target?.deliveryGroups[0];
}


### DeliveryGroup

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

### deliveryOptions

value: `DeliveryOption[]`

The delivery options available for the delivery group.

### groupType

value: `DeliveryGroupType`

The type of the delivery group.

### id

value: `string`

The unique identifier of the delivery group. On the Thank You page this value is undefined.

### isDeliveryRequired

value: `boolean`

Whether delivery is required for the delivery group.

### selectedDeliveryOption

value: `DeliveryOptionReference`

The selected delivery option for the delivery group.

### targetedCartLines

value: `CartLineReference[]`

The cart line references associated to the delivery group.

### ShippingOption

Represents a delivery option that is a shipping option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `'shipping' | 'local'`

The type of this delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

### PickupPointOption

### carrier

value: `PickupPointCarrier`

Information about the carrier that ships to the pickup point.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost to ship to this pickup point.

### costAfterDiscounts

value: `Money`

The cost to ship to this pickup point including discounts.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupPointLocation`

The location details of the pickup point.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickupPoint"`

The type of this delivery option.

### PickupPointCarrier

### code

value: `string`

The code identifying the carrier.

### name

value: `string`

The name of the carrier.

### PickupPointLocation

### address

value: `MailingAddress`

The address of the pickup point.

### handle

value: `string`

The unique identifier of the pickup point.

### name

value: `string`

The name of the pickup point.

### MailingAddress

### address1

value: `string`

The first line of the buyer's address, including street name and number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### address2

value: `string`

The second line of the buyer's address, like apartment number, suite, etc.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### city

value: `string`

The buyer's city.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### company

value: `string`

The buyer's company name.

{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### countryCode

value: `CountryCode`

The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### firstName

value: `string`

The buyer's first name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### lastName

value: `string`

The buyer's last name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### name

value: `string`

The buyer's full name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### phone

value: `string`

The buyer's phone number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### provinceCode

value: `string`

The buyer's province code, such as state, province, prefecture, or region.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### zip

value: `string`

The buyer's postal or ZIP code.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### Metafield

Metadata associated with the checkout.

### key

value: `string`

The name of the metafield. It must be between 3 and 30 characters in length (inclusive).

### namespace

value: `string`

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

### value

value: `string | number`

The information to be stored as metadata.

### valueType

value: `'integer' | 'string' | 'json_string'`

The metafield’s information type.

### PickupLocationOption

### code

value: `string`

The code of the delivery option.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupLocation`

The location details of the pickup location.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickup"`

The type of this delivery option.

### PickupLocation

### address

value: `MailingAddress`

The address of the pickup location.

### name

value: `string`

The name of the pickup location.

### DeliveryOptionReference

Represents a reference to a delivery option.

### handle

value: `string`

The unique identifier of the referenced delivery option.

### CartLineReference

Represents a reference to a cart line.

### id

value: `string`

The unique identifier of the referenced cart line.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## useDeliveryGroupListTarget

Returns the delivery group list for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions.

### UseDeliveryGroupListTargetGeneratedType

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

#### Returns: DeliveryGroupList | undefined
export function useDeliveryGroupListTarget(): DeliveryGroupList | undefined {
  const api = useApi<
    | 'purchase.checkout.shipping-option-list.render-before'
    | 'purchase.checkout.shipping-option-list.render-after'
  >();

  return useSubscription(api.target);
}


### DeliveryGroupList

The delivery group list the extension is associated to.

### deliveryGroups

value: `DeliveryGroup[]`

The delivery groups that compose this list.

### groupType

value: `DeliveryGroupType`

The group type of the delivery group list.

### DeliveryGroup

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

### deliveryOptions

value: `DeliveryOption[]`

The delivery options available for the delivery group.

### groupType

value: `DeliveryGroupType`

The type of the delivery group.

### id

value: `string`

The unique identifier of the delivery group. On the Thank You page this value is undefined.

### isDeliveryRequired

value: `boolean`

Whether delivery is required for the delivery group.

### selectedDeliveryOption

value: `DeliveryOptionReference`

The selected delivery option for the delivery group.

### targetedCartLines

value: `CartLineReference[]`

The cart line references associated to the delivery group.

### ShippingOption

Represents a delivery option that is a shipping option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `'shipping' | 'local'`

The type of this delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

### PickupPointOption

### carrier

value: `PickupPointCarrier`

Information about the carrier that ships to the pickup point.

### code

value: `string`

The code of the delivery option.

### cost

value: `Money`

The cost to ship to this pickup point.

### costAfterDiscounts

value: `Money`

The cost to ship to this pickup point including discounts.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupPointLocation`

The location details of the pickup point.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickupPoint"`

The type of this delivery option.

### PickupPointCarrier

### code

value: `string`

The code identifying the carrier.

### name

value: `string`

The name of the carrier.

### PickupPointLocation

### address

value: `MailingAddress`

The address of the pickup point.

### handle

value: `string`

The unique identifier of the pickup point.

### name

value: `string`

The name of the pickup point.

### MailingAddress

### address1

value: `string`

The first line of the buyer's address, including street name and number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### address2

value: `string`

The second line of the buyer's address, like apartment number, suite, etc.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### city

value: `string`

The buyer's city.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### company

value: `string`

The buyer's company name.

{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### countryCode

value: `CountryCode`

The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### firstName

value: `string`

The buyer's first name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### lastName

value: `string`

The buyer's last name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### name

value: `string`

The buyer's full name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### phone

value: `string`

The buyer's phone number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### provinceCode

value: `string`

The buyer's province code, such as state, province, prefecture, or region.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### zip

value: `string`

The buyer's postal or ZIP code.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### Metafield

Metadata associated with the checkout.

### key

value: `string`

The name of the metafield. It must be between 3 and 30 characters in length (inclusive).

### namespace

value: `string`

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

### value

value: `string | number`

The information to be stored as metadata.

### valueType

value: `'integer' | 'string' | 'json_string'`

The metafield’s information type.

### PickupLocationOption

### code

value: `string`

The code of the delivery option.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupLocation`

The location details of the pickup location.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickup"`

The type of this delivery option.

### PickupLocation

### address

value: `MailingAddress`

The address of the pickup location.

### name

value: `string`

The name of the pickup location.

### DeliveryOptionReference

Represents a reference to a delivery option.

### handle

value: `string`

The unique identifier of the referenced delivery option.

### CartLineReference

Represents a reference to a cart line.

### id

value: `string`

The unique identifier of the referenced cart line.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## useDeliverySelectionGroups

Returns the delivery selection groups for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions.

### UseDeliverySelectionGroupsGeneratedType

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

#### Returns: | DeliverySelectionGroup[]
  | undefined
export function useDeliverySelectionGroups():
  | DeliverySelectionGroup[]
  | undefined {
  const api = useApi<
    | 'purchase.checkout.shipping-option-list.render-before'
    | 'purchase.checkout.shipping-option-list.render-after'
  >();

  return useSubscription(api.deliverySelectionGroups);
}


### DeliverySelectionGroup

A selection group for delivery options.

### associatedDeliveryOptions

value: `DeliveryOptionReference[]`

The associated delivery option handles with the selection group. The handles will match the delivery group's delivery option handles.

### cost

value: `Money`

The sum of each delivery option's cost.

### costAfterDiscounts

value: `Money`

The sum of each delivery option's cost after discounts.

### handle

value: `string`

The handle of the selection group.

### selected

value: `boolean`

If the selection group is selected.

### title

value: `string`

The localized title of the selection group.

### DeliveryOptionReference

Represents a reference to a delivery option.

### handle

value: `string`

The unique identifier of the referenced delivery option.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## PickupPointListApi

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

### PickupPointListApi

### isLocationFormVisible

value: `StatefulRemoteSubscribable<boolean>`

Whether the customer location input form is shown to the buyer.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## PickupLocationListApi

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

### PickupLocationListApi

### isLocationFormVisible

value: `StatefulRemoteSubscribable<boolean>`

Whether the customer location input form is shown to the buyer.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## PickupLocationItemApi

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

### PickupLocationItemApi

### isTargetSelected

value: `StatefulRemoteSubscribable<boolean>`

Whether the pickup location is currently selected.

### target

value: `StatefulRemoteSubscribable<PickupLocationOption>`

The pickup location the extension is attached to.

### PickupLocationOption

### code

value: `string`

The code of the delivery option.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupLocation`

The location details of the pickup location.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickup"`

The type of this delivery option.

### PickupLocation

### address

value: `MailingAddress`

The address of the pickup location.

### name

value: `string`

The name of the pickup location.

### MailingAddress

### address1

value: `string`

The first line of the buyer's address, including street name and number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### address2

value: `string`

The second line of the buyer's address, like apartment number, suite, etc.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### city

value: `string`

The buyer's city.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### company

value: `string`

The buyer's company name.

{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### countryCode

value: `CountryCode`

The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### firstName

value: `string`

The buyer's first name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### lastName

value: `string`

The buyer's last name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### name

value: `string`

The buyer's full name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### phone

value: `string`

The buyer's phone number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### provinceCode

value: `string`

The buyer's province code, such as state, province, prefecture, or region.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### zip

value: `string`

The buyer's postal or ZIP code.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### Metafield

Metadata associated with the checkout.

### key

value: `string`

The name of the metafield. It must be between 3 and 30 characters in length (inclusive).

### namespace

value: `string`

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

### value

value: `string | number`

The information to be stored as metadata.

### valueType

value: `'integer' | 'string' | 'json_string'`

The metafield’s information type.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```

## usePickupLocationOptionTarget

Returns the pickup location option for `purchase.checkout.pickup-location-option-item.render-after` attached extensions.

### UsePickupLocationOptionTargetGeneratedType

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`

#### Returns: {
  pickupLocationOptionTarget: PickupLocationOption;
  isTargetSelected: boolean;
}
export function usePickupLocationOptionTarget(): {
  pickupLocationOptionTarget: PickupLocationOption;
  isTargetSelected: boolean;
} {
  const api =
    useApi<'purchase.checkout.pickup-location-option-item.render-after'>();
  if (!api.target || api.isTargetSelected === undefined) {
    throw new ExtensionHasNoTargetError(
      'usePickupLocationOptionTarget',
      api.extension.target,
    );
  }

  const pickupLocationOptionTarget = useSubscription(api.target);
  const isTargetSelected = useSubscription(api.isTargetSelected);

  const pickupLocationOption = useMemo(() => {
    return {
      pickupLocationOptionTarget,
      isTargetSelected,
    };
  }, [pickupLocationOptionTarget, isTargetSelected]);

  return pickupLocationOption;
}


### PickupLocationOption

### code

value: `string`

The code of the delivery option.

### description

value: `string`

The description of the delivery option.

### handle

value: `string`

The unique identifier of the delivery option.

### location

value: `PickupLocation`

The location details of the pickup location.

### metafields

value: `Metafield[]`

The metafields associated with this delivery option.

### title

value: `string`

The title of the delivery option.

### type

value: `"pickup"`

The type of this delivery option.

### PickupLocation

### address

value: `MailingAddress`

The address of the pickup location.

### name

value: `string`

The name of the pickup location.

### MailingAddress

### address1

value: `string`

The first line of the buyer's address, including street name and number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### address2

value: `string`

The second line of the buyer's address, like apartment number, suite, etc.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### city

value: `string`

The buyer's city.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### company

value: `string`

The buyer's company name.

{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### countryCode

value: `CountryCode`

The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### firstName

value: `string`

The buyer's first name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### lastName

value: `string`

The buyer's last name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### name

value: `string`

The buyer's full name.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### phone

value: `string`

The buyer's phone number.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### provinceCode

value: `string`

The buyer's province code, such as state, province, prefecture, or region.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### zip

value: `string`

The buyer's postal or ZIP code.

{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).

### Metafield

Metadata associated with the checkout.

### key

value: `string`

The name of the metafield. It must be between 3 and 30 characters in length (inclusive).

### namespace

value: `string`

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

### value

value: `string | number`

The information to be stored as metadata.

### valueType

value: `'integer' | 'string' | 'json_string'`

The metafield’s information type.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples


  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.
  



```jsx
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>
  );
}

```

```js
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';
    }
  },
);

```



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

```

```js
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';
    }
  },
);

```



```jsx
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>
    );
  }
}

```

```js
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.';
      }
    }
  },
);

```



```jsx
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>
  );
}

```