tf-checkout-react 2.0.0-beta.26 → 2.0.0-beta.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +80 -8
- package/docs/API.html +1002 -0
- package/docs/API.md +3 -3
- package/docs/GUIDE.html +2291 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,17 +7,23 @@ components, plus the shared API and React Query hooks. Which paths a buyer can
|
|
|
7
7
|
actually use depend on the event, the deployed API, the buyer's session and the
|
|
8
8
|
payment provider.
|
|
9
9
|
|
|
10
|
-
This reference describes **2.0.0-beta.
|
|
10
|
+
This reference describes **2.0.0-beta.28**. It is a prerelease with a different
|
|
11
11
|
API from 1.x. Pin the version while evaluating it. npm's `latest` and `beta`
|
|
12
12
|
tags can move independently and an unqualified install may select 1.x:
|
|
13
13
|
|
|
14
14
|
```bash
|
|
15
15
|
npm view tf-checkout-react dist-tags
|
|
16
|
-
npm install tf-checkout-react@2.0.0-beta.
|
|
16
|
+
npm install tf-checkout-react@2.0.0-beta.28 @tanstack/react-query react react-dom
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
The [API reference](https://unpkg.com/tf-checkout-react@2.0.0-beta.
|
|
20
|
-
is included as `docs/API.md` in this package.
|
|
19
|
+
The [API reference](https://unpkg.com/tf-checkout-react@2.0.0-beta.28/docs/API.html)
|
|
20
|
+
is included as `docs/API.md` and `docs/API.html` in this package. A
|
|
21
|
+
[standalone guide](https://unpkg.com/tf-checkout-react@2.0.0-beta.28/docs/GUIDE.html)
|
|
22
|
+
is also available.
|
|
23
|
+
|
|
24
|
+
If the HTML has not reached the CDN yet, open the packaged `docs/API.md` in a
|
|
25
|
+
Markdown viewer or read the [plain-text API Markdown](https://cdn.jsdelivr.net/npm/tf-checkout-react@2.0.0-beta.28/docs/API.md).
|
|
26
|
+
The full guide is also shown on this npm page.
|
|
21
27
|
|
|
22
28
|
## Choose a checkout layout
|
|
23
29
|
|
|
@@ -35,6 +41,26 @@ version. The 1.x `*Container` components and named single-page/accordion
|
|
|
35
41
|
examples are not drop-in 2.x exports. The [migration guide](#migrating-from-1x)
|
|
36
42
|
shows how to reproduce those layouts with the current components.
|
|
37
43
|
|
|
44
|
+
### Coming from a 1.x layout?
|
|
45
|
+
|
|
46
|
+
The 1.x guide showed ways to arrange individual containers; those examples were
|
|
47
|
+
not named, ready-made 2.x components. Choose the closest 2.x starting point:
|
|
48
|
+
|
|
49
|
+
| 1.x integration | What to use in beta.28 | What your application owns |
|
|
50
|
+
| --- | --- | --- |
|
|
51
|
+
| Separate ticket, billing, payment and confirmation pages | [Step-by-step composition](#step-by-step-checkout) | Routes or step visibility, Back/Edit, and preserving one active checkout provider. |
|
|
52
|
+
| A single page using the container components | [`EmbeddedCheckout`](#embeddedcheckout) for the stock flow, or [single-page composition](#single-page-checkout) to arrange the sections yourself | With composition, the page layout and navigation; with either approach, order-status reconciliation. |
|
|
53
|
+
| The progressive enhancement example | [Step-by-step composition](#step-by-step-checkout) | The visible steps and the rules for moving between them. |
|
|
54
|
+
| The accordion/collapsible example | [Accordion composition](#accordion-checkout) | Disclosure behavior and checkout navigation. |
|
|
55
|
+
| A flow that already reserved a cart | [`ResumedCheckout`](#resume-a-server-cart) | Creating the cart in the same session and the order-status handoff. |
|
|
56
|
+
|
|
57
|
+
The composition examples are starting points, not complete replacements for a
|
|
58
|
+
multi-route checkout. In particular, implement Back/Edit, cart expiry and
|
|
59
|
+
payment recovery before production. See [Compose sections](#compose-sections)
|
|
60
|
+
for the full responsibilities. The 1.x props and callback payloads do not map
|
|
61
|
+
automatically; [Migrating layout callbacks](#migrating-layout-callbacks) gives
|
|
62
|
+
specific examples.
|
|
63
|
+
|
|
38
64
|
[Requirements](#requirements) · [Quick start](#quick-start) ·
|
|
39
65
|
[Configure sessions](#configuration-and-sessions) · [Ready-made checkout](#embeddedcheckout) ·
|
|
40
66
|
[Custom layouts](#compose-sections) · [Payments](#payments) ·
|
|
@@ -677,7 +703,7 @@ error or closed provider page means the charge failed. A custom provider page mu
|
|
|
677
703
|
settle with `{ event: 'dismiss' }` on close/unmount, and other custom payment
|
|
678
704
|
ports must settle, or a waiting reset cannot finish.
|
|
679
705
|
|
|
680
|
-
The beta.
|
|
706
|
+
The beta.28 declaration comments for `reset` and `PAID_ORDER_PENDING_MESSAGE`
|
|
681
707
|
say pressing Pay again finishes an unconfirmed order; the `resetWhenSettled`
|
|
682
708
|
comment also omits retired checkouts as a reason for `false`. Those comments do
|
|
683
709
|
not establish that a retry is safe. Use the session and reconciliation guidance
|
|
@@ -734,7 +760,7 @@ holder's answers in `ticketDataCapture`, and add-on answers via
|
|
|
734
760
|
the opaque catalog ID. Use backend country/state IDs for `countryId` and
|
|
735
761
|
`stateId`; `countryCode` / `stateCode` are payment billing codes.
|
|
736
762
|
|
|
737
|
-
In beta.
|
|
763
|
+
In beta.28 conditional custom-field requiredness is left to the backend and
|
|
738
764
|
not all hosted-checkout conditional visibility is reproduced. Verify the
|
|
739
765
|
actual event against the deployed checkout, including blanks, images, holder
|
|
740
766
|
scoping and validation errors; do not claim parity from the presence of a
|
|
@@ -755,7 +781,7 @@ unknown; `reloadCheckoutDetails()` can also retry the waiver read. A retained
|
|
|
755
781
|
order with a possible payment follows separate recovery and needs reconciliation.
|
|
756
782
|
`WaiverSigning` handles the SDK's signing flow.
|
|
757
783
|
|
|
758
|
-
**Consent limitation in beta.
|
|
784
|
+
**Consent limitation in beta.28:** when `privacyPolicy` is supplied, the
|
|
759
785
|
stock `BillingInfo` replaces the Ticket Fairy marketing checkbox with the
|
|
760
786
|
required privacy checkbox, but both use `consent.ttfOptIn`; the order sends
|
|
761
787
|
that value as `ttf_opt_in`. The privacy acknowledgement and Ticket Fairy
|
|
@@ -1008,6 +1034,52 @@ a full account user. Supply a host sign-in/route callback where applicable.
|
|
|
1008
1034
|
| `PostReaction` | `postId: string \| number`, `onSignIn?`. `PostReactionControls` accepts `flow` and `onSignIn?`. |
|
|
1009
1035
|
| `DiscoveryTravel` | `searchCities`, `searchEvents`, `storage?`, `locale?`. Host supplies search functions; see `DiscoveryTravelProps` for their signatures. |
|
|
1010
1036
|
|
|
1037
|
+
#### Example: ready-made account screens
|
|
1038
|
+
|
|
1039
|
+
The following setup is for an authorized **first-party** full-account
|
|
1040
|
+
integration with the corresponding deployed account routes. In that host's initial
|
|
1041
|
+
[SDK configuration](#configuration-and-sessions), set `accountAuth: true` and
|
|
1042
|
+
`cookieAuth: true`, then complete the approved full-account sign-in and any
|
|
1043
|
+
required proof challenges before mounting them. The checkout-only quick start
|
|
1044
|
+
uses a sign-in path scoped to the event, which is not sufficient. Add the options
|
|
1045
|
+
to the one-time setup; do not reconfigure from this screen.
|
|
1046
|
+
|
|
1047
|
+
The flags do not grant account access or enable backend routes. Third-party
|
|
1048
|
+
integrations need an explicitly approved, supported account journey; contact
|
|
1049
|
+
Ticket Fairy to find out whether one is available. The example assumes the
|
|
1050
|
+
existing `QueryClientProvider` is mounted and the backend supports these screens.
|
|
1051
|
+
The host supplies navigation callbacks. `ProfileSettings` and
|
|
1052
|
+
`NotificationPreferences` receive `signIn`; `AccountRewardsSection` has no
|
|
1053
|
+
sign-in callback and only displays a message while signed out. The host must
|
|
1054
|
+
detect session expiry and offer sign-in separately for rewards.
|
|
1055
|
+
|
|
1056
|
+
```tsx
|
|
1057
|
+
import {
|
|
1058
|
+
AccountRewardsSection, NotificationPreferences, ProfileSettings,
|
|
1059
|
+
} from 'tf-checkout-react'
|
|
1060
|
+
|
|
1061
|
+
export function AccountScreen({ screen, goBack, signIn, browseEvents, viewTickets }: {
|
|
1062
|
+
screen: 'visibility' | 'notifications' | 'rewards'
|
|
1063
|
+
goBack: () => void
|
|
1064
|
+
signIn: () => void
|
|
1065
|
+
browseEvents: () => void
|
|
1066
|
+
viewTickets: () => void
|
|
1067
|
+
}) {
|
|
1068
|
+
if (screen === 'visibility') return (
|
|
1069
|
+
<ProfileSettings mode="visibility" onBack={goBack} onSignIn={signIn} />
|
|
1070
|
+
)
|
|
1071
|
+
if (screen === 'notifications') return (
|
|
1072
|
+
<NotificationPreferences onBack={goBack} onSignIn={signIn} />
|
|
1073
|
+
)
|
|
1074
|
+
return <AccountRewardsSection onBrowseEvents={browseEvents} onViewTickets={viewTickets} />
|
|
1075
|
+
}
|
|
1076
|
+
```
|
|
1077
|
+
|
|
1078
|
+
Use `mode="links"` for profile links. These components do not replace an orders
|
|
1079
|
+
list or establish account authorization. Scope or clear account queries when the
|
|
1080
|
+
buyer signs out or changes, and handle loading, sign-in and navigation in the
|
|
1081
|
+
host as needed.
|
|
1082
|
+
|
|
1011
1083
|
For account orders and ticket lists use `hooks.useOrders`, `hooks.useOrder`,
|
|
1012
1084
|
`ttf.orders.list`, `ttf.orders.get` or `ttf.orders.myTickets`. In this version
|
|
1013
1085
|
`ttf.orders.get` / `useOrder` take a **numeric order ID string**, not a public
|
|
@@ -1242,7 +1314,7 @@ existing 1.x integration pinned until the new flow and backend are verified.
|
|
|
1242
1314
|
There is no automatic translation of old URLs, component props, account
|
|
1243
1315
|
sessions or persisted 1.x state.
|
|
1244
1316
|
|
|
1245
|
-
| 1.x integration | 2.0.0-beta.
|
|
1317
|
+
| 1.x integration | 2.0.0-beta.28 approach |
|
|
1246
1318
|
| --- | --- |
|
|
1247
1319
|
| `setConfigs({ BASE_URL, ... })` | `configureCheckout({ env` or `baseUrl`, `clientId`, `clientSecret: ''`, ... `})`; public client registration and session setup are required. |
|
|
1248
1320
|
| `TicketsContainer`, `SeatMapContainer`, `AddOnsContainer` | `EmbeddedCheckout` or `Tickets`, `SeatMap`, `AddOns` under `CheckoutProvider`. Adapt callbacks and navigation. |
|