Theme Playground

Commerce

PromoCodeInput

Discount-code control for applying, showing, and removing promo codes in cart and checkout flows.

Best for

cart discountscheckout promoscoupon entry

Import

import { PromoCodeInput } from "@enadhq/enad-react-sdk/client/cart"

When to use it

Use PromoCodeInput in carts and checkout summaries when the customer should be able to apply or remove one or more discount codes inline.

Composition notes

The component delegates the real discount behavior upward. onApply, onRemove, appliedCodes, isApplying, and error should all reflect the same pricing source of truth as the order totals.

Behavior and theming guidance

Keep promo feedback direct. If a code fails, the reason should be visible immediately. If a code succeeds, the updated discount should be easy to connect to the summary totals nearby.

Examples

Live examples you can edit directly in the sandbox.

1 example

Apply and remove codes

Keep the applied-code list and any validation errors in parent state so the discount logic stays close to pricing calculations.

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

PropTypeDefaultDescription
onApply(code: string) => void
No description yet.
onRemovestring
No description yet.
appliedCodesstring[]
No description yet.
isApplyingbooleanfalse
No description yet.
errorstring
No description yet.
labelsstring{}
No description yet.
classNamestring
No description yet.