Choose a version:

useDeliveryGroups
hook

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

Anchor to useDeliveryGroups
useDeliveryGroups()

Anchor to useDeliveryGroups-returnsReturns

[]

DeliveryGroup

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

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

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

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

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

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

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

CartLineReference

Represents a reference to a cart line.

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

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

DeliveryOption

Represents a base interface for a single delivery option.

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

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

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

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

DeliveryOptionReference

Represents a reference to a delivery option.

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

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

DeliveryGroupType

The possible types of a delivery group.

'oneTimePurchase' | 'subscription'

Was this section helpful?

Delivery groups

React

import React from 'react';

import {

render,

Banner,

useDeliveryGroups,

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

render('Checkout::Dynamic::Render', () => (

));

function Extension() {

const deliveryGroups = useDeliveryGroups();

const deliveryOptions =

deliveryGroups[0].deliveryOptions;

return (

First delivery option:{' '}

{deliveryOptions[0].title}

</Banner>

);

}

Examples

Delivery groups

React

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

render('Checkout::Dynamic::Render', () => (
  <Extension />
));

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

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