tf-checkout-react 1.7.31 → 2.0.0-beta.1

package/src/confirmer.ts

@@ -0,0 +1,439 @@
+/**
+ * Web (stripe-js) adapter of the SDK's PaymentConfirmer port — the proof that
+ * the engine in `tf-checkout-shared` is genuinely platform-free. Bind it via
+ * `useCheckout({ ports: { confirmer: webConfirmer, ...webPorts } })` to run the
+ * exact same cart → order → charge → finalize sequence React Native runs (same
+ * retry-safety invariants, same duplicate-charge guards, same tests).
+ *
+ * Card payments on the web confirm against a Stripe Element the consumer
+ * renders: register it via `confirmer.registerCardElement(element)` before
+ * placing the order. Apple Pay is not bound on web yet (the web equivalent is
+ * the Payment Request button, a different integration) — `confirmApplePay`
+ * throws with a clear message.
+ */
+import {
+  loadStripe,
+  type Stripe,
+  type StripeCardElement,
+  type StripeElements,
+} from '@stripe/stripe-js'
+import type {
+  CheckoutBilling,
+  CheckoutPorts,
+  PaymentConfirmer,
+} from 'tf-checkout-shared'
+
+import type { WebXenditTokenizer } from './xendit'
+
+/**
+ * stripe-js reports PaymentIntent statuses in snake_case; the port's
+ * vocabulary is the RN SDK's PascalCase. Normalize so
+ * CONFIRMED_INTENT_STATUSES matches on both platforms.
+ */
+const normalizeStatus = (status?: string): string | undefined => {
+  if (!status) return undefined
+  const map: Record<string, string> = {
+    succeeded: 'Succeeded',
+    requires_capture: 'RequiresCapture',
+    processing: 'Processing',
+    requires_payment_method: 'RequiresPaymentMethod',
+    requires_confirmation: 'RequiresConfirmation',
+    requires_action: 'RequiresAction',
+    canceled: 'Canceled',
+  }
+  return map[status] ?? status
+}
+
+export interface WebStripeConfirmer extends PaymentConfirmer {
+  /** The card Element the consumer rendered — required before confirmCard. */
+  registerCardElement(element: StripeCardElement | null): void
+  /** The currently registered card Element (null before registration) —
+   *  the MSI port creates its PaymentMethod from it. */
+  getCardElement(): StripeCardElement | null
+  /**
+   * The Elements GROUP backing a `<StripePaymentElement/>` (deferred mode).
+   * This is how the old checkout did wallets: when a Payment Element is
+   * registered, `confirmCard` confirms card + Apple Pay + Google Pay through it
+   * (`elements.submit()` + `stripe.confirmPayment`), exactly as the old
+   * `useStripePayment.processPayment` did. Null when only a bare card is rendered.
+   */
+  registerPaymentElement(elements: StripeElements | null): void
+  getPaymentElement(): StripeElements | null
+  /**
+   * The live Stripe instance (null before the flow calls init). Elements MUST
+   * be created from this instance — stripe-js rejects confirming with an
+   * Element born from a different one:
+   * `confirmer.getStripe()!.elements().create('card')`.
+   */
+  getStripe(): Stripe | null
+  /** Resolves with the Stripe instance as soon as init() has run — mount UI
+   *  against this instead of polling getStripe(). */
+  whenReady(): Promise<Stripe>
+}
+
+export const createWebStripeConfirmer = (): WebStripeConfirmer => {
+  let stripe: Stripe | null = null
+  let initKey: string | null = null
+  let cardElement: StripeCardElement | null = null
+  let paymentElements: StripeElements | null = null
+  let readyResolve: (s: Stripe) => void
+  let ready = new Promise<Stripe>((r) => (readyResolve = r))
+
+  const requireStripe = (): Stripe => {
+    if (!stripe) {
+      throw new Error(
+        'Stripe is not initialized — the flow calls confirmer.init() first.'
+      )
+    }
+    return stripe
+  }
+
+  return {
+    registerCardElement: (element) => {
+      cardElement = element
+    },
+
+    getCardElement: () => cardElement,
+
+    registerPaymentElement: (elements) => {
+      paymentElements = elements
+    },
+
+    getPaymentElement: () => paymentElements,
+
+    getStripe: () => stripe,
+
+    whenReady: () => ready,
+
+    init: async ({ publishableKey, accountId }) => {
+      // Re-init only when the key/account pair changes (events on connected
+      // accounts each need their own instance).
+      const key = `${publishableKey}:${accountId ?? ''}`
+      if (stripe && initKey === key) return
+      stripe = await loadStripe(
+        publishableKey,
+        accountId ? { stripeAccount: accountId } : undefined
+      )
+      if (!stripe) throw new Error('Failed to load Stripe.js.')
+      initKey = key
+      readyResolve(stripe)
+      // subsequent inits (new key) refresh the promise for late mounts
+      ready = Promise.resolve(stripe)
+    },
+
+    getIntentStatus: async (clientSecret) => {
+      const { paymentIntent } = await requireStripe().retrievePaymentIntent(clientSecret)
+      return normalizeStatus(paymentIntent?.status)
+    },
+
+    confirmCard: async (clientSecret, billing: CheckoutBilling) => {
+      // Wallet-capable path — the way the OLD checkout confirmed. When a
+      // `<StripePaymentElement/>` is mounted, the buyer may have picked card OR
+      // Apple/Google Pay INSIDE the widget; a single `elements.submit()` +
+      // `stripe.confirmPayment({ elements, clientSecret })` settles whichever it
+      // is (`useStripePayment.processPayment`). Billing is left to the element —
+      // matching old, and avoiding Stripe's "collected in both places" error.
+      if (paymentElements) {
+        const { error: submitError } = await paymentElements.submit()
+        if (submitError) throw new Error(submitError.message || 'Payment failed.')
+        const returnUrl =
+          window.location.href +
+          (window.location.href.includes('?') ? '&' : '?') +
+          'payment_return=true'
+        const { error, paymentIntent } = await requireStripe().confirmPayment({
+          clientSecret,
+          elements: paymentElements,
+          confirmParams: { return_url: returnUrl },
+          // Card + wallets settle in place; only a redirect method navigates away.
+          redirect: 'if_required',
+        })
+        if (error) throw new Error(error.message || 'Payment failed.')
+        return normalizeStatus(paymentIntent?.status)
+      }
+
+      // Bare-card fallback (no wallets / MSI events): the current CardElement path.
+      if (!cardElement) {
+        throw new Error(
+          'No card element registered — call confirmer.registerCardElement(element) with the CardElement you rendered.'
+        )
+      }
+      const { error, paymentIntent } = await requireStripe().confirmCardPayment(
+        clientSecret,
+        {
+          payment_method: {
+            card: cardElement,
+            billing_details: {
+              email: billing.email,
+              name: `${billing.firstName} ${billing.lastName}`.trim(),
+              phone: billing.phone || undefined,
+            },
+          },
+        }
+      )
+      if (error) throw new Error(error.message || 'Payment failed.')
+      return normalizeStatus(paymentIntent?.status)
+    },
+
+    confirmApplePay: async () => {
+      throw new Error(
+        'Apple Pay is not bound on web yet — use the card flow, or bind a Payment Request confirmer.'
+      )
+    },
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Web bindings of the engine's alternative-rail ports
+// ---------------------------------------------------------------------------
+
+const stripeBillingDetails = (billing: CheckoutBilling) => ({
+  email: billing.email,
+  name: `${billing.firstName} ${billing.lastName}`.trim(),
+  phone: billing.phone || undefined,
+  address: {
+    line1: billing.streetAddress || undefined,
+    city: billing.city || undefined,
+    postal_code: billing.zip || undefined,
+    // Stripe wants ISO-2 — CheckoutBilling.countryCode/stateCode carry it when
+    // the consumer resolved them (backend countryId/stateId are numeric);
+    // providers that require it still collect it on their own page otherwise.
+    country: billing.countryCode || undefined,
+    state: billing.stateCode || undefined,
+  },
+})
+
+/**
+ * The web half of the engine's `CheckoutPorts`:
+ *
+ * - `providerPage` runs the provider in a POPUP and resolves when navigation
+ *   lands back on `returnUrlPrefix` (same-origin, so the URL is readable);
+ *   a closed popup resolves as 'dismiss'. Call `placeOrder` from a click
+ *   handler, or the browser's popup blocker will refuse the window.
+ * - `confirmOxxo` / `createCardPaymentMethod` / `createRedirectPaymentMethod`
+ *   / `handleNextAction` bind the same Stripe legs the RN ports bind.
+ *
+ * MSI's `onInstallmentOffers` picker stays consumer-supplied (pass it via
+ * `placeOrder(request, ports)`).
+ */
+export const createWebPorts = (
+  confirmer: WebStripeConfirmer,
+  /** The Xendit card tokenizer `<XenditCardInput/>` binds to. When given, the
+   *  engine tokenizes Xendit cards inline instead of in a popup. */
+  xenditTokenizer?: WebXenditTokenizer
+): Omit<CheckoutPorts, 'confirmer'> => {
+  const requireStripe = (): Stripe => {
+    const stripe = confirmer.getStripe()
+    if (!stripe) {
+      throw new Error(
+        'Stripe is not initialized — the flow calls confirmer.init() first.'
+      )
+    }
+    return stripe
+  }
+
+  return {
+    ...(xenditTokenizer
+      ? {
+          tokenizeXenditCard: (params) =>
+            xenditTokenizer.tokenize({
+              publishableKey: params.publishableKey,
+              amount: params.amount,
+              billing: {
+                firstName: params.billing.firstName,
+                lastName: params.billing.lastName,
+                email: params.billing.email,
+                phone: params.billing.phone,
+              },
+              onBehalfOf: params.onBehalfOf,
+            }),
+        }
+      : {}),
+
+    openUrl: (url: string) => {
+      window.open(url, '_blank', 'noopener')
+    },
+
+    providerPage: ({ uri, html, returnUrlPrefix }) =>
+      new Promise((resolve) => {
+        const popup = window.open(
+          uri ?? '',
+          'tf-checkout-gateway',
+          'width=480,height=720'
+        )
+        if (!popup) {
+          resolve({
+            event: 'failed',
+            description: 'Please allow pop-ups to continue this payment.',
+          })
+          return
+        }
+
+        let settled = false
+        let timer = 0
+        const settle = (outcome: {
+          event: 'success' | 'dismiss' | 'failed'
+          returnUrl?: string
+          data?: Record<string, unknown>
+          description?: string
+        }) => {
+          if (settled) return
+          settled = true
+          window.clearInterval(timer)
+          window.removeEventListener('message', onMessage)
+          if (!popup.closed) popup.close()
+          resolve(outcome)
+        }
+
+        // Data-driven sheets (Razorpay, Xendit card) post lifecycle JSON via
+        // ReactNativeWebView.postMessage — the shim below forwards it to this
+        // window, same protocol as checkout-v2's WebView onMessage.
+        const onMessage = (e: MessageEvent) => {
+          if (e.source !== popup) return
+          const raw = (e.data as { __tfGatewaySheet?: string } | null)?.__tfGatewaySheet
+          if (typeof raw !== 'string') return
+          let parsed: {
+            event?: string
+            razorpay_payment_id?: string
+            token?: Record<string, unknown>
+            description?: string
+          } | null = null
+          try {
+            parsed = JSON.parse(raw)
+          } catch {
+            return
+          }
+          if (!parsed || typeof parsed.event !== 'string') return
+          if (parsed.event === 'success') {
+            settle({
+              event: 'success',
+              data: {
+                ...(parsed.razorpay_payment_id
+                  ? { razorpay_payment_id: parsed.razorpay_payment_id }
+                  : {}),
+                ...(parsed.token ? { token: parsed.token } : {}),
+              },
+            })
+          } else if (parsed.event === 'dismiss') {
+            settle({ event: 'dismiss' })
+          } else if (parsed.event === 'failed') {
+            settle({ event: 'failed', description: parsed.description })
+          }
+        }
+        window.addEventListener('message', onMessage)
+
+        if (!uri && html) {
+          const shim =
+            '<script>window.ReactNativeWebView={postMessage:function(m){' +
+            "window.opener&&window.opener.postMessage({__tfGatewaySheet:m},'*')}}</script>"
+          popup.document.open()
+          popup.document.write(shim + html)
+          popup.document.close()
+        }
+
+        timer = window.setInterval(() => {
+          if (popup.closed) {
+            settle({ event: 'dismiss' })
+            return
+          }
+          try {
+            const href = popup.location.href
+            if (href && href.startsWith(returnUrlPrefix)) {
+              settle({ event: 'success', returnUrl: href })
+            }
+          } catch {
+            // Cross-origin while on the provider's page — keep polling.
+          }
+        }, 500)
+      }),
+
+    createCardPaymentMethod: async (billing: CheckoutBilling) => {
+      const card = confirmer.getCardElement()
+      if (!card) {
+        throw new Error(
+          'No card element registered — render <CardInput/> before placing the order.'
+        )
+      }
+      const { paymentMethod, error } = await requireStripe().createPaymentMethod({
+        type: 'card',
+        card,
+        billing_details: stripeBillingDetails(billing),
+      })
+      if (error || !paymentMethod?.id) {
+        throw new Error(error?.message || 'Payment failed')
+      }
+      return paymentMethod.id
+    },
+
+    createRedirectPaymentMethod: async (methodType: string, billing: CheckoutBilling) => {
+      const { paymentMethod, error } = await requireStripe().createPaymentMethod({
+        type: methodType,
+        billing_details: stripeBillingDetails(billing),
+      } as unknown as Parameters<Stripe['createPaymentMethod']>[0])
+      // An unknown/unsupported type is the platform saying "can't express
+      // this" — the engine turns null into a typed UNSUPPORTED_GATEWAY.
+      if (error) return null
+      return paymentMethod?.id ?? null
+    },
+
+    handleNextAction: async (clientSecret: string) => {
+      const stripe = requireStripe() as Stripe & {
+        handleNextAction?: (options: {
+          clientSecret: string
+        }) => Promise<{ error?: { message?: string } }>
+      }
+      if (!stripe.handleNextAction) {
+        throw new Error('This Stripe.js version cannot run the payment’s next step.')
+      }
+      const { error } = await stripe.handleNextAction({ clientSecret })
+      if (error) throw new Error(error.message || 'Payment failed')
+    },
+
+    confirmOxxo: async (clientSecret: string, billing: CheckoutBilling) => {
+      const { error, paymentIntent } = await requireStripe().confirmOxxoPayment(
+        clientSecret,
+        { payment_method: { billing_details: stripeBillingDetails(billing) } }
+      )
+      return {
+        error: error?.message,
+        // stripe-js reports snake_case next_action — exactly the shape the
+        // shared logic's oxxoVoucherFromNextAction parses.
+        nextAction: paymentIntent?.next_action as unknown,
+      }
+    },
+
+    // Payment plan (new card): confirm the SetupIntent against the registered
+    // CardElement to SAVE the card (nothing charged), returning its
+    // PaymentMethod id for the server-side plan.
+    confirmPaymentPlanSetup: async (clientSecret: string, billing: CheckoutBilling) => {
+      const card = confirmer.getCardElement()
+      if (!card) {
+        throw new Error(
+          'No card element registered — render <CardInput/> before placing the order.'
+        )
+      }
+      const { setupIntent, error } = await requireStripe().confirmCardSetup(
+        clientSecret,
+        {
+          payment_method: { card, billing_details: stripeBillingDetails(billing) },
+        }
+      )
+      // payment_method is a string id (or an expanded object on some responses).
+      const pm = setupIntent?.payment_method
+      const paymentMethodId =
+        typeof pm === 'string' ? pm : (pm as { id?: string } | null)?.id
+      if (error || !paymentMethodId) {
+        throw new Error(error?.message || 'Card setup failed')
+      }
+      return paymentMethodId
+    },
+
+    // Payment plan (saved-card 3DS): confirm the pending charge against the
+    // existing PaymentMethod when the plan comes back requires_action.
+    confirmSavedCardPayment: async (clientSecret: string, paymentMethodId: string) => {
+      const { error } = await requireStripe().confirmCardPayment(clientSecret, {
+        payment_method: paymentMethodId,
+      })
+      if (error) throw new Error(error.message || 'Payment failed')
+    },
+  }
+}

package/src/index.ts

@@ -1,33 +1,44 @@
-export { BillingInfoContainer } from './components/billing-info-container/index'
-export { PaymentContainer } from './components/paymentContainer/index'
-export { ConfirmationContainer } from './components/confirmationContainer/index'
-export { TicketsContainer } from './components/ticketsContainer/index'
-export { currencyNormalizerCreator, createFixedFloatNormalizer } from './normalizers'
-export { LoginModal } from './components/loginModal'
-export { MyTicketsContainer } from './components/myTicketsContainer'
-export { OrderDetailsContainer } from './components/orderDetailsContainer'
-export { DEFAULT_FEES_STYLE } from './constants/index'
-export { TicketResaleContainer } from './components'
-export { RedirectModal } from './components/common/RedirectModal'
-export { RsvpContainer } from './components/rsvpContainer'
-export { ResetPasswordContainer } from './components/resetPasswordContainer'
-export { ForgotPasswordModal } from './components/forgotPasswordModal'
-export { AddonsContainter } from './components/addonsContainer'
-export { useAddons } from './components/addonsContainer/useAddons'
-export { default as TimerWidget } from './components/timerWidget'
-export { VerificationPendingModal } from './components/idVerificationContainer/VerificationPendingModal'
-export { PreRegistration } from './components/preRegistration'
-export { PreRegistrationComplete } from './components/preRegistration/PreRegistrationComplete'
-export { PreRegistrationInformations } from './components/preRegistration/PreRegistrationInformations'
+/**
+ * tf-checkout-react — the web checkout, built on `tf-checkout-shared`.
+ *
+ * One import gives you the whole SDK (ttf, ENDPOINTS, dtos, logic, the engine)
+ * PLUS the web platform layer: a `useCheckout` with Stripe + popup + inline
+ * Xendit pre-wired, `<CardInput/>` / `<XenditCardInput/>`, and `configureCheckout`.
+ *
+ *   import { configureCheckout, useCheckout, CardInput, ttf } from 'tf-checkout-react'
+ */
 
-export { useCookieListener } from './hooks'
-export { DelegationsContainer } from './components/delegationsContainer'
-export { PoweredBy } from './components/common/PoweredBy'
-export { SeatMapContainer } from './components/seatMapContainer'
-export { IDVerification } from './components/idVerificationContainer'
-export { VERIFICATION_STATUSES } from './components/idVerificationContainer/constants'
+// Load the SDK styles once. Consumers do not need a separate CSS import.
+import 'react-international-phone/style.css'
+import './checkout.css'
 
-export { setConfigs } from './utils/setConfigs'
-export { logoutUser } from './utils/auth'
+// The entire shared SDK (the web `useCheckout` below overrides the SDK's).
+export * from 'tf-checkout-shared'
 
-export { OrderDetails } from './components/paymentContainer/OrderDetails'
+// Web platform layer
+export { useCheckout, type UseCheckoutOptions } from './useCheckout'
+export { configureCheckout, localStorageAdapter } from './configure'
+export { CardInput, StripePaymentElement, XenditCardInput } from './CardInput'
+
+// Component library: the themeable provider + primitives + section components.
+export * from './ui'
+export * from './auth'
+export * from './sections'
+export {
+  EmbeddedCheckout,
+  type EmbeddedCheckoutProps,
+  type EmbeddedCheckoutAuthOptions,
+} from './EmbeddedCheckout'
+export { ResumedCheckout, type ResumedCheckoutProps } from './ResumedCheckout'
+
+export { webConfirmer, webPorts, webXenditTokenizer } from './instance'
+export {
+  createWebStripeConfirmer,
+  createWebPorts,
+  type WebStripeConfirmer,
+} from './confirmer'
+export {
+  createWebXenditTokenizer,
+  type WebXenditTokenizer,
+  type XenditCardFields,
+} from './xendit'

package/src/instance.ts

@@ -0,0 +1,21 @@
+/**
+ * The package-level web platform instances. Created once at module load
+ * (SSR-safe — nothing touches the DOM until `init()` / `tokenize()` run), so the
+ * hook and the UI components all bind to the SAME confirmer/tokenizer.
+ */
+import {
+  createWebPorts,
+  createWebStripeConfirmer,
+  type WebStripeConfirmer,
+} from './confirmer'
+import { createWebXenditTokenizer, type WebXenditTokenizer } from './xendit'
+
+/** The confirmer every `useCheckout`/`<CardInput/>` binds to. */
+export const webConfirmer: WebStripeConfirmer = createWebStripeConfirmer()
+
+/** The Xendit card tokenizer `<XenditCardInput/>` binds to. */
+export const webXenditTokenizer: WebXenditTokenizer = createWebXenditTokenizer()
+
+/** The web ports the alternative rails run on: the popup provider page, OXXO /
+ *  MSI Stripe legs, and inline Xendit tokenization. */
+export const webPorts = createWebPorts(webConfirmer, webXenditTokenizer)