---
title: Update discount codes
description: Use a cart handler to apply discount codes.
source_url:
  html: 'https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes'
  md: >-
    https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md
---

ExpandOn this page

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md#requirements)
* [Step 1: Create a discount code form](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md#step-1-create-a-discount-code-form)
* [Step 2: Handle the discount code form request](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md#step-2-handle-the-discount-code-form-request)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md#next-steps)

# Update discount codes

This guide shows you how to use a cart handler to apply discount codes to a cart.

***

## 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: Create a discount code form

Use the [`CartForm`](https://shopify.dev/docs/api/hydrogen/latest/components/cartform) to create a discount code form. You can use this component anywhere in the app. It will submit a form request to the `/cart` route's action when a visitor submits a discount code.

## File

## /app/components/DiscountCodeForm.jsx

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


export default function DiscountCodeForm({discountCodes}) {
  const codes: string[] = discountCodes
   ?.filter((discount) => discount.applicable)
   ?.map(({code}) => code) || []


  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.DiscountCodesUpdate}
      inputs={
        {discountCodes: codes || []}
      }
    >
      <input
        type="text"
        name="discountCode"
        placeholder="Discount code"
      />
      <button>
        Apply Discount
      </button>
    </CartForm>
  );
}
```

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


export default function DiscountCodeForm({discountCodes}: {
  discountCodes: Cart['discountCodes'];
}) {
  const codes: string[] = discountCodes
   ?.filter((discount) => discount.applicable)
   ?.map(({code}) => code) || []


  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.DiscountCodesUpdate}
      inputs={
        {discountCodes: codes}
      }
    >
      <input
        type="text"
        name="discountCode"
        placeholder="Discount code"
      />
      <button>
        Apply Discount
      </button>
    </CartForm>
  );
}
```

##### JavaScript

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

export default function DiscountCodeForm({discountCodes}) {
  const codes: string[] = discountCodes
   ?.filter((discount) => discount.applicable)
   ?.map(({code}) => code) || []

  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.DiscountCodesUpdate}
      inputs={
        {discountCodes: codes || []}
      }
    >
      <input
        type="text"
        name="discountCode"
        placeholder="Discount code"
      />
      <button>
        Apply Discount
      </button>
    </CartForm>
  );
}
```

##### TypeScript

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

export default function DiscountCodeForm({discountCodes}: {
  discountCodes: Cart['discountCodes'];
}) {
  const codes: string[] = discountCodes
   ?.filter((discount) => discount.applicable)
   ?.map(({code}) => code) || []

  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.DiscountCodesUpdate}
      inputs={
        {discountCodes: codes}
      }
    >
      <input
        type="text"
        name="discountCode"
        placeholder="Discount code"
      />
      <button>
        Apply Discount
      </button>
    </CartForm>
  );
}
```

***

## Step 2: Handle the discount code form request

Handle the discount code 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

```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.DiscountCodesUpdate:
      const formDiscountCode = formData.get('discountCode');


      // User inputted discount code
      const discountCodes = (
        formDiscountCode ? [formDiscountCode] : []
      ) as string[];


      // Combine with discount codes already applied on cart
      discountCodes.push(...inputs.discountCodes);


      result = await cart.updateDiscountCodes(discountCodes);
      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},
  );
}
```

```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.DiscountCodesUpdate:
      const formDiscountCode = formData.get('discountCode');


      // User inputted discount code
      const discountCodes = (
        formDiscountCode ? [formDiscountCode] : []
      ) as string[];


      // Combine with discount codes already applied on cart
      discountCodes.push(...inputs.discountCodes);


      result = await cart.updateDiscountCodes(discountCodes);
      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},
  );
}
```

##### JavaScript

```
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.DiscountCodesUpdate:
      const formDiscountCode = formData.get('discountCode');

      // User inputted discount code
      const discountCodes = (
        formDiscountCode ? [formDiscountCode] : []
      ) as string[];

      // Combine with discount codes already applied on cart
      discountCodes.push(...inputs.discountCodes);

      result = await cart.updateDiscountCodes(discountCodes);
      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

```
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.DiscountCodesUpdate:
      const formDiscountCode = formData.get('discountCode');

      // User inputted discount code
      const discountCodes = (
        formDiscountCode ? [formDiscountCode] : []
      ) as string[];

      // Combine with discount codes already applied on cart
      discountCodes.push(...inputs.discountCodes);

      result = await cart.updateDiscountCodes(discountCodes);
      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},
  );
}
```

***

## Next steps

* Learn how to [apply selected delivery options](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/selected-delivery-options).

***

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md#requirements)
* [Step 1: Create a discount code form](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md#step-1-create-a-discount-code-form)
* [Step 2: Handle the discount code form request](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md#step-2-handle-the-discount-code-form-request)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/discount-codes.md#next-steps)