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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",
@@ -37,10 +37,12 @@
     "!**/.*",
     "!scripts/verify-wallet-context.cjs",
     "!scripts/verify-provider-uri.cjs",
-    "!scripts/verify-native-textarea.cjs"
+    "!scripts/verify-native-textarea.cjs",
+    "!scripts/verify-frozen-select.cjs",
+    "!scripts/verify-payment-sheet.cjs"
   ],
   "scripts": {
-    "test": "node scripts/verify-discussion-support.cjs && node scripts/verify-wallet-context.cjs && node scripts/verify-provider-uri.cjs && node scripts/verify-native-textarea.cjs && jest --passWithNoTests",
+    "test": "node scripts/verify-discussion-support.cjs && node scripts/verify-wallet-context.cjs && node scripts/verify-provider-uri.cjs && node scripts/verify-native-textarea.cjs && node scripts/verify-frozen-select.cjs && node scripts/verify-payment-sheet.cjs && jest --passWithNoTests",
     "typecheck": "tsc -p tsconfig.build.json",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",

package/src/confirmer.ts

@@ -21,6 +21,9 @@ import {
   createPaymentMethod,
   handleNextAction,
   initStripe,
+  initPaymentSheet,
+  presentPaymentSheet,
+  LinkDisplay,
   PlatformPay,
   retrievePaymentIntent,
   type BillingDetails,
@@ -35,7 +38,30 @@ import {
   type CheckoutPorts,
   type NativeStripeErrorLike,
   type PaymentConfirmer,
+  type CardClaimStep,
+  type StripeCardPaymentContext,
+  stripeElementsPaymentContext,
 } from 'tf-checkout-shared'
+import {
+  createPaymentSheetConfirmation,
+  NATIVE_SHEET_CARD_FIELD_REQUIRED,
+  NATIVE_SHEET_REVIEW_REQUIRED,
+} from './paymentSheet'
+
+export interface NativePaymentSheetOptions {
+  merchantDisplayName: string
+  /** Must match the host's registered scheme and Stripe callback handler. */
+  returnURL: string
+}
+
+export interface NativeStripeConfirmer extends PaymentConfirmer {
+  createPaymentSheetSession(options: NativePaymentSheetOptions): {
+    confirmer: PaymentConfirmer
+    cardFieldOperation<T>(operation: () => Promise<T>): Promise<T>
+    requiresCardField(): boolean
+    run<T>(operation: (claim: CardClaimStep) => Promise<T>): Promise<T>
+  }
+}
 
 /** `CheckoutBilling` → the native SDK's `BillingDetails`. Mirrors the web
  *  `stripeBillingDetails`; the SDK collects card data from `<CardField/>`. */
@@ -74,24 +100,190 @@ const stripeFailure = (
  * idempotent per key so an event on a connected Stripe account re-initializes
  * only when the key/account actually changes.
  */
-export const createRnStripeConfirmer = (): PaymentConfirmer => {
-  let initKey: string | null = null
-  let accountKey: string | null = null
-  const listeners = new Set<() => void>()
+// Stripe React Native has one native SDK instance, including when a host creates
+// several confirmer adapters. Its account and presentation lease must be global.
+let initKey: string | null = null
+let accountKey: string | null = null
+const listeners = new Set<() => void>()
+let initializedScheme: string | undefined
+let initializing = false
+let sheetPresenting = false
+let nativeOperationActive = false
+let sheetOwner: { key: string; options: NativePaymentSheetOptions } | null = null
 
-  return {
+const assertNativeLeaseFree = () => {
+  if (sheetOwner || initializing || nativeOperationActive)
+    throw paymentProviderError(
+      'The payment SDK is owned by another operation.',
+      'notStarted'
+    )
+}
+
+const nativeSdkCall = async <T>(operation: () => Promise<T>): Promise<T> => {
+  assertNativeLeaseFree()
+  nativeOperationActive = true
+  try {
+    return await operation()
+  } finally {
+    nativeOperationActive = false
+  }
+}
+
+export const createRnStripeConfirmer = (): NativeStripeConfirmer => {
+  const adapter: NativeStripeConfirmer = {
     init: async ({ publishableKey, accountId, merchantIdentifier, urlScheme }) => {
-      const key = `${publishableKey}:${accountId ?? ''}:${merchantIdentifier ?? ''}`
-      if (initKey === key) return
-      await initStripe({
+      const key = JSON.stringify([
         publishableKey,
-        ...(accountId ? { stripeAccountId: accountId } : {}),
-        ...(merchantIdentifier ? { merchantIdentifier } : {}),
-        ...(urlScheme ? { urlScheme } : {}),
-      })
-      initKey = key
-      accountKey = `${publishableKey}:${accountId ?? ''}`
-      listeners.forEach((listener) => listener())
+        accountId ?? null,
+        merchantIdentifier ?? null,
+        urlScheme ?? null,
+      ])
+      if (initializing || (sheetOwner && sheetOwner.key !== key))
+        throw paymentProviderError(
+          'The payment SDK is owned by another operation.',
+          'notStarted'
+        )
+      if (initKey === key) return
+      if (nativeOperationActive)
+        throw paymentProviderError(
+          'The payment SDK is owned by another operation.',
+          'notStarted'
+        )
+      initializing = true
+      initKey = null
+      accountKey = null
+      initializedScheme = undefined
+      try {
+        await initStripe({
+          publishableKey,
+          ...(accountId ? { stripeAccountId: accountId } : {}),
+          ...(merchantIdentifier ? { merchantIdentifier } : {}),
+          ...(urlScheme ? { urlScheme } : {}),
+        })
+        initKey = key
+        initializedScheme = urlScheme
+        accountKey = `${publishableKey}:${accountId ?? ''}`
+        listeners.forEach((listener) => listener())
+      } finally {
+        initializing = false
+      }
+    },
+
+    createPaymentSheetSession: (options) => {
+      let running = false
+      let owner: typeof sheetOwner = null
+      let requiresCardField = false
+      let reviewed: StripeCardPaymentContext | undefined
+      return {
+        requiresCardField: () => requiresCardField,
+        cardFieldOperation: async (operation) => {
+          if (running) {
+            // The engine's authoritative review requested its MSI/CardField
+            // branch. It catches unavailable offers; never let that catch
+            // silently fall through to PaymentSheet instead.
+            requiresCardField = true
+            throw paymentProviderError('Use the card form for this order.', 'notStarted')
+          }
+          return operation()
+        },
+        confirmer: {
+          ...adapter,
+          prepareCardPayment: async (context) => {
+            if (!running) return
+            reviewed = stripeElementsPaymentContext(
+              context?.amountMinor,
+              context?.currency
+            )
+            if (!reviewed || !owner || sheetOwner !== owner) {
+              throw paymentProviderError(NATIVE_SHEET_REVIEW_REQUIRED, 'notStarted')
+            }
+          },
+          confirmCard: async (clientSecret, billing) => {
+            if (!running) return adapter.confirmCard(clientSecret, billing)
+            if (requiresCardField)
+              throw paymentProviderError(
+                'Use the card form for this order.',
+                'notStarted'
+              )
+            if (!owner || sheetOwner !== owner)
+              throw paymentProviderError(
+                'The payment sheet was not claimed.',
+                'notStarted'
+              )
+            {
+              if (sheetPresenting)
+                throw paymentProviderError(
+                  'Another payment sheet is active.',
+                  'notStarted'
+                )
+              const confirm = createPaymentSheetConfirmation(
+                {
+                  initPaymentSheet,
+                  presentPaymentSheet,
+                  retrievePaymentIntent,
+                  LinkDisplay,
+                },
+                {
+                  ...owner.options,
+                  reviewed,
+                  assertCurrent: () => {
+                    if (sheetOwner !== owner || initKey !== owner.key || initializing)
+                      throw paymentProviderError(
+                        'The original payment owner changed.',
+                        'notStarted'
+                      )
+                  },
+                }
+              )
+              sheetPresenting = true
+              try {
+                return await confirm(clientSecret, toBillingDetails(billing))
+              } catch (error) {
+                if (
+                  (error as { providerCode?: string })?.providerCode ===
+                  NATIVE_SHEET_CARD_FIELD_REQUIRED
+                )
+                  requiresCardField = true
+                throw error
+              } finally {
+                sheetPresenting = false
+              }
+            }
+          },
+        },
+        run: async (operation) => {
+          if (running)
+            throw paymentProviderError('This payment is already active.', 'notStarted')
+          running = true
+          reviewed = undefined
+          let admitted = true
+          const claim: CardClaimStep = () => {
+            if (
+              !admitted ||
+              nativeOperationActive ||
+              initializing ||
+              !initKey ||
+              sheetOwner ||
+              !initializedScheme ||
+              options.returnURL !== `${initializedScheme}://stripe-redirect` ||
+              !options.merchantDisplayName.trim()
+            )
+              return 'unavailable'
+            owner = { key: initKey, options: { ...options } }
+            sheetOwner = owner
+            return 'attached'
+          }
+          try {
+            return await operation(claim)
+          } finally {
+            admitted = false
+            if (owner && sheetOwner === owner) sheetOwner = null
+            owner = null
+            reviewed = undefined
+            running = false
+          }
+        },
+      }
     },
 
     // `publishableKey:accountId`, the shape `bundleConfirmerKey` expects.
@@ -106,20 +298,27 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
 
     // Native statuses are already the port's PascalCase vocabulary — no normalize.
     getIntentStatus: async (clientSecret) => {
-      const { paymentIntent } = await retrievePaymentIntent(clientSecret)
+      assertNativeLeaseFree()
+      const { paymentIntent } = await nativeSdkCall(() =>
+        retrievePaymentIntent(clientSecret)
+      )
       return paymentIntent?.status
     },
 
     confirmCard: async (clientSecret, billing) => {
-      const { error, paymentIntent } = await confirmPayment(clientSecret, {
-        paymentMethodType: 'Card',
-        paymentMethodData: { billingDetails: toBillingDetails(billing) },
-      })
+      assertNativeLeaseFree()
+      const { error, paymentIntent } = await nativeSdkCall(() =>
+        confirmPayment(clientSecret, {
+          paymentMethodType: 'Card',
+          paymentMethodData: { billingDetails: toBillingDetails(billing) },
+        })
+      )
       if (error) throw stripeFailure(error, 'Payment failed.')
       return confirmedStripeIntentStatus(paymentIntent)
     },
 
     confirmApplePay: async (clientSecret, total, currencyCode, merchant) => {
+      assertNativeLeaseFree()
       const context = stripeWalletPaymentContext(
         total,
         currencyCode,
@@ -130,24 +329,27 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
           'The order wallet details are unavailable.',
           'notStarted'
         )
-      const { error, paymentIntent } = await confirmPlatformPayPayment(clientSecret, {
-        applePay: {
-          merchantCountryCode: context.merchantCountry,
-          currencyCode: context.currency,
-          cartItems: [
-            {
-              label: merchant.merchantName ?? 'Order',
-              amount: context.amount,
-              paymentType: PlatformPay.PaymentType.Immediate,
-            },
-          ],
-        },
-      })
+      const { error, paymentIntent } = await nativeSdkCall(() =>
+        confirmPlatformPayPayment(clientSecret, {
+          applePay: {
+            merchantCountryCode: context.merchantCountry,
+            currencyCode: context.currency,
+            cartItems: [
+              {
+                label: merchant.merchantName ?? 'Order',
+                amount: context.amount,
+                paymentType: PlatformPay.PaymentType.Immediate,
+              },
+            ],
+          },
+        })
+      )
       if (error) throw stripeFailure(error, 'Apple Pay failed.')
       return confirmedStripeIntentStatus(paymentIntent)
     },
 
     confirmGooglePay: async (clientSecret, total, currencyCode, merchant) => {
+      assertNativeLeaseFree()
       const context = stripeWalletPaymentContext(
         total,
         currencyCode,
@@ -158,18 +360,21 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
           'The order wallet details are unavailable.',
           'notStarted'
         )
-      const { error, paymentIntent } = await confirmPlatformPayPayment(clientSecret, {
-        googlePay: {
-          testEnv: merchant.testEnv === true,
-          merchantCountryCode: context.merchantCountry,
-          currencyCode: context.currency,
-          merchantName: merchant.merchantName ?? 'Order',
-        },
-      })
+      const { error, paymentIntent } = await nativeSdkCall(() =>
+        confirmPlatformPayPayment(clientSecret, {
+          googlePay: {
+            testEnv: merchant.testEnv === true,
+            merchantCountryCode: context.merchantCountry,
+            currencyCode: context.currency,
+            merchantName: merchant.merchantName ?? 'Order',
+          },
+        })
+      )
       if (error) throw stripeFailure(error, 'Google Pay failed.')
       return confirmedStripeIntentStatus(paymentIntent)
     },
   }
+  return adapter
 }
 
 /**
@@ -183,70 +388,94 @@ export const createRnPorts = (): Omit<CheckoutPorts, 'confirmer'> => ({
   openUrl: (url: string) => Linking.openURL(url).then(() => undefined),
 
   createCardPaymentMethod: async (billing) => {
-    const { paymentMethod, error } = await createPaymentMethod({
-      paymentMethodType: 'Card',
-      paymentMethodData: { billingDetails: toBillingDetails(billing) },
-    })
+    assertNativeLeaseFree()
+    const { paymentMethod, error } = await nativeSdkCall(() =>
+      createPaymentMethod({
+        paymentMethodType: 'Card',
+        paymentMethodData: { billingDetails: toBillingDetails(billing) },
+      })
+    )
     if (error || !paymentMethod?.id) throw failed(error?.message, 'Payment failed')
     return paymentMethod.id
   },
 
   createRedirectPaymentMethod: async (methodType, billing) => {
+    assertNativeLeaseFree()
     const details = toBillingDetails(billing)
     const result = await (() => {
       switch (methodType) {
         case 'klarna':
-          return createPaymentMethod({
-            paymentMethodType: 'Klarna',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'Klarna',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         case 'afterpay_clearpay':
-          return createPaymentMethod({
-            paymentMethodType: 'AfterpayClearpay',
-            paymentMethodData: { billingDetails: details, shippingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'AfterpayClearpay',
+              paymentMethodData: { billingDetails: details, shippingDetails: details },
+            })
+          )
         case 'affirm':
-          return createPaymentMethod({
-            paymentMethodType: 'Affirm',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'Affirm',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         case 'ideal':
-          return createPaymentMethod({
-            paymentMethodType: 'Ideal',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'Ideal',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         case 'bancontact':
-          return createPaymentMethod({
-            paymentMethodType: 'Bancontact',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'Bancontact',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         case 'eps':
-          return createPaymentMethod({
-            paymentMethodType: 'Eps',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'Eps',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         case 'p24':
-          return createPaymentMethod({
-            paymentMethodType: 'P24',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'P24',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         case 'alipay':
-          return createPaymentMethod({ paymentMethodType: 'Alipay' })
+          return nativeSdkCall(() => createPaymentMethod({ paymentMethodType: 'Alipay' }))
         case 'grabpay':
-          return createPaymentMethod({
-            paymentMethodType: 'GrabPay',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'GrabPay',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         case 'cashapp':
-          return createPaymentMethod({
-            paymentMethodType: 'CashApp',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'CashApp',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         case 'paypal':
-          return createPaymentMethod({
-            paymentMethodType: 'PayPal',
-            paymentMethodData: { billingDetails: details },
-          })
+          return nativeSdkCall(() =>
+            createPaymentMethod({
+              paymentMethodType: 'PayPal',
+              paymentMethodData: { billingDetails: details },
+            })
+          )
         default:
           throw new Error('This payment method is not available on this device.')
       }
@@ -257,25 +486,32 @@ export const createRnPorts = (): Omit<CheckoutPorts, 'confirmer'> => ({
   },
 
   handleNextAction: async (clientSecret) => {
-    const { error } = await handleNextAction(clientSecret)
+    assertNativeLeaseFree()
+    const { error } = await nativeSdkCall(() => handleNextAction(clientSecret))
     if (error) throw stripeFailure(error, 'Payment failed')
   },
 
   confirmOxxo: async (clientSecret, billing) => {
-    const { error, paymentIntent } = await confirmPayment(clientSecret, {
-      paymentMethodType: 'Oxxo',
-      paymentMethodData: { billingDetails: toBillingDetails(billing) },
-    })
+    assertNativeLeaseFree()
+    const { error, paymentIntent } = await nativeSdkCall(() =>
+      confirmPayment(clientSecret, {
+        paymentMethodType: 'Oxxo',
+        paymentMethodData: { billingDetails: toBillingDetails(billing) },
+      })
+    )
     return { error: error?.message, nextAction: paymentIntent?.nextAction as unknown }
   },
 
   // Payment plan (new card): confirm the SetupIntent to SAVE the card (nothing
   // charged) and return its PaymentMethod id for the server-side plan.
   confirmPaymentPlanSetup: async (clientSecret, billing) => {
-    const { setupIntent, error } = await confirmSetupIntent(clientSecret, {
-      paymentMethodType: 'Card',
-      paymentMethodData: { billingDetails: toBillingDetails(billing) },
-    })
+    assertNativeLeaseFree()
+    const { setupIntent, error } = await nativeSdkCall(() =>
+      confirmSetupIntent(clientSecret, {
+        paymentMethodType: 'Card',
+        paymentMethodData: { billingDetails: toBillingDetails(billing) },
+      })
+    )
     const paymentMethodId = setupIntent?.paymentMethod?.id
     if (error || !paymentMethodId) throw failed(error?.message, 'Card setup failed')
     return paymentMethodId
@@ -284,10 +520,13 @@ export const createRnPorts = (): Omit<CheckoutPorts, 'confirmer'> => ({
   // Payment plan (saved-card 3DS): confirm the pending charge against the
   // existing PaymentMethod when the plan comes back requires_action.
   confirmSavedCardPayment: async (clientSecret, paymentMethodId) => {
-    const { error } = await confirmPayment(clientSecret, {
-      paymentMethodType: 'Card',
-      paymentMethodData: { paymentMethodId },
-    })
+    assertNativeLeaseFree()
+    const { error } = await nativeSdkCall(() =>
+      confirmPayment(clientSecret, {
+        paymentMethodType: 'Card',
+        paymentMethodData: { paymentMethodId },
+      })
+    )
     if (error) throw stripeFailure(error, 'Payment failed')
   },
 })

package/src/index.tsx

@@ -13,7 +13,11 @@
 export * from 'tf-checkout-shared'
 
 // Native platform layer
-export { useCheckout, type UseCheckoutOptions } from './useCheckout'
+export {
+  useCheckout,
+  type UseCheckoutOptions,
+  type NativeUseCheckout,
+} from './useCheckout'
 export { configureCheckout, mmkvStorageAdapter } from './configure'
 export { createMmkvStorage } from './storage'
 export { CardInput, claimCardField, type CardInputProps } from './CardInput'
@@ -26,4 +30,8 @@ export { EmbeddedCheckout, type EmbeddedCheckoutProps } from './EmbeddedCheckout
 
 // Port instances/factories (bring-your-own ports, testing, custom flows).
 export { rnConfirmer, rnPorts } from './instance'
-export { createRnStripeConfirmer, createRnPorts } from './confirmer'
+export {
+  createRnStripeConfirmer,
+  createRnPorts,
+  type NativePaymentSheetOptions,
+} from './confirmer'

package/src/instance.ts

@@ -2,12 +2,10 @@
  * The package-level native platform instances. Created once at module load, so
  * the hook and the UI components all bind to the SAME confirmer/ports.
  */
-import type { PaymentConfirmer } from 'tf-checkout-shared'
-
 import { createRnPorts, createRnStripeConfirmer } from './confirmer'
 
 /** The confirmer every `useCheckout`/`<CardInput/>` binds to. */
-export const rnConfirmer: PaymentConfirmer = createRnStripeConfirmer()
+export const rnConfirmer = createRnStripeConfirmer()
 
 /** The native ports the alternative Stripe rails (OXXO / plan) run on. */
 export const rnPorts = createRnPorts()