Skip to main content

Update discount codes

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

Anchor to RequirementsRequirements

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.

File

/app/components/DiscountCodeForm.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>
);
}
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.

File

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

Was this page helpful?