@stripe/stripe-react-native 0.63.0 → 0.65.0

package/src/hooks/useCheckout.tsx

@@ -0,0 +1,168 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import NativeStripeSdk from '../specs/NativeStripeSdkModule';
+import type { Checkout } from '../types/Checkout';
+
+/**
+ * Initializes a Stripe Checkout Session and returns a reactive handle.
+ *
+ * The session is fetched from Stripe when the hook mounts. `state` is `null`
+ * until the initial load completes, then transitions between `loaded` and
+ * `loading` as mutations are performed.
+ *
+ * Pass the returned `checkout` to `initPaymentSheet` to complete the purchase.
+ *
+ * @internal
+ */
+export function useCheckout(
+  clientSecret: string,
+  configuration?: Checkout.Configuration
+): {
+  /** The current loading state of the checkout session. `null` until the initial load completes. */
+  state: Checkout.State | null;
+  /** A handle to the session with methods for mutations. */
+  checkout: Checkout;
+  /** Set if the initial session load fails. Undefined otherwise. */
+  error?: Checkout.Error;
+} {
+  const [state, setState] = useState<Checkout.State | null>(null);
+  const [error, setError] = useState<Checkout.Error | undefined>(undefined);
+
+  // Ref so mutation callbacks don't need it as a dependency.
+  const sessionKeyRef = useRef<string | null>(null);
+
+  // Load session on mount / clientSecret change.
+  useEffect(() => {
+    let cancelled = false;
+    sessionKeyRef.current = null;
+    setState(null);
+    setError(undefined);
+
+    (async () => {
+      try {
+        const result = await NativeStripeSdk.initCheckoutSession(
+          clientSecret,
+          configuration ?? {}
+        );
+        if (cancelled) return;
+        sessionKeyRef.current = result.sessionKey;
+        setState(result.state);
+      } catch (e: any) {
+        if (cancelled) return;
+        setError({
+          code: e.code ?? 'Failed',
+          message: e.message ?? 'Failed to initialize checkout session',
+        });
+      }
+    })();
+
+    // Ignore in-flight init if unmounted or clientSecret changed.
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clientSecret]);
+
+  // Sets `loading`, calls native, applies returned state. Reverts on error.
+  const withLoading = useCallback(
+    async (fn: (sessionKey: string) => Promise<Checkout.State>) => {
+      const key = sessionKeyRef.current;
+      if (!key) {
+        throw { code: 'Failed', message: 'Checkout session not initialized.' };
+      }
+
+      setState((prev) =>
+        prev ? { status: 'loading', session: prev.session } : prev
+      );
+
+      try {
+        const newState = await fn(key);
+        setState(newState);
+      } catch (e: any) {
+        setState((prev) =>
+          prev?.status === 'loading'
+            ? { status: 'loaded', session: prev.session }
+            : prev
+        );
+        throw e;
+      }
+    },
+    []
+  );
+
+  // Mutation methods — each delegates to withLoading.
+  const checkout: Checkout = {
+    get sessionKey(): string {
+      if (!sessionKeyRef.current) {
+        throw new Error('Checkout session not initialized.');
+      }
+      return sessionKeyRef.current;
+    },
+    updateShippingAddress: useCallback(
+      (address, name, phone) =>
+        withLoading((key) =>
+          NativeStripeSdk.checkoutUpdateShippingAddress(
+            key,
+            address,
+            name ?? null,
+            phone ?? null
+          )
+        ),
+      [withLoading]
+    ),
+    updateBillingAddress: useCallback(
+      (address, name, phone) =>
+        withLoading((key) =>
+          NativeStripeSdk.checkoutUpdateBillingAddress(
+            key,
+            address,
+            name ?? null,
+            phone ?? null
+          )
+        ),
+      [withLoading]
+    ),
+    applyPromotionCode: useCallback(
+      (code) =>
+        withLoading((key) =>
+          NativeStripeSdk.checkoutApplyPromotionCode(key, code)
+        ),
+      [withLoading]
+    ),
+    removePromotionCode: useCallback(
+      () =>
+        withLoading((key) => NativeStripeSdk.checkoutRemovePromotionCode(key)),
+      [withLoading]
+    ),
+    updateLineItemQuantity: useCallback(
+      (lineItemId, quantity) =>
+        withLoading((key) =>
+          NativeStripeSdk.checkoutUpdateLineItemQuantity(
+            key,
+            lineItemId,
+            quantity
+          )
+        ),
+      [withLoading]
+    ),
+    selectShippingOption: useCallback(
+      (id) =>
+        withLoading((key) =>
+          NativeStripeSdk.checkoutSelectShippingOption(key, id)
+        ),
+      [withLoading]
+    ),
+    updateTaxId: useCallback(
+      (type, value) =>
+        withLoading((key) =>
+          NativeStripeSdk.checkoutUpdateTaxId(key, type, value)
+        ),
+      [withLoading]
+    ),
+    refresh: useCallback(
+      () => withLoading((key) => NativeStripeSdk.checkoutRefresh(key)),
+      [withLoading]
+    ),
+  };
+
+  return { state, checkout, error };
+}

package/src/hooks/useOnramp.tsx

@@ -1,11 +1,26 @@
-import { EventSubscription } from 'react-native';
+import { EventSubscription, Platform } from 'react-native';
 import NativeOnrampSdk from '../specs/NativeOnrampSdkModule';
 import { Onramp, OnrampError, StripeError } from '../types';
-import type { Address, PlatformPay } from '../types';
+import type { Address } from '../types';
 import { useCallback } from 'react';
 import { addOnrampListener } from '../events';
 import { CryptoPaymentToken } from '../types/Onramp';
 
+export function requireOnrampModule() {
+  if (NativeOnrampSdk == null) {
+    throw new Error(
+      Platform.select({
+        ios: "Onramp module is not available. Add 'stripe-react-native/Onramp' to your Podfile.",
+        android:
+          "Onramp module is not available. Add 'StripeSdk_includeOnramp=true' to gradle.properties.",
+        default:
+          "Onramp module is not available. Enable the Onramp pod on iOS and set 'StripeSdk_includeOnramp=true' on Android.",
+      }) ?? 'Onramp module is not available.'
+    );
+  }
+  return NativeOnrampSdk;
+}
+
 let onCheckoutClientSecretRequestedSubscription: EventSubscription | null =
   null;
 
@@ -17,14 +32,14 @@ export function useOnramp() {
     async (
       config: Onramp.Configuration
     ): Promise<{ error?: StripeError<OnrampError> }> => {
-      return NativeOnrampSdk.configureOnramp(config);
+      return requireOnrampModule().configureOnramp(config);
     },
     []
   );
 
   const _hasLinkAccount = useCallback(
     async (email: string): Promise<Onramp.HasLinkAccountResult> => {
-      return NativeOnrampSdk.hasLinkAccount(email);
+      return requireOnrampModule().hasLinkAccount(email);
     },
     []
   );
@@ -33,7 +48,7 @@ export function useOnramp() {
     async (
       info: Onramp.LinkUserInfo
     ): Promise<Onramp.RegisterLinkUserResult> => {
-      return NativeOnrampSdk.registerLinkUser(info);
+      return requireOnrampModule().registerLinkUser(info);
     },
     []
   );
@@ -43,7 +58,10 @@ export function useOnramp() {
       walletAddress: string,
       network: Onramp.CryptoNetwork
     ): Promise<{ error?: StripeError<OnrampError> }> => {
-      return NativeOnrampSdk.registerWalletAddress(walletAddress, network);
+      return requireOnrampModule().registerWalletAddress(
+        walletAddress,
+        network
+      );
     },
     []
   );
@@ -52,14 +70,14 @@ export function useOnramp() {
     async (
       kycInfo: Onramp.KycInfo
     ): Promise<{ error?: StripeError<OnrampError> }> => {
-      return NativeOnrampSdk.attachKycInfo(kycInfo);
+      return requireOnrampModule().attachKycInfo(kycInfo);
     },
     []
   );
 
   const _presentKycInfoVerification = useCallback(
     async (updatedAddress: Address | null): Promise<Onramp.VerifyKycResult> => {
-      return NativeOnrampSdk.presentKycInfoVerification(updatedAddress);
+      return requireOnrampModule().presentKycInfoVerification(updatedAddress);
     },
     []
   );
@@ -68,7 +86,7 @@ export function useOnramp() {
     async (
       linkAuthTokenClientSecret: string
     ): Promise<{ error?: StripeError<OnrampError> }> => {
-      return NativeOnrampSdk.authenticateUserWithToken(
+      return requireOnrampModule().authenticateUserWithToken(
         linkAuthTokenClientSecret
       );
     },
@@ -77,7 +95,7 @@ export function useOnramp() {
 
   const _updatePhoneNumber = useCallback(
     async (phone: string): Promise<{ error?: StripeError<OnrampError> }> => {
-      return NativeOnrampSdk.updatePhoneNumber(phone);
+      return requireOnrampModule().updatePhoneNumber(phone);
     },
     []
   );
@@ -85,7 +103,7 @@ export function useOnramp() {
   const _verifyIdentity = useCallback(async (): Promise<{
     error?: StripeError<OnrampError>;
   }> => {
-    return NativeOnrampSdk.verifyIdentity();
+    return requireOnrampModule().verifyIdentity();
   }, []);
 
   /**
@@ -107,16 +125,14 @@ export function useOnramp() {
     ): Promise<Onramp.CollectPaymentMethodResult>;
     (
       paymentMethod: 'PlatformPay',
-      platformPayParams: PlatformPay.PaymentMethodParams
+      platformPayParams: Onramp.OnrampPlatformPayParams
     ): Promise<Onramp.CollectPaymentMethodResult>;
   } = useCallback(
     async (
       paymentMethod: OnrampPaymentMethod,
-      platformPayParams?:
-        | PlatformPay.PaymentMethodParams
-        | Record<string, never>
+      platformPayParams?: Onramp.OnrampPlatformPayParams | Record<string, never>
     ): Promise<Onramp.CollectPaymentMethodResult> => {
-      return NativeOnrampSdk.collectPaymentMethod(
+      return requireOnrampModule().collectPaymentMethod(
         paymentMethod,
         (platformPayParams ?? {}) as any
       );
@@ -126,7 +142,7 @@ export function useOnramp() {
 
   const _createCryptoPaymentToken =
     useCallback(async (): Promise<Onramp.CreateCryptoPaymentTokenResult> => {
-      return NativeOnrampSdk.createCryptoPaymentToken();
+      return requireOnrampModule().createCryptoPaymentToken();
     }, []);
 
   const _performCheckout = useCallback(
@@ -140,20 +156,20 @@ export function useOnramp() {
         async () => {
           try {
             const clientSecret = await provideCheckoutClientSecret();
-            NativeOnrampSdk.provideCheckoutClientSecret(clientSecret);
+            requireOnrampModule().provideCheckoutClientSecret(clientSecret);
           } catch (error: any) {
-            NativeOnrampSdk.provideCheckoutClientSecret(null);
+            requireOnrampModule().provideCheckoutClientSecret(null);
           }
         }
       );
-      return NativeOnrampSdk.performCheckout(onrampSessionId);
+      return requireOnrampModule().performCheckout(onrampSessionId);
     },
     []
   );
 
   const _authorize = useCallback(
     async (linkAuthIntentId: string): Promise<Onramp.AuthorizeResult> => {
-      return NativeOnrampSdk.onrampAuthorize(linkAuthIntentId);
+      return requireOnrampModule().onrampAuthorize(linkAuthIntentId);
     },
     []
   );
@@ -162,7 +178,7 @@ export function useOnramp() {
     async (
       token: CryptoPaymentToken
     ): Promise<Onramp.PaymentDisplayDataResult> => {
-      return NativeOnrampSdk.getCryptoTokenDisplayData(token);
+      return requireOnrampModule().getCryptoTokenDisplayData(token);
     },
     []
   );
@@ -170,7 +186,7 @@ export function useOnramp() {
   const _logOut = useCallback(async (): Promise<{
     error?: StripeError<OnrampError>;
   }> => {
-    return NativeOnrampSdk.logout();
+    return requireOnrampModule().logout();
   }, []);
 
   const _isAuthError = (error?: StripeError<OnrampError>): boolean => {
@@ -273,7 +289,12 @@ export function useOnramp() {
      * @param platformPayParams Platform-specific parameters (required when `paymentMethod` is 'PlatformPay').
      *  - iOS: provide `applePay` params
      *  - Android: provide `googlePay` params
-     * @returns Promise that resolves to an object with displayData or error
+     *  - To receive Apple Pay billing details back as `kycInfo`, request `.name` and/or `.postalAddress`
+     *    in `applePay.requiredBillingContactFields`
+     *  - To receive Google Pay billing details back as `kycInfo`, ensure that the `GooglePayConfig`
+     *    passed to `configure` has `billingAddressConfig` with `format` set to `Full` and the desired fields
+     *    set to `true`.
+     * @returns Promise that resolves to an object with displayData, optional kycInfo, or error
      */
     collectPaymentMethod: _collectPaymentMethod,
 

package/src/index.tsx

@@ -36,6 +36,10 @@ export * from './types/EmbeddedPaymentElement';
 export * from './types/PaymentSheet';
 export * from './types/ConfirmationToken';
 
+export * from './types/components/PaymentMethodMessagingElementComponent';
+export type { Props as PaymentMethodMessagingElementProps } from './components/PaymentMethodMessagingElement';
+export { PaymentMethodMessagingElement } from './components/PaymentMethodMessagingElement';
+
 //connect components
 export {
   ConnectComponentsProvider,

package/src/specs/NativeOnrampSdkModule.ts

@@ -43,4 +43,4 @@ export interface Spec extends TurboModule {
   removeListeners: (count: number) => void;
 }
 
-export default TurboModuleRegistry.getEnforcing<Spec>('OnrampSdk');
+export default TurboModuleRegistry.get<Spec>('OnrampSdk');

package/src/specs/NativePaymentMethodMessagingElement.ts

@@ -1,21 +1,14 @@
 import type { HostComponent, ViewProps } from 'react-native';
-import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import {
   PaymentMethodMessagingElementAppearance,
   PaymentMethodMessagingElementConfiguration,
-  PaymentMethodMessagingElementState,
 } from '../types/components/PaymentMethodMessagingElementComponent';
 import { UnsafeMixed } from './utils';
 
-interface StateChangeEvent {
-  result: UnsafeMixed<PaymentMethodMessagingElementState>;
-}
-
 export interface NativeProps extends ViewProps {
   appearance?: UnsafeMixed<PaymentMethodMessagingElementAppearance>;
   configuration: UnsafeMixed<PaymentMethodMessagingElementConfiguration>;
-  onStateChange: DirectEventHandler<StateChangeEvent>;
 }
 
 type ComponentType = HostComponent<NativeProps>;

package/src/specs/NativeStripeSdkModule.ts

@@ -36,6 +36,7 @@ import type {
   VerifyMicrodepositsParams,
   CreateRadarSessionResult,
 } from '../types';
+import type { Checkout } from '../types/Checkout';
 import type {
   EmbeddedPaymentElementConfiguration,
   EmbeddedPaymentElementResult,
@@ -63,7 +64,7 @@ export interface Spec extends TurboModule {
   ): Promise<HandleNextActionForSetupResult>;
   confirmPayment(
     paymentIntentClientSecret: string,
-    params?: UnsafeObject<PaymentIntent.ConfirmParams>,
+    params: UnsafeObject<PaymentIntent.ConfirmParams> | null,
     options?: UnsafeObject<PaymentIntent.ConfirmOptions>
   ): Promise<ConfirmPaymentResult>;
   confirmSetupIntent(
@@ -117,6 +118,8 @@ export interface Spec extends TurboModule {
       deviceType: string;
       appName: string;
       appVersion: string;
+      isNewArchitecture: boolean;
+      reactNativeVersion: string;
     };
   };
   canAddCardToWallet(
@@ -205,6 +208,55 @@ export interface Spec extends TurboModule {
   clearEmbeddedPaymentOption(viewTag: Int32): Promise<void>;
   createRadarSession(): Promise<CreateRadarSessionResult>;
 
+  // Checkout Session
+
+  initCheckoutSession(
+    clientSecret: string,
+    configuration: UnsafeObject<Checkout.Configuration>
+  ): Promise<UnsafeObject<{ sessionKey: string; state: Checkout.State }>>;
+
+  checkoutUpdateShippingAddress(
+    sessionKey: string,
+    address: UnsafeObject<Checkout.Address>,
+    name: string | null,
+    phone: string | null
+  ): Promise<UnsafeObject<Checkout.State>>;
+
+  checkoutUpdateBillingAddress(
+    sessionKey: string,
+    address: UnsafeObject<Checkout.Address>,
+    name: string | null,
+    phone: string | null
+  ): Promise<UnsafeObject<Checkout.State>>;
+
+  checkoutApplyPromotionCode(
+    sessionKey: string,
+    code: string
+  ): Promise<UnsafeObject<Checkout.State>>;
+
+  checkoutRemovePromotionCode(
+    sessionKey: string
+  ): Promise<UnsafeObject<Checkout.State>>;
+
+  checkoutUpdateLineItemQuantity(
+    sessionKey: string,
+    lineItemId: string,
+    quantity: number
+  ): Promise<UnsafeObject<Checkout.State>>;
+
+  checkoutSelectShippingOption(
+    sessionKey: string,
+    id: string
+  ): Promise<UnsafeObject<Checkout.State>>;
+
+  checkoutUpdateTaxId(
+    sessionKey: string,
+    type: string,
+    value: string
+  ): Promise<UnsafeObject<Checkout.State>>;
+
+  checkoutRefresh(sessionKey: string): Promise<UnsafeObject<Checkout.State>>;
+
   setFinancialConnectionsForceNativeFlow(enabled: boolean): Promise<void>;
 
   openAuthenticatedWebView(