# salla-gift-card-redeem (https://docs.salla.dev/twilight/react/web-components/salla-gift-card-redeem)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Gift card redemption box for the customer wallet page: a card with an "add gift card" button that lets a signed-in
customer type a gift card code and add its value to their wallet balance. Used inside `salla-wallet`, which refreshes
the balance and transactions on `giftCardRedeemed`; a theme rarely places it directly.

It renders nothing for guests, or unless the store has both the `wallet-gift-card` and
`giftcard-redemption-form-enabled` features. On screens 768px wide or more the code field replaces the card in
place; on smaller screens it opens in a bottom sheet modal. Codes are 16 uppercase letters or digits, other characters
are removed as the user types, and the activate button stays disabled until 16 characters are entered. Pressing
Enter in the field submits. The code is sent with `POST wallet/gift-card/redeem`; the result is shown in a modal
(success with a "shop now" button, or the error reason). Each attempt also dispatches `giftcard::redeemed` on `salla.event`
with `{ status: 'success' | 'failed', code }`, where the code is masked after its first 4 characters.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-gift-card-redeem>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaGiftCardRedeem } from '@salla.sa/twilight-components-react/gift-card-redeem';
```

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaGiftCardRedeem } from '@salla.sa/twilight-components-react/gift-card-redeem';

export function Example() {
  useEffect(() => {
    document.querySelector('salla-gift-card-redeem')
      .addEventListener('giftCardRedeemed', e => console.log(e.detail.new_balance));
  }, []);

  return (
    <SallaGiftCardRedeem />
  );
}
```

```html
<salla-gift-card-redeem></salla-gift-card-redeem>
<script>
  document.querySelector('salla-gift-card-redeem')
    .addEventListener('giftCardRedeemed', e => console.log(e.detail.new_balance));
</script>
```

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event              | Description                                                                                                                                      | Detail |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------ |
| `giftCardRedeemed` | Fires after a successful redeem. `event.detail` is the API response data, containing `amount` (the value added), `new_balance` and `expires_at`. | `any`  |

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal).

Used inside: [`<salla-wallet>`](https://docs.salla.dev/twilight/react/web-components/salla-wallet).