---
title: Update selected delivery options
description: Use a cart handler to update selected delivery options.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options
  md: >-
    https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md
---

ExpandOn this page

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md#requirements)
* [Step 1: Read selected and available delivery groups](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md#step-1-read-selected-and-available-delivery-groups)
* [Step 2: Create a select delivery option form](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md#step-2-create-a-select-delivery-option-form)
* [Step 3: Handle the selected delivery option form request](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md#step-3-handle-the-selected-delivery-option-form-request)

# Update selected delivery options

This guide shows you how to use a cart handler to update selected delivery options, such as standard or expedited delivery.

***

## Requirements

* You've completed the [quickstart guide](https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started).
* You've [set up a cart handler](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/setup).

***

## Step 1: Read selected and available delivery groups

Carts return an empty array for available delivery groups by default. To get a list of delivery groups, the cart must be associated with a customer access token by [updating the buyer identity](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/buyer-identity) when a customer is logged in.

Update the cart query fragment to return selected and available delivery options.

## File

## server.js

##### JavaScript

```jsx
const cart = createCartHandler({
  storefront,
  getCartId: cartGetIdDefault(request.headers),
  setCartId: cartSetIdDefault(),
  cartQueryFragment: CART_QUERY_FRAGMENT,
});

const CART_QUERY_FRAGMENT = `#graphql
  fragment CartApiQuery on Cart {
    id
    deliveryGroups(first: 1) {
      nodes {
        id
        deliveryOptions {
          handle
          title
          code
          estimatedCost {
            amount
            currencyCode
          }
        }
        selectedDeliveryOption {
          handle
        }
      }
    }
  }
`;
```

##### TypeScript

```jsx
const cart = createCartHandler({
  storefront,
  getCartId: cartGetIdDefault(request.headers),
  setCartId: cartSetIdDefault(),
  cartQueryFragment: CART_QUERY_FRAGMENT,
});

const CART_QUERY_FRAGMENT = `#graphql
  fragment CartApiQuery on Cart {
    id
    deliveryGroups(first: 1) {
      nodes {
        id
        deliveryOptions {
          handle
          title
          code
          estimatedCost {
            amount
            currencyCode
          }
        }
        selectedDeliveryOption {
          handle
        }
      }
    }
  }
`;
```

***

## Step 2: Create a select delivery option form

Use React Router's [`useFetcher`](https://reactrouter.com/api/hooks/useFetchers#usefetchers) hook to create a cart note form. The hook submits a form request to the `/cart` route's action when users choose a delivery option. You can use this component anywhere in the app.

When you use `fetcher.submit`, make sure there's a data key with the name `CartForm.INPUT_NAME`. The key value must be a JSON stringified object with `action` and `inputs` defined.

## File

## /app/components/SelectDeliveryGroup.jsx

##### JavaScript

```jsx
import {CartForm} from '@shopify/hydrogen';

function SelectDeliveryGroup({deliveryGroups}) {
  const fetcher = useFetcher();
  const group = deliveryGroups?.nodes[0];
  const deliveryOptions = group.deliveryOptions;
  const selectedHandle = group.selectedDeliveryOption?.handle;

  return (
    <div>
      {deliveryOptions.map((option) => {
        return (
          <div key={option.handle}>
            <input
              checked={selectedHandle === option.handle}
              type="radio"
              name="delivery"
              value={option.handle}
              id={option.handle}
              onChange={(event) = /> {
                fetcher.submit(
                  {
                    [CartForm.INPUT_NAME]: JSON.stringify({
                      action: CartForm.ACTIONS.SelectedDeliveryOptionsUpdate,
                      inputs: {
                        selectedDeliveryOptions: [{
                          deliveryGroupId: group.id,
                          deliveryOptionHandle: event.target.value,
                        }],
                      },
                    }),
                  },
                  {method: 'POST', action: '/cart'}
                )
              }}
            />
            <label htmlFor={option.handle}>{option.title}</label>
          </div>
        )
      })}
    </div>
  );
}
```

##### TypeScript

```jsx
import {CartForm, type CartActionInput} from '@shopify/hydrogen';
import type {Cart} from '@shopify/hydrogen/storefront-api-types';

function SelectDeliveryGroup({
  deliveryGroups
}: {
  deliveryGroups: Cart['deliveryGroups'];
}) {
  const fetcher = useFetcher();
  const group = deliveryGroups?.nodes[0];
  const deliveryOptions = group.deliveryOptions;
  const selectedHandle = group.selectedDeliveryOption?.handle;

  return (
    <div>
      {deliveryOptions.map((option) => {
        return (
          <div key={option.handle}>
            <input
              checked={selectedHandle === option.handle}
              type="radio"
              name="delivery"
              value={option.handle}
              id={option.handle}
              onChange={(event) = /> {
                fetcher.submit(
                  {
                    [CartForm.INPUT_NAME]: JSON.stringify({
                      action: CartForm.ACTIONS.SelectedDeliveryOptionsUpdate,
                      inputs: {
                        selectedDeliveryOptions: [{
                          deliveryGroupId: group.id,
                          deliveryOptionHandle: event.target.value,
                        }],
                      },
                    }),
                  },
                  {method: 'POST', action: '/cart'}
                )
              }}
            />
            <label htmlFor={option.handle}>{option.title}</label>
          </div>
        )
      })}
    </div>
  );
}
```

***

## Step 3: Handle the selected delivery option form request

Handle the selected delivery option form request in an `action`. Use the `cart`, created from [`createCartHandler`](https://shopify.dev/docs/api/hydrogen/latest/utilities/createcarthandler), to handle cart mutation requests to the Storefront API.

## File

## /app/routes/cart.jsx

##### JavaScript

```jsx
import {CartForm} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}) {
  const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  let result;

  switch(action) {
    case CartForm.ACTIONS.SelectedDeliveryOptionsUpdate:
      result = await cart.updateSelectedDeliveryOption(inputs.selectedDeliveryOptions);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

  // The Cart ID might change after each mutation, so update it each time.
  const headers = cart.setCartId(result.cart.id);

  return json(
    result,
    {status: 200, headers},
  );
}
```

##### TypeScript

```jsx
import {
  type CartQueryData,
  CartForm,
} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}: ActionArgs) {
  const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  let result: CartQueryData;

  switch(action) {
    case CartForm.ACTIONS.SelectedDeliveryOptionsUpdate:
      result = await cart.updateSelectedDeliveryOption(inputs.selectedDeliveryOptions);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

  // The Cart ID might change after each mutation, so update it each time.
  const headers = cart.setCartId(result.cart.id);

  return json(
    result,
    {status: 200, headers},
  );
}
```

***

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md#requirements)
* [Step 1: Read selected and available delivery groups](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md#step-1-read-selected-and-available-delivery-groups)
* [Step 2: Create a select delivery option form](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md#step-2-create-a-select-delivery-option-form)
* [Step 3: Handle the selected delivery option form request](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options.md#step-3-handle-the-selected-delivery-option-form-request)