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).