tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/sections/OrderSummary.tsx

@@ -0,0 +1,84 @@
+import React, { type FC } from 'react'
+
+import { hooks } from 'tf-checkout-shared'
+
+import { Card } from '../ui/Card'
+import { useCheckoutContext } from '../ui/CheckoutProvider'
+
+export interface OrderSummaryProps {
+  eventId?: string
+  className?: string
+}
+
+/** Storefront-compatible order summary shown after the checkout controls. */
+export const OrderSummary: FC<OrderSummaryProps> = ({ eventId, className }) => {
+  const checkout = useCheckoutContext()
+  const event = hooks.useEvent(eventId)
+  const breakdown = checkout.breakdown
+  const detailed = checkout.priceBreakdown
+
+  if (!breakdown || breakdown.tickets.length === 0) return null
+
+  return (
+    <Card className={['tf-checkout-order-summary', className].filter(Boolean).join(' ')}>
+      {event.data?.name && (
+        <div className="tf-checkout-order-summary__group">
+          <div className="tf-checkout-order-summary__label">Event</div>
+          <div className="tf-checkout-order-summary__event">{event.data.name}</div>
+        </div>
+      )}
+
+      <div className="tf-checkout-order-summary__group">
+        <div className="tf-checkout-order-summary__label">Your Tickets</div>
+        {breakdown.tickets.map((ticket, index) => {
+          const detail = detailed?.tickets[index]
+          return (
+            <div
+              key={`${ticket.ticketTypeId}-${index}`}
+              className="tf-checkout-order-summary__item"
+            >
+              <div className="tf-checkout-order-summary__ticket">
+                {ticket.quantity} x {ticket.name} - {detail?.unit_price ?? ticket.unit}{' '}
+                each
+              </div>
+              {detail?.line_total && detail.line_total !== detail.unit_price && (
+                <div className="tf-checkout-order-summary__fees">
+                  ({detail.line_total} with fees)
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      {(detailed?.add_ons.length ?? 0) > 0 && (
+        <div className="tf-checkout-order-summary__group">
+          <div className="tf-checkout-order-summary__label">
+            {detailed?.add_ons_title || 'Add-ons'}
+          </div>
+          {detailed?.add_ons.map((addOn, index) => (
+            <div
+              key={`${addOn.name}-${index}`}
+              className="tf-checkout-order-summary__item"
+            >
+              <div className="tf-checkout-order-summary__ticket">
+                {addOn.quantity} x {addOn.name}
+                {addOn.show_price ? ` - ${addOn.unit_price} each` : ''}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="tf-checkout-order-summary__total">
+        <div className="tf-checkout-order-summary__label">Total</div>
+        <div className="tf-checkout-order-summary__amount">
+          {detailed?.total ??
+            `${breakdown.currencySymbol || `${breakdown.currencyCode} `}${Number(
+              breakdown.total
+            ).toFixed(2)}`}
+        </div>
+      </div>
+    </Card>
+  )
+}

package/src/sections/Payment.tsx

@@ -0,0 +1,541 @@
+/**
+ * `<Payment/>` — order review + payment-method selection + T&C, then place the
+ * order. Buyer details come from `<BillingInfo/>` (read back off the shared
+ * checkout). The method list is built from the event's gateway + `preOrderMethods()`
+ * + the priced snapshot, and each selection maps to the right `placeOrder` rail
+ * (Stripe card, Xendit card/e-wallet, PayPal, redirect rails, payment plan).
+ */
+import React, { useEffect, useMemo, useRef, useState, type FC } from 'react'
+
+import {
+  XENDIT_EWALLET_EXTRA_FIELD,
+  errorMessage,
+  missingCheckoutDetails,
+  paymentPlanTerms,
+  planConfirmLabel,
+  planTermsTitle,
+  ttf,
+  type EventCondition,
+  type PaymentRequest,
+  type PlaceOrderResult,
+} from 'tf-checkout-shared'
+
+import { CardInput, StripePaymentElement, XenditCardInput } from '../CardInput'
+import { Button } from '../ui/Button'
+import { Card, SectionHeader } from '../ui/Card'
+import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
+import { Checkbox } from '../ui/Field'
+import { cx } from '../ui/cx'
+import { Loader } from '../ui/Loader'
+import { PaymentMethods, type PaymentMethodOption } from '../ui/PaymentMethods'
+import { OrderSummary } from './OrderSummary'
+
+type PreOrderMethods = Awaited<ReturnType<typeof ttf.cart.preOrderMethods>>
+
+/** Server spellings → display labels for Stripe redirect rails. */
+const REDIRECT_LABELS: Record<string, string> = {
+  klarna: 'Klarna',
+  afterpay_clearpay: 'Afterpay / Clearpay',
+  affirm: 'Affirm',
+  ideal: 'iDEAL',
+  bancontact: 'Bancontact',
+  eps: 'EPS',
+  giropay: 'giropay',
+  p24: 'Przelewy24',
+  alipay: 'Alipay',
+  grabpay: 'GrabPay',
+  cashapp: 'Cash App Pay',
+  paypal: 'PayPal',
+}
+const redirectLabel = (t: string) =>
+  REDIRECT_LABELS[t] ?? t.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+
+const isCardFieldError = (message: string) =>
+  /(?:card|expiry|expiration|security code|cvc).*(?:incomplete|required|invalid)|(?:incomplete|required|invalid).*(?:card|expiry|expiration|security code|cvc)/i.test(
+    message
+  )
+
+/**
+ * Anything the buyer would fix AT THE CARD FIELD — a bad number, a wrong CVC,
+ * an expired or declined card, missing details. These belong beside the card
+ * box; only order-level problems (conditions, billing, network) belong down by
+ * the pay button, where a card message is easy to miss entirely.
+ */
+const isCardAreaError = (message: string) =>
+  isCardFieldError(message) ||
+  /card details|security code|cvc|cvv|expired|declined|not accepted|balance|stolen|inactive|authentication failed|name on the card|different card/i.test(
+    message
+  )
+
+export interface PaymentProps {
+  onComplete?: (order: PlaceOrderResult) => void
+  /** Optional event context adds the event name to the order review. */
+  eventId?: string
+  /** Must match the policy used by the paired `<BillingInfo/>`. */
+  requireEmailConfirmation?: boolean
+  /** Must match the holder policy used by the paired `<BillingInfo/>`. */
+  collectTicketHolders?: boolean
+  /** Must match the holder-contact policy used by the paired `<BillingInfo/>`. */
+  requireHolderContact?: boolean
+  /** Host-owned acknowledgements such as a brand privacy policy. */
+  additionalConditions?: EventCondition[]
+  /** Require the privacy checkbox managed by BillingInfo before payment. */
+  requirePrivacyPolicy?: boolean
+  /** Called when payment is attempted before required privacy consent. */
+  onPrivacyRequired?: () => void
+  /** Test card copy is useful in examples, but should never appear by default. */
+  showTestCardHint?: boolean
+  className?: string
+}
+
+export const Payment: FC<PaymentProps> = ({
+  onComplete,
+  eventId,
+  requireEmailConfirmation = false,
+  collectTicketHolders = false,
+  requireHolderContact = false,
+  additionalConditions = [],
+  requirePrivacyPolicy = false,
+  onPrivacyRequired,
+  showTestCardHint = false,
+  className,
+}) => {
+  const checkout = useCheckoutContext()
+  const validation = useCheckoutValidation()
+  const [error, setError] = useState('')
+  /** Field-level problem reported by `<XenditCardInput/>` (it renders none). */
+  const [cardFieldError, setCardFieldError] = useState<string | null>(null)
+  /** Card problem from the last pay attempt (declined, wrong CVC, expired…). */
+  const [payCardError, setPayCardError] = useState<string | null>(null)
+  /** True once the buyer edits the card after a failed attempt — their fix
+   *  supersedes both our message and the engine's stale one. */
+  const [cardEditedSincePay, setCardEditedSincePay] = useState(true)
+  const [methods, setMethods] = useState<PreOrderMethods | null>(null)
+  const [selected, setSelected] = useState('')
+  const [extras, setExtras] = useState<
+    Record<string, { cashtag?: string; phoneNumber?: string }>
+  >({})
+  const [useSavedCard, setUseSavedCard] = useState(true)
+  const cardSectionRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    let active = true
+    ttf.cart
+      .preOrderMethods()
+      .then((m) => active && setMethods(m))
+      .catch(() => active && setMethods(null))
+    return () => {
+      active = false
+    }
+  }, [])
+
+  const bd = checkout.breakdown
+  const isFree = bd != null && Number(bd.total) === 0
+  const isXendit = checkout.gateway === 'xendit'
+
+  // Build the selectable method rows from gateway + probe + snapshot.
+  const options = useMemo<PaymentMethodOption[]>(() => {
+    if (isFree || !methods) return []
+    const out: PaymentMethodOption[] = []
+    if (isXendit) {
+      if (methods.xenditCard)
+        out.push({ id: { kind: 'xenditCard' }, value: 'xenditCard', label: 'Card' })
+      for (const w of methods.xenditEWallets)
+        out.push({
+          id: { kind: 'xenditEWallet', walletKey: w.key },
+          value: `ew:${w.key}`,
+          label: w.label,
+          iconUrl: w.icon,
+          extra: (XENDIT_EWALLET_EXTRA_FIELD[w.key] as 'cashtag' | 'phoneNumber') ?? null,
+        })
+    } else if (checkout.gateway === 'razorpay') {
+      out.push({ id: { kind: 'razorpay' }, value: 'razorpay', label: 'Razorpay' })
+    } else {
+      // Stripe (or unknown → fail open to card).
+      out.push({ id: { kind: 'card' }, value: 'card', label: 'Card' })
+      for (const t of checkout.redirectPaymentMethods ?? []) {
+        if (t === 'paypal' && methods.paypal) continue // dedupe vs PayPal Standard
+        out.push({
+          id: { kind: 'redirect', methodType: t },
+          value: `rd:${t}`,
+          label: redirectLabel(t),
+        })
+      }
+      if (checkout.paymentPlan?.available)
+        out.push({
+          id: { kind: 'paymentPlan' },
+          value: 'paymentPlan',
+          label: 'Payment plan',
+        })
+      // OXXO cash voucher — Mexico only, and never listed in redirect methods.
+      if (checkout.breakdown?.currencyCode === 'MXN')
+        out.push({ id: { kind: 'oxxo' }, value: 'oxxo', label: 'OXXO (pay in cash)' })
+    }
+    if (methods.paypal)
+      out.push({ id: { kind: 'paypal' }, value: 'paypal', label: 'PayPal' })
+    return out
+  }, [
+    isFree,
+    methods,
+    isXendit,
+    checkout.gateway,
+    checkout.redirectPaymentMethods,
+    checkout.paymentPlan,
+    checkout.breakdown,
+  ])
+
+  // Default the selection to the first row once options exist.
+  useEffect(() => {
+    if (options.length && !options.some((o) => o.value === selected))
+      setSelected(options[0].value)
+  }, [options, selected])
+
+  const cardValue = isXendit ? 'xenditCard' : 'card'
+  const selectedOption = options.find((o) => o.value === selected)
+  const isCardSelected = selected === cardValue
+  const isPlanSelected = selectedOption?.id.kind === 'paymentPlan'
+  const savedLast4 = checkout.paymentPlan?.savedCardLast4
+  /**
+   * "Reuse the card on file" only means something when there IS one. The raw
+   * `useSavedCard` toggle defaults to true (matching the hosted default-checked
+   * box), so reading it directly made a first-time buyer look like a returning
+   * one: `inputSlotFor` collapsed to undefined, the card field and the plan
+   * terms never mounted, and "Confirm Payment Plan" then failed in the
+   * confirmer with "No card element registered". Always gate on the card.
+   */
+  const reuseSavedCard = Boolean(savedLast4) && useSavedCard
+  const usesCardDetails = !isFree && (isCardSelected || (isPlanSelected && !reuseSavedCard))
+  // Stripe's CardElement renders its own inline "Card number is invalid" text, so
+  // the pay handler can stay quiet and just scroll to it. Xendit's card form is
+  // three plain inputs with no error slot — there, the message MUST be shown or
+  // a declined/invalid card looks like the button simply did nothing.
+  const cardWidgetReportsItsOwnError = usesCardDetails && !isXendit
+
+  // Wallets the old-checkout way: when the event's `stripe_wallets` gate is on,
+  // render the Payment Element (card + Apple/Google Pay in one widget) instead of
+  // the bare card field. Held back for MXN so the CardElement-based MSI path
+  // (Mexican months-without-interest) keeps working — matching old, which didn't
+  // run MSI off its web Payment Element either.
+  const hasWallets = Boolean(
+    checkout.walletAvailability?.applePay || checkout.walletAvailability?.googlePay
+  )
+  // A payment plan NEVER rides the wallet element, matching the hosted flow's
+  // `wallets: planMode ? { applePay: 'never', googlePay: 'never' }`. Two
+  // reasons, both load-bearing:
+  //   1. A plan charges installments off-session, so it needs a REUSABLE card.
+  //      Wallet tokens are typically single-use and can't be charged later.
+  //   2. Mechanically: the plan rail confirms via `confirmer.getCardElement()`,
+  //      which only exists for `<CardInput/>`. The Payment Element registers
+  //      itself through `registerPaymentElement` instead, so mounting it here
+  //      made `confirmPaymentPlanSetup` throw "No card element registered" —
+  //      the plan could never be completed on a wallet-enabled event.
+  const useWalletElement =
+    !isXendit &&
+    !isPlanSelected &&
+    hasWallets &&
+    checkout.breakdown?.currencyCode !== 'MXN' &&
+    Boolean((checkout.stripeElementsConfig as { mode?: unknown } | undefined)?.mode)
+
+  // When there's only ONE way to pay and it's a card, there's nothing to
+  // *choose* — the old checkout just showed the card form, no radio wrapper.
+  // Render the field directly; keep the radio list only when there's a choice.
+  const onlyOption = options.length === 1 ? options[0] : undefined
+  const singleCard =
+    onlyOption?.id.kind === 'card' || onlyOption?.id.kind === 'xenditCard'
+
+  // Gating: buyer + every configured holder/custom field complete, required
+  // conditions accepted, and payment-method extras filled.
+  const b = checkout.billing
+  const missingDetails = missingCheckoutDetails(
+    {
+      billing: b,
+      holders: checkout.holders,
+      selections: checkout.selections,
+      breakdown: checkout.breakdown,
+      holderNamesRequired: checkout.holderNamesRequired,
+      fieldGates: checkout.fieldGates,
+      customFields: checkout.customFields,
+    },
+    { requireEmailConfirmation, collectTicketHolders, requireHolderContact }
+  )
+  const billingReady = missingDetails.length === 0
+  const conditions = [...(checkout.conditions ?? []), ...additionalConditions]
+  const requiredConditions = conditions.filter((c) => c.isRequired)
+  const conditionsOk = requiredConditions.every(
+    (c) => checkout.acceptedConditions?.[c.id]
+  )
+  const extra = selectedOption?.extra
+  const extrasOk =
+    !extra ||
+    (extra === 'cashtag'
+      ? Boolean(extras[selected]?.cashtag?.trim())
+      : Boolean(extras[selected]?.phoneNumber?.trim()))
+  const privacyOk = !requirePrivacyPolicy || checkout.consent.ttfOptIn
+  // The plan CTA carries the brand's terminology ("Confirm Layaway"), and the
+  // terms sentence quotes this same label — they must agree.
+  const payLabel = isFree
+    ? 'Complete Registration'
+    : isPlanSelected
+      ? planConfirmLabel(checkout.paymentPlan?.configuration)
+      : 'Submit Payment'
+  const planTerms = paymentPlanTerms(checkout.paymentPlan?.configuration)
+  // 'placing' → order in flight; 'succeeded' → placed, host navigating away.
+  // Both keep the CTA busy so it can't be re-clicked during the handoff.
+  const finalizing = checkout.status === 'placing' || checkout.status === 'succeeded'
+
+  const pay = () => {
+    setError('')
+    setPayCardError(null)
+    setCardEditedSincePay(false)
+    if (!billingReady || !conditionsOk || !extrasOk || !privacyOk) {
+      if (!privacyOk) onPrivacyRequired?.()
+      validation.requestValidation()
+      return
+    }
+    // Backfill one holder per ticket if billing was set without holders.
+    if (checkout.holders.length === 0 && b) {
+      const n = checkout.selections.reduce((acc, s) => acc + s.quantity, 0) || 1
+      checkout.setHolders(
+        Array.from({ length: n }, () => ({
+          firstName: b.firstName,
+          lastName: b.lastName,
+          email: b.email,
+        }))
+      )
+    }
+    let req: PaymentRequest = { method: 'auto' }
+    const id = selectedOption?.id
+    if (isFree || !id) req = { method: 'auto' }
+    else if (id.kind === 'xenditEWallet')
+      req = { method: 'xenditEWallet', walletKey: id.walletKey, extra: extras[selected] }
+    else if (id.kind === 'redirect')
+      req = { method: 'redirect', methodType: id.methodType }
+    else if (id.kind === 'paymentPlan')
+      req = { method: 'paymentPlan', useSavedCard: reuseSavedCard }
+    else req = { method: id.kind } as PaymentRequest
+    // NOTE: called synchronously in the click handler — popup rails (e-wallet,
+    // redirect, razorpay, paypal) need the user gesture or the browser blocks them.
+    checkout
+      .placeOrder(req)
+      .then((order) => onComplete?.(order))
+      .catch((e) => {
+        const message = errorMessage(e)
+        if (usesCardDetails && isCardAreaError(message)) {
+          const behavior = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+            ? 'auto'
+            : 'smooth'
+          cardSectionRef.current?.scrollIntoView({ behavior, block: 'center' })
+          // Stripe's CardElement prints the message inside its own widget, so
+          // scrolling to it is enough. Ours doesn't — show it AT the card box,
+          // not down by the button where it reads as an unrelated failure.
+          if (cardWidgetReportsItsOwnError) return
+          setPayCardError(message)
+          return
+        }
+        setError(message)
+      })
+  }
+
+  // A card problem surfaced by the engine belongs at the box too, not under the
+  // pay button — same rule as the ones we catch in `pay()`.
+  // Whether the engine's error is a CARD problem at all. This must not depend on
+  // whether the buyer has since edited: the edit decides if we still SHOW it, it
+  // must never decide whether it may fall through to the button (it may not — a
+  // card error belongs at the card, always).
+  const engineErrorIsCardArea = Boolean(
+    isXendit && checkout.error && isCardAreaError(checkout.error)
+  )
+  const engineCardError =
+    engineErrorIsCardArea && !cardEditedSincePay ? checkout.error : ''
+  // The buyer's live field state wins over a stale decline from a past attempt.
+  const cardAreaError = cardFieldError || payCardError || engineCardError
+  const checkoutError =
+    checkout.error &&
+    !(cardWidgetReportsItsOwnError && isCardFieldError(checkout.error)) &&
+    !engineErrorIsCardArea
+      ? checkout.error
+      : ''
+  // Single gate for the message under the pay button: whatever the source, a
+  // card problem is shown at the card and NEVER duplicated down here.
+  const bottomMessage = error || checkoutError
+  const bottomError =
+    bottomMessage && isXendit && isCardAreaError(bottomMessage) ? '' : bottomMessage
+
+  // The card/plan field + its note + plan terms. Rendered inside the selected
+  // method row when there's a choice, or directly when there's only a card.
+  const paymentInput = (
+    <>
+      {(isCardSelected || (isPlanSelected && !reuseSavedCard)) && (
+        <>
+          {useWalletElement ? (
+            // The Payment Element frames itself — don't box it again.
+            <div ref={cardSectionRef} className="tf-checkout-payment__element">
+              <StripePaymentElement
+                elementsConfig={checkout.stripeElementsConfig}
+                wallets={checkout.walletAvailability}
+              />
+            </div>
+          ) : (
+            <div
+              ref={cardSectionRef}
+              className={cx(
+                'tf-checkout-payment__cardbox',
+                isXendit && cardAreaError && 'tf-checkout-payment__cardbox--invalid'
+              )}
+            >
+              {isXendit ? (
+                <XenditCardInput
+                  onValidationChange={(m) => {
+                    setCardFieldError(m)
+                    // Any edit supersedes the previous attempt's verdict — the
+                    // buyer shouldn't be told a number is invalid while they're
+                    // typing a valid one.
+                    setPayCardError(null)
+                    setCardEditedSincePay(true)
+                  }}
+                />
+              ) : (
+                <CardInput />
+              )}
+            </div>
+          )}
+          {/* Below the box, not inside it — Stripe prints its own message within
+              its iframe, but the Xendit fields are ours to caption. */}
+          {isXendit && cardAreaError && (
+            <p className="tf-checkout-error-text">{cardAreaError}</p>
+          )}
+          {showTestCardHint && (
+            <p className="tf-checkout-note">
+              {isXendit
+                ? 'Test card: 4000 0000 0000 0002 · any future date · any CVC'
+                : 'Test card: 4242 4242 4242 4242 · any future date · any CVC'}
+            </p>
+          )}
+        </>
+      )}
+      {/* The full hosted terms block. Composed in the SDK so web and native
+          state the identical schedule, admin fee and non-refundable clause —
+          these are disclosures, not summary copy. */}
+      {isPlanSelected && planTerms.length > 0 && (
+        <div className="tf-checkout-payment__plan">
+          <strong>{planTermsTitle(checkout.paymentPlan!.configuration!)}</strong>
+          {planTerms.map((part) => (
+            <p key={part.id} className="tf-checkout-note">
+              {part.text}
+            </p>
+          ))}
+        </div>
+      )}
+      {/* Returning plan buyer with a reusable card on file. Ticked by default,
+          and when it stays ticked the card fields never mount — the plan is
+          created straight off the saved payment method, like the hosted flow. */}
+      {isPlanSelected && savedLast4 && (
+        <div className="tf-checkout-payment__plan-savedcard">
+          <p className="tf-checkout-note">
+            Your payment will proceed with the card ending in{' '}
+            <strong>**** {savedLast4}</strong>
+          </p>
+          <Checkbox
+            checked={useSavedCard}
+            onChange={(e) => setUseSavedCard(e.target.checked)}
+            label="Use this card"
+          />
+        </div>
+      )}
+    </>
+  )
+
+  return (
+    <div className={['tf-checkout-payment-stack', className].filter(Boolean).join(' ')}>
+      <Card>
+        <SectionHeader title="Payment" />
+
+        {/* Payment method */}
+        {!isFree && (
+          <>
+            {!singleCard && (
+              <div className="tf-checkout-payment__label">Payment method</div>
+            )}
+            {!methods ? (
+              <div className="tf-checkout-payment__cardbox">
+                <Loader />
+              </div>
+            ) : singleCard ? (
+              paymentInput
+            ) : (
+              <PaymentMethods
+                options={options}
+                selected={selected}
+                onSelect={setSelected}
+                extraValues={extras}
+                onExtraChange={(v, patch) =>
+                  setExtras((s) => ({ ...s, [v]: { ...s[v], ...patch } }))
+                }
+                showValidation={validation.attempt > 0}
+                /**
+                 * The plan row ALWAYS owns the slot when it's selected. This
+                 * used to be conditional on needing a card field, which meant a
+                 * returning buyer reusing their saved card got `undefined` — and
+                 * `undefined` renders the children nowhere, so the plan terms
+                 * AND the "card ending in ****" block both vanished. The card
+                 * field inside is separately gated on `!reuseSavedCard`, so the
+                 * slot itself never needs to be.
+                 */
+                inputSlotFor={isPlanSelected ? 'paymentPlan' : cardValue}
+              >
+                {paymentInput}
+              </PaymentMethods>
+            )}
+          </>
+        )}
+
+        {/* Conditions */}
+        {conditions.map((c) => {
+          const invalid =
+            validation.attempt > 0 && c.isRequired && !checkout.acceptedConditions?.[c.id]
+          return (
+            <div
+              key={c.id}
+              className={invalid ? 'tf-checkout-consent--error' : undefined}
+              data-checkout-invalid={invalid || undefined}
+            >
+              <Checkbox
+                required={c.isRequired}
+                checked={Boolean(checkout.acceptedConditions?.[c.id])}
+                aria-invalid={invalid}
+                onChange={(e) => checkout.acceptCondition(c.id, e.target.checked)}
+                label={
+                  <>
+                    <span dangerouslySetInnerHTML={{ __html: c.content || c.name }} />
+                    {c.isRequired && ' *'}
+                  </>
+                }
+              />
+              {invalid && (
+                <div className="tf-checkout-consent__error">
+                  You must accept this condition to continue.
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </Card>
+
+      <OrderSummary eventId={eventId} />
+
+      <div className="tf-checkout-payment__cta">
+        <Button
+          onClick={pay}
+          // Stay busy through 'succeeded' too: in redirect mode the checkout
+          // remains mounted while the host navigates away, so the button must
+          // not flicker back to a clickable state before the redirect lands.
+          loading={finalizing}
+          disabled={checkout.isBusy || finalizing || (!isFree && !methods)}
+        >
+          {finalizing ? 'Placing…' : payLabel}
+        </Button>
+      </div>
+      {bottomError && <p className="tf-checkout-error-text">{bottomError}</p>}
+    </div>
+  )
+}