<tl-buy-modal>
The buy-tickets modal: a date, then tickets, then payment, under a header carrying the channel's and the event's identity, beside a basket showing what the buyer is paying for.
| HTML tag | <tl-buy-modal> |
| React | import { TlBuyModal } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM) |
The buy-tickets modal: a date, then tickets, then payment, under a header carrying the channel's and the event's identity, beside a basket showing what the buyer is paying for. The hosted checkout opens inside it where the page allows.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
channelHeader | channel-header | Whether and how the channel's logo and name are drawn above the event: hidden, over the blurred image, or on the primary colour. Defaults to the channel theme's design.modalHeader.channel, then hidden | "blurred" | "hidden" | "plain" | undefined | undefined |
eventId (required) | event-id | Event to sell tickets for | string | undefined |
header | header | How the event band is drawn: the event image blurred behind a square of it, or plain on the background. Defaults to the channel theme's design.modalHeader.event, then blurred | "blurred" | "plain" | undefined | undefined |
occurrenceId | occurrence-id | Optionally open straight to ticket selection for this occurrence | string | undefined | undefined |
paymentReturn | payment-return | A payment method coming back to the page: open straight on payment to finish it. Set by | string | undefined | undefined |
size | size | A fixed 1040 by 640 frame that keeps its size through every step, or nearly the whole screen. Full screen on a phone either way | "fixed" | "wide" | 'fixed' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-buy-modal__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlCheckout | The tickets are in the cart and the host's own checkout takes over (the page cannot show the checkout inside the modal) | CustomEvent<void> |
tlClose | The buyer dismissed the modal | CustomEvent<void> |
tlComplete | The buyer paid, inside the modal; the modal shows its confirmation | CustomEvent<{ order: unknown; }> |
tlError | The event or its tickets couldn't be loaded, the tickets couldn't be added, or the checkout couldn't be opened | 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.
Related elements#
Renders: <tl-occurrence-selector>, <tl-ticket-selector>, <tl-seat-explorer>, <tl-best-available>, <tl-cart>, <tl-promo-code>, <tl-concierge-slot>, <tl-seat-view>