> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <ApplyPromoCode />

> Input field for applying discount codes to an order.

# ApplyPromoCode

<Snippet file="api-key-location.mdx" />

A compact input with an apply button that lets customers enter and validate promotional discount codes during checkout.

## Preview

Desktop

Mobile

## Import

```tsx theme={null}
import { ApplyPromoCode } from '@/components/ApplyPromoCode'
```

## Usage

```tsx theme={null}
<ApplyPromoCode
  onApply={handleApplyPromo}
  appliedCode={cart.promoCode}
  onRemove={handleRemovePromo}
/>
```

## Props

**onApply** `(code: string) =\> Promise\<PromoResult\>` *required*

Async callback to validate and apply the promo code. Should return the discount result or throw on invalid codes.

**appliedCode** `string`

Currently applied promo code, if any.

**onRemove** `() =\> void`

Callback to remove the currently applied promo code.

## Behavior

* Inline validation with loading state during API call
* Shows success message with discount amount on valid code
* Shows error message for invalid or expired codes
* Displays applied code as a removable chip
* Collapses to "Have a promo code?" link when no code is applied


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.