DISCOUNTCODEINPUT COMPONENT

Input field for discount codes with validation states and feedback messages.

PROPS

PropTypeDescription
onApply(code: string) => Promise<void>Apply discount callback
variant'default' | 'inline'Display variant
disabledbooleanDisable input

Variants

Default (Card Style)

Have a discount code?

Try entering "WELCOME10" to see success state

1<DiscountCodeInput
2  variant="default"
3  onApply={handleApplyDiscount}
4/>

Inline Style

1<DiscountCodeInput
2  variant="inline"
3  onApply={handleApplyDiscount}
4/>

Success State

WELCOME10 Applied

You saved $10.00!

Error State

Invalid or expired discount code

USAGE EXAMPLES

IMPLEMENTATION WITH CART

1import { DiscountCodeInput } from '@/components/fanbace/discount-code-input';
2import { useCart } from '@/lib/sdk';
3import { toast } from 'sonner';
4 
5export default function CheckoutPage() {
6  const { applyDiscount } = useCart();
7 
8  const handleApplyDiscount = async (code: string) => {
9    try {
10      await applyDiscount(code);
11      toast.success('Discount applied!');
12    } catch (error) {
13      toast.error('Invalid discount code');
14    }
15  };
16 
17  return (
18    <div>
19      <DiscountCodeInput onApply={handleApplyDiscount} />
20    </div>
21  );
22}