tf-checkout-react-native 2.0.0-beta.14 → 2.0.0-beta.15

package/src/paymentSheet.ts

@@ -0,0 +1,170 @@
+import type * as Stripe from '@stripe/stripe-react-native'
+import {
+  confirmedStripeIntentStatus,
+  CONFIRMED_INTENT_STATUSES,
+  nativeStripeErrorOutcome,
+  paymentProviderError,
+  type CheckoutSnapshot,
+  type StripeCardPaymentContext,
+} from 'tf-checkout-shared'
+
+/** The MXN card rail collects a PaymentMethod before offering installments. */
+export const nativePaymentSheetAvailable = (
+  snapshot: Pick<CheckoutSnapshot, 'gateway' | 'breakdown'>
+): boolean =>
+  snapshot.gateway === 'stripe_payment_intents' &&
+  typeof snapshot.breakdown?.currencyCode === 'string' &&
+  /^[A-Z]{3}$/.test(snapshot.breakdown.currencyCode) &&
+  snapshot.breakdown.currencyCode !== 'MXN'
+
+type SheetSdk = Pick<
+  typeof Stripe,
+  'initPaymentSheet' | 'presentPaymentSheet' | 'retrievePaymentIntent' | 'LinkDisplay'
+>
+
+export const NATIVE_SHEET_CARD_FIELD_REQUIRED = 'NATIVE_SHEET_CARD_FIELD_REQUIRED'
+export const NATIVE_SHEET_CARD_FIELD_MESSAGE =
+  'Enter your card details below, then select Pay to continue.'
+
+export const NATIVE_SHEET_REVIEW_REQUIRED =
+  'The original payment details changed. Review this order before paying.'
+
+/** Financial identity is independent of method eligibility. A mismatch must
+ * never authorize the legacy CardField path to confirm the same stale review. */
+export const nativeSheetIntentIdentity = (
+  intent: unknown,
+  intentId: string,
+  reviewed: StripeCardPaymentContext | undefined
+): boolean => {
+  if (
+    !intent ||
+    typeof intent !== 'object' ||
+    !reviewed ||
+    !Number.isSafeInteger(reviewed.amountMinor) ||
+    reviewed.amountMinor <= 0 ||
+    !/^[A-Z]{3}$/.test(reviewed.currency)
+  )
+    return false
+  const own = (key: string): unknown =>
+    Object.getOwnPropertyDescriptor(intent, key)?.value
+  const amount = own('amount')
+  const currency = own('currency')
+  return (
+    own('id') === intentId &&
+    Number.isSafeInteger(amount) &&
+    amount === reviewed.amountMinor &&
+    typeof currency === 'string' &&
+    /^[A-Za-z]{3}$/.test(currency) &&
+    currency.toUpperCase() === reviewed.currency
+  )
+}
+
+/** The bridge must preserve the complete raw PI payment_method_types list.
+ * Link has no universal card-fee equivalence contract, so it is not admitted. */
+const nativeSheetCardMethods = (intent: unknown): boolean => {
+  if (!intent || typeof intent !== 'object') return false
+  const methods = Object.getOwnPropertyDescriptor(intent, 'paymentMethodTypes')?.value
+  return Array.isArray(methods) && methods.length === 1 && methods[0] === 'card'
+}
+
+/** Internal building block. The caller must hold
+ * the checkout confirmer gateway for the complete promise and bind assertCurrent
+ * to the original order/account initialization, including the return scheme.
+ * PaymentSheet owns collection and confirmation; no card details enter JS.
+ */
+export const createPaymentSheetConfirmation = (
+  sdk: SheetSdk,
+  options: {
+    merchantDisplayName: string
+    returnURL: string
+    reviewed: StripeCardPaymentContext | undefined
+    assertCurrent: () => void
+  }
+) => {
+  let active = false
+  const assertAfterPresentation = () => {
+    try {
+      options.assertCurrent()
+    } catch {
+      throw paymentProviderError('The original payment owner changed.', 'unknown')
+    }
+  }
+  return async (
+    clientSecret: string,
+    billing: Stripe.BillingDetails
+  ): Promise<string> => {
+    if (active)
+      throw paymentProviderError('Another payment sheet is active.', 'notStarted')
+    // Only an existing PaymentIntent is admitted. No SetupIntent, deferred
+    // intent creation callback, saved Customer or account inference is supplied.
+    const intentId = /^(pi_[A-Za-z0-9]+)_secret_[A-Za-z0-9]+$/.exec(clientSecret)?.[1]
+    if (!intentId || !options.merchantDisplayName.trim() || !options.returnURL)
+      throw paymentProviderError('Payment sheet details are unavailable.', 'notStarted')
+    options.assertCurrent()
+    active = true
+    try {
+      const before = await sdk.retrievePaymentIntent(clientSecret)
+      options.assertCurrent()
+      const requireAdmittedIntent = (result: typeof before) => {
+        if (
+          result.error ||
+          !nativeSheetIntentIdentity(result.paymentIntent, intentId, options.reviewed)
+        )
+          throw paymentProviderError(NATIVE_SHEET_REVIEW_REQUIRED, 'notStarted')
+        if (!nativeSheetCardMethods(result.paymentIntent))
+          throw paymentProviderError(NATIVE_SHEET_CARD_FIELD_MESSAGE, 'notStarted', {
+            code: NATIVE_SHEET_CARD_FIELD_REQUIRED,
+          })
+      }
+      requireAdmittedIntent(before)
+      if (CONFIRMED_INTENT_STATUSES.includes(before.paymentIntent.status))
+        return confirmedStripeIntentStatus(before.paymentIntent)
+      const initialized = await sdk.initPaymentSheet({
+        paymentIntentClientSecret: clientSecret,
+        merchantDisplayName: options.merchantDisplayName,
+        returnURL: options.returnURL,
+        defaultBillingDetails: billing,
+        customFlow: false,
+        allowsDelayedPaymentMethods: false,
+        // A native Link selection can have a different canonical fee class.
+        // Do not infer equivalence from PI eligibility or a display preference.
+        link: { display: sdk.LinkDisplay.NEVER },
+      })
+      if (initialized.error)
+        throw paymentProviderError(NATIVE_SHEET_CARD_FIELD_MESSAGE, 'notStarted', {
+          code: NATIVE_SHEET_CARD_FIELD_REQUIRED,
+        })
+      // A retired owner must never present a sheet initialized for its account.
+      options.assertCurrent()
+      const ready = await sdk.retrievePaymentIntent(clientSecret)
+      options.assertCurrent()
+      requireAdmittedIntent(ready)
+      if (CONFIRMED_INTENT_STATUSES.includes(ready.paymentIntent.status))
+        return confirmedStripeIntentStatus(ready.paymentIntent)
+      const presented = await sdk.presentPaymentSheet()
+      if (presented.error)
+        throw paymentProviderError(
+          presented.error.message || 'Payment failed.',
+          nativeStripeErrorOutcome(presented.error)
+        )
+      // A resolved sheet alone is not authorization to finalize the order.
+      // Retrieve only the original intent; failures remain ambiguous to the
+      // engine, which retains the original order instead of creating another.
+      assertAfterPresentation()
+      const result = await sdk.retrievePaymentIntent(clientSecret)
+      if (
+        result.error ||
+        !nativeSheetIntentIdentity(result.paymentIntent, intentId, options.reviewed) ||
+        !nativeSheetCardMethods(result.paymentIntent)
+      )
+        throw paymentProviderError(
+          'The original payment could not be verified.',
+          'unknown'
+        )
+      assertAfterPresentation()
+      return confirmedStripeIntentStatus(result.paymentIntent)
+    } finally {
+      active = false
+    }
+  }
+}

package/src/sections/Payment.tsx

@@ -10,14 +10,11 @@ import { Accommodation } from './Accommodation'
  *   - No Stripe Payment Element / wallet widget: web folds Apple/Google Pay into
  *     the Element. Native offers Apple/Google Pay as explicit rows only when
  *     the backend enables the wallet and Stripe confirms device support.
- *   - The card slot renders the native `<CardInput/>` (Stripe `<CardField/>`) for
- *     the Stripe card + payment-plan-new-card paths. Xendit card entry tokenizes
- *     in a WebView sheet (deferred in `confirmer.ts`), so the Xendit card row
- *     shows a note instead of a field; `placeOrder({method:'xenditCard'})` returns
- *     the typed unsupported-gateway error until that WebView port is injected.
- *   - Redirect rails / Razorpay / PayPal / Xendit e-wallets render their rows and
- *     call `placeOrder` with the mapped request; the WebView `providerPage` port
- *     that presents them is likewise a follow-up (see `confirmer.ts` header).
+ *   - An explicitly configured native PaymentSheet collects regular Stripe
+ *     payments. CardField remains for other hosts, MXN installments and new-card
+ *     payment plans. Existing explicit wallet rows keep their own policy gates.
+ *   - CheckoutProvider owns provider-page windows for Xendit, redirect methods,
+ *     Razorpay and PayPal; imperative hosts provide that port themselves.
  *   - Conditions render as plain text (HTML stripped) — no DOM to inject markup.
  */
 import React, { useEffect, useMemo, useState, type FC } from 'react'
@@ -53,6 +50,7 @@ import {
 } from 'tf-checkout-shared'
 
 import { CardInput, claimCardField } from '../CardInput'
+import { nativePaymentSheetAvailable } from '../paymentSheet'
 import { rnConfirmer } from '../instance'
 import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
 import { Checkbox } from '../ui/Field'
@@ -69,7 +67,6 @@ import {
 import { FrozenFields } from '../ui/Frozen'
 import { OrderSummary } from './OrderSummary'
 
-
 /** Server spellings → display labels for Stripe redirect rails. */
 const REDIRECT_LABELS: Record<string, string> = {
   klarna: 'Klarna',
@@ -185,8 +182,6 @@ export const Payment: FC<PaymentProps> = ({
     }
   }, [])
 
-
-
   const bd = checkout.breakdown
   const isFree = bd !== undefined && Number(bd.total) === 0
   const isXendit = checkout.gateway === 'xendit'
@@ -274,10 +269,14 @@ export const Payment: FC<PaymentProps> = ({
   const isPlanSelected = selectedOption?.id.kind === 'paymentPlan'
   const savedLast4 = methods?.savedPlanCardLast4
   const reuseSavedCard = planUsesSavedCard(savedLast4, useSavedCard)
+  const useStripeSheet = Boolean(
+    checkout.paymentSheet && isCardSelected && nativePaymentSheetAvailable(checkout)
+  )
   // The native Stripe card field: shown for the Stripe card path and for a
   // payment-plan NEW card (SetupIntent). Xendit card is a WebView sheet (below).
   const showStripeCardField =
-    !isXendit && (isCardSelected || (isPlanSelected && !reuseSavedCard))
+    !isXendit &&
+    ((!useStripeSheet && isCardSelected) || (isPlanSelected && !reuseSavedCard))
   const showXenditCardNote = isXendit && isCardSelected
   // One card form at a time owns the shared payment SDK (bundles and tickets
   // alike): while another one does, this form offers "Continue paying here".
@@ -367,7 +366,8 @@ export const Payment: FC<PaymentProps> = ({
       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 if (id.kind === 'paymentPlan')
+      req = { method: 'paymentPlan', useSavedCard: reuseSavedCard }
     else req = { method: id.kind } as PaymentRequest
     // Called synchronously in the press handler — popup rails (e-wallet,
     // redirect, razorpay, paypal) want the user gesture on their WebView host.
@@ -377,15 +377,18 @@ export const Payment: FC<PaymentProps> = ({
     // The card field is claimed inside the order, after the payment SDK holds
     // the ticket order's keys and right before the card is confirmed. Whether
     // a key change empties the field is decided in shared (`cardClaimStep`).
-    checkout
-      .placeOrder(
-        req,
-        usesOwnCardField
-          ? {
-              claimCard: cardClaimStep('nativeCard', () => claimCardField(cardOwner)),
-            }
-          : undefined
-      )
+    const payment =
+      useStripeSheet && checkout.paymentSheet && !isFree
+        ? checkout.paymentSheet.placeOrder()
+        : checkout.placeOrder(
+            req,
+            usesOwnCardField
+              ? {
+                  claimCard: cardClaimStep('nativeCard', () => claimCardField(cardOwner)),
+                }
+              : undefined
+          )
+    payment
       .then((order) => onComplete?.(order))
       // Cart ownership and native field ownership each fail before a charge.
       .catch((e) =>
@@ -419,6 +422,11 @@ export const Payment: FC<PaymentProps> = ({
       ) : showStripeCardField ? (
         <CardInput owner={cardOwner} />
       ) : null}
+      {useStripeSheet && !isFree ? (
+        <MutedText>
+          Choose your payment details securely with Stripe when you pay.
+        </MutedText>
+      ) : null}
       {showXenditCardNote ? (
         // Xendit card tokenizes in a WebView sheet (deferred — see confirmer.ts).
         <MutedText>
@@ -474,7 +482,11 @@ export const Payment: FC<PaymentProps> = ({
                 }
                 showValidation={validation.attempt > 0}
                 inputSlotFor={
-                  isPlanSelected ? (reuseSavedCard ? undefined : 'paymentPlan') : cardValue
+                  isPlanSelected
+                    ? reuseSavedCard
+                      ? undefined
+                      : 'paymentPlan'
+                    : cardValue
                 }
               >
                 {paymentInput}
@@ -505,7 +517,12 @@ export const Payment: FC<PaymentProps> = ({
         })}
       </Card>
 
-      {!isFree && paymentMethods.error ? <Card><ErrorText>{paymentMethods.error.message}</ErrorText><Button onPress={()=>void paymentMethods.refetch()}>Try again</Button></Card> : null}
+      {!isFree && paymentMethods.error ? (
+        <Card>
+          <ErrorText>{paymentMethods.error.message}</ErrorText>
+          <Button onPress={() => void paymentMethods.refetch()}>Try again</Button>
+        </Card>
+      ) : null}
       <OrderSummary translate={t} />
 
       <Button

package/src/ui/CheckoutProvider.tsx

@@ -24,19 +24,15 @@ import React, {
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-import {
-  hooks,
-  type UseCheckout,
-  type CheckoutOptions,
-  type CheckoutImagePicker,
-} from 'tf-checkout-shared'
+import { hooks, type CheckoutOptions, type CheckoutImagePicker } from 'tf-checkout-shared'
 
-import { useCheckout } from '../useCheckout'
+import { useCheckout, type NativeUseCheckout } from '../useCheckout'
+import type { NativePaymentSheetOptions } from '../confirmer'
 import { useInstallmentPicker } from './InstallmentPicker'
 import { useProviderPages } from './ProviderPages'
 import { resolveTheme, type CheckoutTheme, type ResolvedTheme } from './theme'
 
-const CheckoutCtx = createContext<UseCheckout | null>(null)
+const CheckoutCtx = createContext<NativeUseCheckout | null>(null)
 const ThemeCtx = createContext<ResolvedTheme>(resolveTheme())
 const ImagePickerCtx = createContext<CheckoutImagePicker | undefined>(undefined)
 const ValidationCtx = createContext<{
@@ -61,12 +57,14 @@ export interface CheckoutProviderProps {
   pickImage?: CheckoutImagePicker
   /** Wallet/redirect settings for the provider-owned native engine. */
   options?: CheckoutOptions
+  /** Enable Stripe's native sheet for regular card payments. */
+  paymentSheet?: NativePaymentSheetOptions
   /**
    * Bring your own checkout instance (from a top-level `useCheckout()`). Omit
    * and the provider runs `useCheckout()` itself. Either way the sections read
    * the same shared cart (the engine store is a module singleton).
    */
-  value?: UseCheckout
+  value?: NativeUseCheckout
   /** Retheme via design tokens. */
   theme?: CheckoutTheme
   /** Provide your own react-query client instead of the bundled shared one. */
@@ -80,14 +78,17 @@ export interface CheckoutThemeProviderProps {
 }
 
 /** Retheme standalone SDK screens without binding checkout or query state. */
-export const CheckoutThemeProvider: FC<CheckoutThemeProviderProps> = ({ theme, children }) => {
+export const CheckoutThemeProvider: FC<CheckoutThemeProviderProps> = ({
+  theme,
+  children,
+}) => {
   const resolved = useMemo(() => resolveTheme(theme), [theme])
   return <ThemeCtx.Provider value={resolved}>{children}</ThemeCtx.Provider>
 }
 
 /** The context boundary — given a resolved checkout instance + theme. */
 const CheckoutRoot: FC<{
-  checkout: UseCheckout
+  checkout: NativeUseCheckout
   pickImage?: CheckoutImagePicker
   theme?: CheckoutTheme
   children: ReactNode
@@ -123,6 +124,7 @@ const SelfProvidedCheckout: FC<Omit<CheckoutProviderProps, 'value' | 'queryClien
   const checkout = useCheckout({
     ports: { onInstallmentOffers, providerPage },
     options: rest.options,
+    paymentSheet: rest.paymentSheet,
   })
   return (
     <CheckoutRoot checkout={checkout} {...rest}>
@@ -154,7 +156,7 @@ export const CheckoutProvider: FC<CheckoutProviderProps> = ({
 }
 
 /** Read the shared checkout inside any component under `<CheckoutProvider>`. */
-export const useCheckoutContext = (): UseCheckout => {
+export const useCheckoutContext = (): NativeUseCheckout => {
   const ctx = useContext(CheckoutCtx)
   if (!ctx) {
     throw new Error('useCheckoutContext must be used within <CheckoutProvider>.')

package/src/ui/Select.tsx

@@ -4,7 +4,7 @@
  * list of options. Generic over the option value so callers keep type-safety
  * (country ids, gender codes, currency codes, ISO dates, …).
  */
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { FlatList, Modal, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import { useTheme } from './CheckoutProvider'
@@ -36,6 +36,17 @@ export function Select<T = string>({
   const theme = useTheme()
   const s = useSelectStyles(theme)
   const [open, setOpen] = useState(false)
+  const interaction = useRef({ disabled, open: false, revision: 0 })
+  interaction.current.disabled = disabled
+  const revision = interaction.current.revision
+  const close = useCallback(() => {
+    interaction.current.open = false
+    interaction.current.revision += 1
+    setOpen(false)
+  }, [])
+  useEffect(() => {
+    if (disabled && interaction.current.open) close()
+  }, [disabled, close])
 
   const selected = options.find((o) => o.value === value)
 
@@ -44,7 +55,12 @@ export function Select<T = string>({
       <Pressable
         accessibilityRole="button"
         disabled={disabled}
-        onPress={() => setOpen(true)}
+        onPress={() => {
+          if (interaction.current.disabled) return
+          interaction.current.open = true
+          interaction.current.revision += 1
+          setOpen(true)
+        }}
         style={[s.control, invalid && s.controlInvalid, disabled && s.controlDisabled]}
       >
         <Text style={[s.value, !selected && s.placeholder]} numberOfLines={1}>
@@ -54,12 +70,12 @@ export function Select<T = string>({
       </Pressable>
 
       <Modal
-        visible={open}
+        visible={open && !disabled}
         transparent
         animationType="fade"
-        onRequestClose={() => setOpen(false)}
+        onRequestClose={close}
       >
-        <Pressable style={s.backdrop} onPress={() => setOpen(false)}>
+        <Pressable style={s.backdrop} onPress={close}>
           <Pressable style={s.sheet} onPress={() => {}}>
             <FlatList
               data={options}
@@ -70,9 +86,17 @@ export function Select<T = string>({
                 return (
                   <Pressable
                     style={s.option}
+                    disabled={disabled}
                     onPress={() => {
+                      const current = interaction.current
+                      if (
+                        current.disabled ||
+                        !current.open ||
+                        current.revision !== revision
+                      )
+                        return
                       onChange(item.value)
-                      setOpen(false)
+                      close()
                     }}
                   >
                     <Text style={[s.optionLabel, isSelected && s.optionLabelSelected]}>

package/src/useCheckout.ts

@@ -11,15 +11,27 @@
  *   checkout.setBilling(b)
  *   await checkout.placeOrder('card')                           // <CardInput/> rendered
  */
+import { useState } from 'react'
 import {
   useCheckout as useSharedCheckout,
   type CheckoutOptions,
   type CheckoutPorts,
   type UseCheckout,
+  paymentProviderError,
 } from 'tf-checkout-shared'
 
 import { claimDefaultCardField } from './CardInput'
 import { rnConfirmer, rnPorts } from './instance'
+import type { NativePaymentSheetOptions } from './confirmer'
+import {
+  nativePaymentSheetAvailable,
+  NATIVE_SHEET_CARD_FIELD_MESSAGE,
+} from './paymentSheet'
+
+export interface NativeUseCheckout extends UseCheckout {
+  /** Native intent-only sheet. Omitted unless explicitly configured by the host. */
+  paymentSheet?: { placeOrder: () => ReturnType<UseCheckout['placeOrder']> }
+}
 
 export interface UseCheckoutOptions {
   /** Extra platform ports merged over the native defaults (e.g. an injected
@@ -27,11 +39,74 @@ export interface UseCheckoutOptions {
   ports?: Omit<CheckoutPorts, 'confirmer'>
   /** Wallet/redirect engine options (merchant identity, deep-link scheme). */
   options?: CheckoutOptions
+  /** Host must register the return scheme and route callbacks to Stripe. */
+  paymentSheet?: NativePaymentSheetOptions
 }
 
-export const useCheckout = (opts: UseCheckoutOptions = {}): UseCheckout =>
-  useSharedCheckout({
+export const useCheckout = (opts: UseCheckoutOptions = {}): NativeUseCheckout => {
+  const [sheetConfig] = useState(() =>
+    opts.paymentSheet ? { ...opts.paymentSheet } : undefined
+  )
+  const [sheetScheme] = useState(() => opts.options?.urlScheme)
+  const [sheet] = useState(() =>
+    sheetConfig ? rnConfirmer.createPaymentSheetSession(sheetConfig) : undefined
+  )
+  const nativePorts = { ...rnPorts, ...opts.ports }
+  const checkout = useSharedCheckout({
     // A Pay without its own claim uses the default ticket field (`checkout`).
-    ports: { confirmer: rnConfirmer, ...rnPorts, claimDefaultCardField, ...opts.ports },
+    ports: {
+      confirmer: sheet?.confirmer ?? rnConfirmer,
+      claimDefaultCardField,
+      ...nativePorts,
+      ...(sheet && nativePorts.createCardPaymentMethod
+        ? {
+            createCardPaymentMethod: (billing) =>
+              sheet.cardFieldOperation(() =>
+                nativePorts.createCardPaymentMethod!(billing)
+              ),
+          }
+        : {}),
+    },
     options: opts.options,
   })
+  return {
+    ...checkout,
+    paymentSheet:
+      sheet && !sheet.requiresCardField()
+        ? {
+            placeOrder: () => {
+              if (sheet.requiresCardField())
+                return Promise.reject(
+                  paymentProviderError(NATIVE_SHEET_CARD_FIELD_MESSAGE, 'notStarted')
+                )
+              // MSI needs a CardField PaymentMethod before its server-confirmed path.
+              // Keep that rail intact rather than collecting a different method in a sheet.
+              if (
+                !opts.options?.urlScheme ||
+                !sheetConfig?.merchantDisplayName.trim() ||
+                opts.options.urlScheme !== sheetScheme ||
+                opts.paymentSheet?.merchantDisplayName !==
+                  sheetConfig?.merchantDisplayName ||
+                opts.paymentSheet?.returnURL !== sheetConfig?.returnURL ||
+                opts.paymentSheet?.returnURL !==
+                  `${opts.options.urlScheme}://stripe-redirect`
+              )
+                return Promise.reject(
+                  paymentProviderError(
+                    'The payment return route is not configured.',
+                    'notStarted'
+                  )
+                )
+              if (!nativePaymentSheetAvailable(checkout.store.getState()))
+                return Promise.reject(
+                  paymentProviderError(
+                    'Use the installment card form for this currency.',
+                    'notStarted'
+                  )
+                )
+              return sheet.run((claimCard) => checkout.placeOrder('card', { claimCard }))
+            },
+          }
+        : undefined,
+  }
+}