Reference
<tl-order-confirmation>
The thank-you block: order reference, email, event and date, the ticket lines, the money rows and the tickets.
| HTML tag | <tl-order-confirmation> |
| React | import { TlOrderConfirmation } from '@ticketlayer/elements-react' |
| Category | Checkout |
| Runs in | web (browser DOM), native (planned React Native set) |
The thank-you block: order reference, email, event and date, the ticket lines, the money rows and the tickets.
tl-order-confirmation - the "thank you" page block: order reference, customer email, event and date, ticket lines, totals, then the tickets themselves (tl-order-tickets, each with a Download PDF link).
Finds its order three ways, in priority order:
- the
order-idprop - the URL (
?orderId=), the contract the hosted box office confirmation page uses;?redirect_status=from a Stripe return is honoured too - the SDK's
checkout:completedevent, for a page that mounts this before the customer pays
<tl-order-confirmation order-id="ord_xxx"></tl-order-confirmation>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
columns | columns | Columns for the ticket grid. | number | 2 |
customerEmail | customer-email | Email to show when the order view carries none (a host that collected it at checkout). | string | undefined | undefined |
orderId | order-id | The order to show. Falls back to ?orderId= in the page URL. | string | undefined | undefined |
showTickets | show-tickets | Mount tl-order-tickets under the summary (default true). | 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-order-confirmation__* class. Without it the element is styled, and each node is a ::part() of the same name. The ticket grid inside follows the same mode. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | CustomEvent<{ message: string; }> | |
tlOrderLoaded | CustomEvent<{ order: TlOrderData; }> |
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-order-tickets>, <tl-concierge-slot>