Update discount codes

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

Anchor to RequirementsRequirements

• You've completed the quickstart guide.
• You've set up a cart handler.

Anchor to Step 1: Create a discount code formStep 1: Create a discount code form

Use the 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.

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>
  );
}

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>
  );
}

Anchor to Step 2: Handle the discount code form requestStep 2: Handle the discount code form request

Handle the discount code form request in an action. Use the cart, created from createCartHandler, to handle cart mutation requests to the Storefront API.

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},
  );
}

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},
  );
}

Anchor to Next stepsNext steps

• Learn how to apply selected delivery options.