Reference
<tl-checkout-credit>
The checkout's gift cards and credit: apply the signed-in buyer's account credit, or a gift card by its code, see what each covers, and remove either before paying.
| HTML tag | <tl-checkout-credit> |
| React | import { TlCheckoutCredit } from '@ticketlayer/elements-react' |
| Category | Checkout |
| Runs in | web (browser DOM), native (planned React Native set) |
The checkout's gift cards and credit: apply the signed-in buyer's account
credit, or a gift card by its code, see what each covers, and remove either
before paying. The rest is paid by the payment method chosen below. The
rest is paid by the method chosen in tl-payment-picker.
<tl-checkout-credit></tl-checkout-credit>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
heading | heading | The section's heading. | string | 'Gift cards and credit' |
showCredit | show-credit | Offer the signed-in buyer's account credit, when they have some in this order's currency. | boolean | true |
showGiftCards | show-gift-cards | Offer paying with a gift card by its code. | boolean | true |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-checkout-credit__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | Emitted when a gift card or credit cannot be applied, with the message shown. | CustomEvent<{ message: string; }> |
tlTendersChanged | Emitted when gift cards or credit are applied or removed: what they pay and what is left. Never carries a code. | CustomEvent<TlTendersChanged> |
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.