@stripe/stripe-react-native 0.57.2 → 0.58.0

package/src/connect/EmbeddedComponent.tsx

@@ -8,18 +8,24 @@ import React, {
 import {
   AppState,
   AppStateStatus,
+  Linking,
   Platform,
   StyleProp,
   ViewStyle,
 } from 'react-native';
 import type { WebView, WebViewMessageEvent } from 'react-native-webview';
+import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';
+import type { EventSubscription } from 'react-native';
 import pjson from '../../package.json';
 import NativeStripeSdk from '../specs/NativeStripeSdkModule';
-import {
-  ConnectComponentsPayload,
-  useConnectComponents,
-} from './ConnectComponentsProvider';
-import type { LoadError, LoaderStart } from './connectTypes';
+import { addListener } from '../events';
+import { useConnectComponents } from './ConnectComponentsProvider';
+import type {
+  LoadError,
+  LoaderStart,
+  StripeConnectInitParams,
+} from './connectTypes';
+import type { FinancialConnections } from '../types';
 
 const DEVELOPMENT_MODE = false;
 const DEVELOPMENT_URL =
@@ -36,12 +42,26 @@ if (!/^\d+\.\d+\.\d+$/.test(sdkVersion)) {
   );
 }
 
+// Required for ua-parser-js to detect mobile platforms correctly
+const platformPrefix = Platform.select({
+  ios: 'iPhone',
+  android: 'Android',
+  default: 'Mobile',
+});
 const userAgent = [
-  'Mobile',
+  platformPrefix,
   `Stripe ReactNative SDK ${Platform.OS}/${Platform.Version}`,
   `stripe-react_native/${sdkVersion}`,
 ].join(' - ');
 
+// Allowed domains for in-WebView navigation (matching iOS SDK behavior)
+const ALLOWED_STRIPE_HOSTS = [
+  'connect-js.stripe.com',
+  'connect.stripe.com',
+  'verify.stripe.com',
+  ...(DEVELOPMENT_MODE ? ['10.0.2.2:3001', 'localhost:3001'] : []),
+];
+
 export interface CommonComponentProps {
   onLoaderStart?: ({ elementTagName }: LoaderStart) => void;
   onLoadError?: ({ error, elementTagName }: LoadError) => void;
@@ -110,7 +130,7 @@ type EmbeddedComponentProps = CommonComponentProps & {
   callbacks?: Record<string, ((data: any) => void) | undefined>;
 };
 
-type ConnectComponentsPayloadInternal = ConnectComponentsPayload & {
+type StripeConnectInitParamsInternal = StripeConnectInitParams & {
   overrides?: Record<string, string>;
 };
 
@@ -125,6 +145,12 @@ export function EmbeddedComponent(props: EmbeddedComponentProps) {
     callback: (id: string, url: string | null) => void;
   } | null>(null);
 
+  // Store pending Financial Connections promise
+  const pendingFinancialConnectionsPromise = useRef<{
+    id: string;
+    cleanup: () => void;
+  } | null>(null);
+
   const loadWebViewComponent = useCallback(async () => {
     if (dynamicWebview) return;
 
@@ -162,14 +188,14 @@ export function EmbeddedComponent(props: EmbeddedComponentProps) {
 
     return () => {
       pendingAuthWebViewPromise.current = null;
+      pendingFinancialConnectionsPromise.current?.cleanup();
       subscription.remove();
     };
   }, []);
 
-  const { connectInstance, appearance, locale, overrides } =
-    useConnectComponents() as ConnectComponentsPayloadInternal;
-  const { fonts, publishableKey, fetchClientSecret } =
-    connectInstance.initParams;
+  const { connectInstance, appearance, locale } = useConnectComponents();
+  const { fonts, publishableKey, fetchClientSecret, overrides } =
+    connectInstance.initParams as StripeConnectInitParamsInternal;
 
   const {
     component,
@@ -202,6 +228,7 @@ export function EmbeddedComponent(props: EmbeddedComponentProps) {
   const source = useMemo(() => ({ uri: connectURL }), [connectURL]);
 
   const ref = useRef<WebView>(null);
+  const hasTriedSourceReload = useRef(false);
 
   const [prevAppearance, setPrevAppearance] = useState(appearance);
   const [prevLocale, setPrevLocale] = useState(locale);
@@ -244,6 +271,27 @@ export function EmbeddedComponent(props: EmbeddedComponentProps) {
 
   const WebViewComponent = dynamicWebview?.WebView;
 
+  // Workaround for react-native-webview new architecture bug on iOS
+  // https://github.com/react-native-webview/react-native-webview/pull/3880
+  // The source prop doesn't get set properly on iOS with new architecture,
+  // so we force reload after the component mounts
+  useEffect(() => {
+    if (
+      Platform.OS === 'ios' &&
+      !hasTriedSourceReload.current &&
+      WebViewComponent &&
+      ref.current
+    ) {
+      hasTriedSourceReload.current = true;
+      // Force reload after mount to ensure source is set
+      const timer = setTimeout(() => {
+        ref.current?.reload();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [WebViewComponent]);
+
   const handleAuthWebViewResult = (id: string, resultUrl: string | null) => {
     ref.current?.injectJavaScript(`
       (function() {
@@ -256,6 +304,39 @@ export function EmbeddedComponent(props: EmbeddedComponentProps) {
     `);
   };
 
+  const handleFinancialConnectionsResult = (
+    id: string,
+    result: {
+      session?: FinancialConnections.Session;
+      token?: FinancialConnections.BankAccountToken;
+      error?: {
+        code: string;
+        message: string;
+        localizedMessage?: string;
+        type?: string;
+      };
+    }
+  ) => {
+    ref.current?.injectJavaScript(`
+      (function() {
+        window.callSetterWithSerializableValue(${JSON.stringify({
+          setter: 'setCollectMobileFinancialConnectionsResult',
+          value: {
+            id: id,
+            financialConnectionsSession: result.session
+              ? {
+                  accounts: result.session.accounts,
+                }
+              : null,
+            token: result.token ?? null,
+            error: result.error ?? null,
+          },
+        })});
+        true;
+      })();
+    `);
+  };
+
   const onMessageCallback = useCallback(
     async (event: WebViewMessageEvent) => {
       const message = JSON.parse(event.nativeEvent.data) as {
@@ -283,7 +364,111 @@ export function EmbeddedComponent(props: EmbeddedComponentProps) {
       } else if (message.type === 'accountSessionClaimed') {
         // message.data is of type {elementTagName: string, merchantId: string}
       } else if (message.type === 'openFinancialConnections') {
-        // message.data is of type {clientSecret: string; id: string; connectedAccountId: string;}
+        const messageData = message.data as {
+          clientSecret: string;
+          id: string;
+          connectedAccountId: string;
+        };
+
+        const { clientSecret, id, connectedAccountId } = messageData;
+
+        // Validate client secret
+        if (!clientSecret || typeof clientSecret !== 'string') {
+          handleFinancialConnectionsResult(id, {
+            error: {
+              code: 'InvalidClientSecret',
+              message: 'Invalid or missing clientSecret parameter',
+            },
+          });
+          return;
+        }
+
+        // Prevent multiple simultaneous flows
+        if (pendingFinancialConnectionsPromise.current) {
+          handleFinancialConnectionsResult(id, {
+            error: {
+              code: 'AlreadyInProgress',
+              message: 'Financial Connections flow already in progress',
+            },
+          });
+          return;
+        }
+
+        // Setup event listener for debugging
+        let eventListener: EventSubscription | null = null;
+        if (__DEV__) {
+          eventListener = addListener(
+            'onFinancialConnectionsEvent',
+            (fcEvent: FinancialConnections.FinancialConnectionsEvent) => {
+              console.debug(
+                `[FinancialConnections ${component}]: ${fcEvent.name}`,
+                fcEvent.metadata
+              );
+            }
+          );
+        }
+
+        // Store cleanup function
+        const cleanup = () => {
+          eventListener?.remove();
+          pendingFinancialConnectionsPromise.current = null;
+        };
+
+        pendingFinancialConnectionsPromise.current = {
+          id,
+          cleanup,
+        };
+
+        // Call native Financial Connections
+        NativeStripeSdk.collectFinancialConnectionsAccounts(clientSecret, {
+          connectedAccountId,
+        })
+          .then(({ session, error }) => {
+            cleanup();
+
+            if (error) {
+              handleFinancialConnectionsResult(id, {
+                session: undefined,
+                token: undefined,
+                error: {
+                  code: error.code,
+                  message: error.message,
+                  localizedMessage: error.localizedMessage,
+                  type: error.type,
+                },
+              });
+            } else if (session) {
+              // Note: collectFinancialConnectionsAccounts doesn't return a token
+              // Only collectBankAccountToken returns both session and token
+              handleFinancialConnectionsResult(id, {
+                session,
+                token: undefined,
+                error: undefined,
+              });
+            } else {
+              // Defensive: should never happen
+              handleFinancialConnectionsResult(id, {
+                error: {
+                  code: 'UnexpectedError',
+                  message:
+                    'No session or error returned from Financial Connections',
+                },
+              });
+            }
+          })
+          .catch((unexpectedError) => {
+            cleanup();
+            handleUnexpectedError(unexpectedError);
+            handleFinancialConnectionsResult(id, {
+              error: {
+                code: 'UnexpectedError',
+                message:
+                  unexpectedError instanceof Error
+                    ? unexpectedError.message
+                    : 'An unexpected error occurred during Financial Connections',
+              },
+            });
+          });
       } else if (message.type === 'closeWebView') {
         // message.data is empty
         callbacks?.onCloseWebView?.({});
@@ -347,6 +532,27 @@ export function EmbeddedComponent(props: EmbeddedComponentProps) {
     ]
   );
 
+  const onShouldStartLoadWithRequest = useCallback(
+    (event: ShouldStartLoadRequest) => {
+      const { url } = event;
+
+      // Allow navigation within allowed Stripe domains (matching iOS SDK behavior)
+      if (ALLOWED_STRIPE_HOSTS.some((host) => url.includes(host))) {
+        return true; // Allow in-WebView navigation
+      }
+
+      // Validate and open external links in system browser
+      if (isValidUrl(url)) {
+        Linking.openURL(url).catch((error) => {
+          handleUnexpectedError(error);
+        });
+      }
+
+      return false; // Block in-WebView navigation for external links
+    },
+    [handleUnexpectedError]
+  );
+
   const backgroundColor = appearance?.variables?.colorBackground || '#FFFFFF';
 
   const mergedStyle = useMemo(
@@ -375,6 +581,11 @@ export function EmbeddedComponent(props: EmbeddedComponentProps) {
       // Fixes injectedJavaScriptObject in Android https://github.com/react-native-webview/react-native-webview/issues/3326#issuecomment-3048111789
       injectedJavaScriptBeforeContentLoaded={'(function() {})();'}
       onMessage={onMessageCallback}
+      onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+      // Camera/Media Permissions - matches iOS SDK behavior
+      mediaCapturePermissionGrantType="grantIfSameHostElsePrompt"
+      allowsInlineMediaPlayback={true}
+      mediaPlaybackRequiresUserAction={false}
     />
   );
 }

package/src/connect/connectTypes.ts

@@ -42,7 +42,11 @@ export type EmbeddedErrorType =
   /**
    * API errors covering any other type of problem (e.g., a temporary problem with Stripe's servers), and are extremely uncommon.
    */
-  | 'api_error';
+  | 'api_error'
+  /**
+   * Failure to render the component, typically caused by browser extensions or network issues
+   */
+  | 'render_error';
 
 export type Status =
   | 'blocked'

package/src/hooks/useOnramp.tsx

@@ -174,8 +174,11 @@ export function useOnramp() {
     return NativeOnrampSdk.logout();
   }, []);
 
-  const _isAuthError = (error: any): boolean => {
+  const _isAuthError = (error?: StripeError<OnrampError>): boolean => {
     const stripeErrorCode = error?.stripeErrorCode;
+    if (stripeErrorCode == null) {
+      return false;
+    }
     const authErrorCodes = [
       'consumer_session_credentials_invalid',
       'consumer_session_expired',
@@ -294,6 +297,7 @@ export function useOnramp() {
      * Performs the checkout flow for a crypto onramp session, handling any required authentication steps.
      *
      * @param onrampSessionId The onramp session identifier
+     * @param provideCheckoutClientSecret A callback that asynchronously provides the checkout client secret when requested during the checkout flow. Pass `null` to resolve with an error in the event that a client secret is unavailable.
      * @returns Promise that resolves to an object with an optional error property
      */
     performCheckout: _performCheckout,

package/src/types/EmbeddedPaymentElement.tsx

@@ -195,7 +195,12 @@ export interface EmbeddedPaymentElementConfiguration {
    * Note: Card brand filtering is not currently supported in Link.
    */
   cardBrandAcceptance?: PaymentSheetTypes.CardBrandAcceptance;
-  /** The view can display payment methods like “Card” that, when tapped, open a sheet where customers enter their payment method details.
+  /**
+   * Configuration for filtering cards by funding type.
+   * @note This is a private preview API and will have no effect unless your Stripe account is enrolled in the private preview.
+   */
+  cardFundingFiltering?: PaymentSheetTypes.CardFundingFiltering;
+  /** The view can display payment methods like "Card" that, when tapped, open a sheet where customers enter their payment method details.
    * The sheet has a button at the bottom. `formSheetAction` controls the action the button performs. Defaults to 'continue'.
    */
   formSheetAction?: EmbeddedFormSheetAction;

package/src/types/FinancialConnections.ts

@@ -7,6 +7,8 @@ export type CollectFinancialConnectionsAccountsParams = {
   style?: UserInterfaceStyle;
   /** An optional event listener to receive @type {FinancialConnectionEvent} for specific events during the process of a user connecting their financial accounts. */
   onEvent?: (event: FinancialConnectionsEvent) => void;
+  /** Optional connected account ID to use for this Financial Connections session. Used for Stripe Connect embedded components. */
+  connectedAccountId?: string;
 };
 
 export type SessionResult =

package/src/types/PaymentSheet.ts

@@ -85,6 +85,11 @@ export type SetupParamsBase = IntentParams & {
    * Note: Card brand filtering is not currently supported in Link.
    */
   cardBrandAcceptance?: CardBrandAcceptance;
+  /**
+   * Configuration for filtering cards by funding type.
+   * @note This is a private preview API and will have no effect unless your Stripe account is enrolled in the private preview.
+   */
+  cardFundingFiltering?: CardFundingFiltering;
   /** Configuration for custom payment methods in PaymentSheet */
   customPaymentMethodConfiguration?: CustomPaymentMethodConfiguration;
 };
@@ -680,6 +685,33 @@ export enum PaymentMethodLayout {
   Automatic = 'Automatic',
 }
 
+/**
+ * Card funding types that can be filtered.
+ * @note This is a private preview API and will have no effect unless your Stripe account is enrolled in the private preview.
+ */
+export enum CardFundingType {
+  /** Debit cards */
+  Debit = 'debit',
+  /** Credit cards */
+  Credit = 'credit',
+  /** Prepaid cards */
+  Prepaid = 'prepaid',
+  /**
+   * Unknown or undetermined funding type.
+   * Include this if you want to accept cards where the funding type cannot be determined from card metadata.
+   */
+  Unknown = 'unknown',
+}
+
+/**
+ * Configuration for filtering cards by funding type.
+ * @note This is a private preview API and will have no effect unless your Stripe account is enrolled in the private preview.
+ */
+export type CardFundingFiltering = {
+  /** List of allowed card funding types. If not set, all types are accepted. */
+  allowedCardFundingTypes?: CardFundingType[];
+};
+
 /** Card brand categories that can be allowed or disallowed */
 export enum CardBrandCategory {
   /** Visa branded cards */

package/stripe-react-native.podspec

@@ -2,7 +2,7 @@ require 'json'
 
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 # Keep stripe_version in sync with https://github.com/stripe/stripe-identity-react-native/blob/main/stripe-identity-react-native.podspec
-stripe_version = '~> 25.0.1'
+stripe_version = '~> 25.6.0'
 
 fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
 

package/android/.idea/AndroidProjectSystem.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AndroidProjectSystem">
-    <option name="providerId" value="com.android.tools.idea.GradleProjectSystem" />
-  </component>
-</project>