Reference

<tl-payment-picker>

The checkout's Payment section: the ways this order can be paid, each with any surcharge it adds, and the reason beside one that cannot be chosen.


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

The checkout's Payment section: the ways this order can be paid, each with any surcharge it adds, and the reason beside one that cannot be chosen. Choosing re-prices the cart's quote. Choosing writes it to the cart (PUT /sales/carts/\{cartId\}/choices) and tl-checkout-summary re-prices from the quote.

<tl-payment-picker></tl-payment-picker>

Properties#

Property	Attribute	Description	Type	Default
`autoChoose`	`auto-choose`	Choose the only method that can be chosen when nothing is chosen yet, so the quote includes it.	`boolean`	`true`
`collapse`	`collapse`	Fold the section to one line when its only method is chosen, with Change when there is more to see.	`boolean`	`true`
`heading`	`heading`	The section's heading.	`string`	`'Payment'`
`unavailable`	`unavailable`	Which methods that cannot be chosen are shown, disabled with the reason: `relevant` (closed by a cut-off, business customers only), `all`, or `none`.	`"all" \| "none" \| "relevant"`	`'relevant'`
`unstyled`	`unstyled`	Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a `tl-payment-picker__*` 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 choice is refused or the options cannot be read.	`CustomEvent<{ message: string; }>`
`tlPaymentChosen`	Emitted once a payment method is chosen, with the re-priced total.	`CustomEvent<{ method: string; total: number \| null; }>`

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.