<tl-order-confirmation>

HTML tag	<tl-order-confirmation>
React	import { TlOrderConfirmation } from '@ticketlayer/elements-react'
Category	Checkout
Runs in	web (browser DOM), native (planned React Native set)

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:

1. the order-id prop
2. the URL (?orderId=), the contract the hosted box office confirmation page uses; ?redirect_status= from a Stripe return is honoured too
3. the SDK's checkout:completed event, 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

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>