This guide shows you how to use a cart handler to apply a note to a cart. For example, you can enable users to apply a note that requests gift-wrapping.
## Requirements
- You've completed the [quickstart guide](/docs/storefronts/headless/hydrogen/getting-started).
- You've [set up a cart handler](/docs/storefronts/headless/hydrogen/cart/setup).
## Step 1: Create a cart note form
Use the [`CartForm`](/docs/api/hydrogen/latest/components/cartform) component to create a cart note form. The component submits a form request to the `/cart` route's action when users submit an update to the note. You can use this component anywhere in the app.
```jsx?title: 'JavaScript', filename: '/app/components/NoteForm.jsx'
import {CartForm} from '@shopify/hydrogen';
export default function NoteForm() {
return (
Provide a short message for the gift tag:
);
}
```
```jsx?title: 'TypeScript', filename: '/app/components/NoteForm.tsx'
import {CartForm} from '@shopify/hydrogen';
export default function NoteForm() {
return (
Provide a short message for the gift tag:
);
}
```
## Step 2: Handle the cart note form request
Handle the cart note form request in an `action`. Use the `cart`, created from [`createCartHandler`](/docs/api/hydrogen/latest/utilities/createcarthandler), to handle cart mutation requests to the Storefront API.
```jsx?title: 'JavaScript', filename: '/app/routes/cart.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.NoteUpdate:
const note = String(formData.get('note') || '');
result = await cart.updateNote(note);
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?title: 'TypeScript', filename: '/app/routes/cart.tsx'
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.NoteUpdate:
const note = String(formData.get('note') || '');
result = await cart.updateNote(note);
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 cart attributes](/docs/storefronts/headless/hydrogen/cart/attributes).