<tl-checkout-summary>
The checkout's order summary, priced from the cart's quote: the tickets with the fees included in them, each separate fee, any discount and the total checkout charges.
| HTML tag | <tl-checkout-summary> |
| React | import { TlCheckoutSummary } from '@ticketlayer/elements-react' |
| Category | Checkout |
| Runs in | web (browser DOM), native (planned React Native set) |
The checkout's order summary, priced from the cart's quote: the tickets
with the fees included in them, each separate fee, any discount and the
total checkout charges. It re-prices as delivery and payment are chosen. It
re-prices as tl-delivery-picker and tl-payment-picker choose, says it
is updating rather than show a stale total, and announces the new total
politely.
Gift cards being bought are a row of their own, and gift cards or credit
applied to pay (tl-checkout-credit) are listed under the total with what
each covers, then what is left to pay (P9).
<tl-checkout-summary></tl-checkout-summary>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
heading | heading | The summary's heading. | string | 'Order summary' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-checkout-summary__* 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 the quote cannot be read. | CustomEvent<{ message: string; }> |
tlQuoteUpdated | Emitted when the quote moves to a new total. | CustomEvent<TlQuoteUpdated> |
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.