Reference
<tl-gift-card-balance>
Check what is on a gift card by its code: the amount, until when, and whether it can be used.
| HTML tag | <tl-gift-card-balance> |
| React | import { TlGiftCardBalance } from '@ticketlayer/elements-react' |
| Category | Account |
| Runs in | web (browser DOM), native (planned React Native set) |
Check what is on a gift card by its code: the amount, until when, and whether it can be used. Too many tries in a minute are met with a friendly wait. The code goes in the request body, the field is emptied once the card is found, and the answer names the card by the last four characters of its code. Too many tries in a minute are met with a friendly wait.
<tl-gift-card-balance></tl-gift-card-balance>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
buttonLabel | button-label | The check button label. | string | 'Check balance' |
heading | heading | The element's heading. | string | 'Check a gift card balance' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-gift-card-balance__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlBalanceChecked | Emitted when a card is found: its balance and status, never its code. | CustomEvent<TlBalanceChecked> |
tlError | Emitted when a balance cannot be checked, with the message shown. | CustomEvent<{ message: string; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.