@stripe/stripe-react-native 0.44.0 → 0.45.0

package/src/types/EmbeddedPaymentElement.tsx

@@ -0,0 +1,467 @@
+/* eslint-disable react-native/no-inline-styles */
+import {
+  LayoutAnimation,
+  Platform,
+  findNodeHandle,
+  EventSubscription,
+  HostComponent,
+} from 'react-native';
+import type {
+  BillingDetails,
+  AddressDetails,
+  UserInterfaceStyle,
+  CardBrand,
+} from './Common';
+import type { PaymentMethod } from '.';
+import * as PaymentSheetTypes from './PaymentSheet';
+import NativeStripeSdkModule from '../specs/NativeStripeSdkModule';
+import {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import React from 'react';
+import { addListener } from '../events';
+import NativeEmbeddedPaymentElement, {
+  Commands,
+  NativeProps,
+} from '../specs/NativeEmbeddedPaymentElement';
+
+// -----------------------------------------------------------------------------
+// Types
+// -----------------------------------------------------------------------------
+
+/**
+ * The final result of a confirm call.
+ * Typically: payment succeeded (“completed”), canceled, or failed with error.
+ */
+export type EmbeddedPaymentElementResult =
+  | { status: 'completed' }
+  | { status: 'canceled' }
+  | { status: 'failed'; error: Error };
+
+/**
+ * Contains details about a payment method that can be displayed to the customer in the embedded payment element UI.
+ */
+export interface PaymentOptionDisplayData {
+  /**
+   * A user-facing label for the payment method, like "Apple Pay" or "•••• 4242" for a card.
+   */
+  label: string;
+  /**
+   * Optional billing details associated with the payment method, such as name, email, or address.
+   */
+  billingDetails?: BillingDetails;
+  /**
+   * A string identifier for the type of payment method.
+   * Stripe values: https://stripe.com/docs/api/payment_methods/object#payment_method_object-type
+   * External methods: https://stripe.com/docs/payments/external-payment-methods?platform=ios#available-external-payment-methods
+   * Apple Pay: "apple_pay"
+   */
+  paymentMethodType: string;
+}
+
+/**
+ * Describes the action performed when the bottom button in the embedded payment form sheet is tapped.
+ * The embedded view may show payment method options such as "Card". When selected, a form sheet appears
+ * for customers to input their payment details. At the bottom of that form sheet is a button.
+ * This type determines what tapping that button does:
+ * - In the `confirm` case, the button says “Pay” or “Set up” and triggers confirmation of the payment or setup intent inside the sheet.
+ * - In the `continue` case, the button says “Continue” and simply dismisses the sheet. The payment or setup is then confirmed outside the sheet, typically in your app.
+ */
+export type EmbeddedFormSheetAction =
+  | {
+      /**
+       * The button says “Pay” or “Set up”. When tapped, it confirms the payment or setup directly within the form sheet.
+       * @param result - Callback invoked with the result of the confirmation. You can use this to show a success message or handle errors.
+       */
+      type: 'confirm';
+      onFormSheetConfirmComplete?: (
+        result: EmbeddedPaymentElementResult
+      ) => void;
+    }
+  | {
+      /**
+       * The button says “Continue”. When tapped, the form sheet closes without confirming anything.
+       * Use this when you want to handle confirmation elsewhere in your app after the customer has filled in their details.
+       */
+      type: 'continue';
+    };
+
+/**
+ * Configuration object (subset of EmbeddedPaymentElement.Configuration).
+ */
+export interface EmbeddedPaymentElementConfiguration {
+  /** Your customer-facing business name. On Android, this is required and cannot be an empty string. */
+  merchantDisplayName: string;
+  /** The identifier of the Stripe Customer object. See https://stripe.com/docs/api/customers/object#customer_object-id */
+  customerId?: string;
+  /** iOS only. Enable Apple Pay in the Payment Sheet by passing an ApplePayParams object.  */
+  applePay?: PaymentSheetTypes.ApplePayParams;
+  /** Android only. Enable Google Pay in the Payment Sheet by passing a GooglePayParams object.  */
+  googlePay?: PaymentSheetTypes.GooglePayParams;
+  /** Configuration for Link */
+  link?: PaymentSheetTypes.LinkParams;
+  /** The color styling to use for PaymentSheet UI. Defaults to 'automatic'. */
+  style?: UserInterfaceStyle;
+  /** A URL that redirects back to your app that EmbeddedPaymentElement can use to auto-dismiss web views used for additional authentication, e.g. 3DS2 */
+  returnURL?: string;
+  /** Configuration for how billing details are collected during checkout. */
+  billingDetailsCollectionConfiguration?: PaymentSheetTypes.BillingDetailsCollectionConfiguration;
+  /** PaymentSheet pre-populates the billing fields that are displayed in the Payment Sheet (only country and postal code, as of this version) with the values provided. */
+  defaultBillingDetails?: BillingDetails;
+  /**
+   * The shipping information for the customer. If set, EmbeddedPaymentElement will pre-populate the form fields with the values provided.
+   * This is used to display a "Billing address is same as shipping" checkbox if `defaultBillingDetails` is not provided.
+   * If `name` and `line1` are populated, it's also [attached to the PaymentIntent](https://stripe.com/docs/api/payment_intents/object#payment_intent_object-shipping) during payment.
+   */
+  defaultShippingDetails?: AddressDetails;
+  /** If true, allows payment methods that do not move money at the end of the checkout. Defaults to false.
+   *
+   * Some payment methods can’t guarantee you will receive funds from your customer at the end of the checkout
+   * because they take time to settle (eg. most bank debits, like SEPA or ACH) or require customer action to
+   * complete (e.g. OXXO, Konbini, Boleto). If this is set to true, make sure your integration listens to webhooks
+   * for notifications on whether a payment has succeeded or not.
+   */
+  allowsDelayedPaymentMethods?: boolean;
+  /** Customizes the appearance of EmbeddedPaymentElement */
+  appearance?: PaymentSheetTypes.AppearanceParams;
+  /** The label to use for the primary button. If not set, Payment Sheet will display suitable default labels for payment and setup intents. */
+  primaryButtonLabel?: string;
+  /** Optional configuration to display a custom message when a saved payment method is removed. iOS only. */
+  removeSavedPaymentMethodMessage?: string;
+  /** The list of preferred networks that should be used to process payments made with a co-branded card.
+   * This value will only be used if your user hasn't selected a network themselves. */
+  preferredNetworks?: Array<CardBrand>;
+  /** By default, EmbeddedPaymentElement will use a dynamic ordering that optimizes payment method display for the customer.
+   *  You can override the default order in which payment methods are displayed in EmbeddedPaymentElement with a list of payment method types.
+   *  See https://stripe.com/docs/api/payment_methods/object#payment_method_object-type for the list of valid types.  You may also pass external payment methods.
+   *  - Example: ["card", "external_paypal", "klarna"]
+   *  - Note: If you omit payment methods from this list, they’ll be automatically ordered by Stripe after the ones you provide. Invalid payment methods are ignored.
+   */
+  paymentMethodOrder?: Array<String>;
+  /** This is an experimental feature that may be removed at any time.
+   *  Defaults to true. If true, the customer can delete all saved payment methods.
+   *  If false, the customer can't delete if they only have one saved payment method remaining.
+   */
+  allowsRemovalOfLastSavedPaymentMethod?: boolean;
+  /**
+   * By default, EmbeddedPaymentElement will accept all supported cards by Stripe.
+   * You can specify card brands EmbeddedPaymentElement should block or allow payment for by providing an array of those card brands.
+   * Note: This is only a client-side solution.
+   * 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.
+   * The sheet has a button at the bottom. `formSheetAction` controls the action the button performs.
+   */
+  formSheetAction?: EmbeddedFormSheetAction;
+}
+
+// -----------------------------------------------------------------------------
+// Embedded API
+// -----------------------------------------------------------------------------
+
+class EmbeddedPaymentElement {
+  /**
+   * Call this when the intent configuration changes (e.g., amount or currency).
+   * Cancels any in-progress update. Ensures the correct payment methods are shown and fields are collected.
+   * If the selected payment option becomes invalid, it may be cleared.
+   * Returns the final result of the update; earlier in-flight updates will return `{ status: 'canceled' }`.
+   */
+  async update(intentConfig: PaymentSheetTypes.IntentConfiguration) {
+    const result =
+      await NativeStripeSdkModule.updateEmbeddedPaymentElement(intentConfig);
+    return result;
+  }
+
+  /**
+   * Confirm the payment or setup intent.
+   * Waits for any in-progress `update()` call to finish before proceeding.
+   * May present authentication flows (e.g., 3DS) if required.
+   * Requires the most recent `update()` call to have succeeded.
+   * Returns the final result: success, failure, or cancellation.
+   */
+  async confirm(): Promise<EmbeddedPaymentElementResult> {
+    const result =
+      await NativeStripeSdkModule.confirmEmbeddedPaymentElement(-1);
+    return result;
+  }
+
+  /** Clear the currently selected payment option (reset to null). */
+  clearPaymentOption(): void {
+    NativeStripeSdkModule.clearEmbeddedPaymentOption(-1);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// JS Factory: createEmbeddedPaymentElement
+// -----------------------------------------------------------------------------
+let confirmHandlerCallback: EventSubscription | null = null;
+let formSheetActionConfirmCallback: EventSubscription | null = null;
+
+async function createEmbeddedPaymentElement(
+  intentConfig: PaymentSheetTypes.IntentConfiguration,
+  configuration: EmbeddedPaymentElementConfiguration
+): Promise<EmbeddedPaymentElement> {
+  setupConfirmHandlers(intentConfig, configuration);
+
+  await NativeStripeSdkModule.createEmbeddedPaymentElement(
+    intentConfig,
+    configuration
+  );
+  return new EmbeddedPaymentElement();
+}
+
+function setupConfirmHandlers(
+  intentConfig: PaymentSheetTypes.IntentConfiguration,
+  configuration: EmbeddedPaymentElementConfiguration
+) {
+  const confirmHandler = intentConfig.confirmHandler;
+  if (confirmHandler) {
+    confirmHandlerCallback?.remove();
+    confirmHandlerCallback = addListener(
+      'onConfirmHandlerCallback',
+      ({
+        paymentMethod,
+        shouldSavePaymentMethod,
+      }: {
+        paymentMethod: PaymentMethod.Result;
+        shouldSavePaymentMethod: boolean;
+      }) => {
+        confirmHandler(
+          paymentMethod,
+          shouldSavePaymentMethod,
+          NativeStripeSdkModule.intentCreationCallback
+        );
+      }
+    );
+  }
+
+  if (configuration.formSheetAction?.type === 'confirm') {
+    const confirmFormSheetHandler =
+      configuration.formSheetAction.onFormSheetConfirmComplete;
+    if (confirmFormSheetHandler) {
+      formSheetActionConfirmCallback?.remove();
+      formSheetActionConfirmCallback = addListener(
+        'embeddedPaymentElementFormSheetConfirmComplete',
+        (result: EmbeddedPaymentElementResult) => {
+          // Pass the result back to the formSheetAction handler
+          confirmFormSheetHandler(result);
+        }
+      );
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Hook: useEmbeddedPaymentElement
+// -----------------------------------------------------------------------------
+export interface UseEmbeddedPaymentElementResult {
+  // A view that displays payment methods. It can present a sheet to collect more details or display saved payment methods.
+  embeddedPaymentElementView: ReactElement | null;
+  /**
+   * Contains information about the customer's selected payment option.
+   * Use this to display the payment option in your own UI
+   */
+  paymentOption: PaymentOptionDisplayData | null;
+  /**
+   * Completes the payment or setup.
+   * @returns {Promise} The result of the payment after any presented view controllers are dismissed.
+   * @note This method requires that the last call to `update` succeeded. If the last `update` call failed, this call will fail. If this method is called while a call to `update` is in progress, it waits until the `update` call completes.
+   */
+  confirm: () => Promise<EmbeddedPaymentElementResult>;
+  /**
+   * Call this method when the IntentConfiguration values you used to initialize `EmbeddedPaymentElement` (amount, currency, etc.) change.
+   * This ensures the appropriate payment methods are displayed, collect the right fields, etc.
+   * @param {Object} intentConfiguration - An updated IntentConfiguration.
+   * @throws {Error} Sets loadingError if the update fails.
+   * @note Upon completion, `paymentOption` may become null if it's no longer available.
+   * @note If you call `update` while a previous call to `update` is still in progress, the previous call is canceled.
+   */
+  update: (intentConfig: PaymentSheetTypes.IntentConfiguration) => void;
+  // Sets the currently selected payment option to null
+  clearPaymentOption: () => void;
+  // Any error encountered during creation/update, or null
+  loadingError: Error | null;
+}
+
+/**
+ * An asynchronous failable initializer
+ * Loads the Customer's payment methods, their default payment method, etc.
+ * @param {Object} intentConfiguration - Information about the PaymentIntent or SetupIntent you will create later to complete the confirmation.
+ * @param {Object} configuration - Configuration for the PaymentSheet. e.g. your business name, customer details, etc.
+ * @returns {EmbeddedPaymentElement|null} A valid EmbeddedPaymentElement instance if successful, null otherwise.
+ * @description If loading fails, this function sets the loadingError state variable instead of throwing an error.
+ */
+export function useEmbeddedPaymentElement(
+  intentConfig: PaymentSheetTypes.IntentConfiguration,
+  configuration: EmbeddedPaymentElementConfiguration
+): UseEmbeddedPaymentElementResult {
+  const isAndroid = Platform.OS === 'android';
+  const elementRef = useRef<EmbeddedPaymentElement | null>(null);
+  const [element, setElement] = useState<EmbeddedPaymentElement | null>(null);
+  const [paymentOption, setPaymentOption] =
+    useState<PaymentOptionDisplayData | null>(null);
+  const [height, setHeight] = useState<number | undefined>();
+  const viewRef = useRef<React.ComponentRef<HostComponent<NativeProps>>>(null);
+  const [loadingError, setLoadingError] = useState<Error | null>(null);
+
+  function getElementOrThrow(ref: {
+    current: EmbeddedPaymentElement | null;
+  }): EmbeddedPaymentElement {
+    if (!ref.current) {
+      throw new Error(
+        'EmbeddedPaymentElement is not ready yet – wait until it finishes loading before calling this API.'
+      );
+    }
+    return ref.current;
+  }
+
+  // Create embedded payment element
+  useEffect(() => {
+    let active = true;
+    (async () => {
+      const el = await createEmbeddedPaymentElement(
+        intentConfig,
+        configuration
+      );
+      if (!active) return;
+      elementRef.current = el;
+      setElement(el);
+    })();
+    const getCurrentRef = () => viewRef.current;
+
+    return () => {
+      active = false;
+      elementRef.current?.clearPaymentOption();
+      elementRef.current = null;
+
+      const currentRef = getCurrentRef();
+
+      if (isAndroid && currentRef) {
+        Commands.clearPaymentOption(currentRef);
+      }
+
+      setElement(null);
+    };
+  }, [intentConfig, configuration, viewRef, isAndroid]);
+
+  useEffect(() => {
+    const sub = addListener(
+      'embeddedPaymentElementDidUpdatePaymentOption',
+      ({ paymentOption: opt }) => setPaymentOption(opt ?? null)
+    );
+    return () => sub.remove();
+  });
+
+  // Listen for height changes
+  useEffect(() => {
+    const sub = addListener(
+      'embeddedPaymentElementDidUpdateHeight',
+      ({ height: h }) => {
+        // ignore zero
+        if (h > 0) {
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+          setHeight(h);
+        }
+      }
+    );
+    return () => sub.remove();
+  }, []);
+
+  // Listen for loading failures
+  useEffect(() => {
+    const sub = addListener(
+      'embeddedPaymentElementLoadingFailed',
+      (nativeError: { message: string }) => {
+        setLoadingError(new Error(nativeError.message));
+      }
+    );
+    return () => sub.remove();
+  }, []);
+
+  // Render the embedded view
+  const embeddedPaymentElementView = useMemo(() => {
+    if (isAndroid && configuration && intentConfig) {
+      return (
+        <NativeEmbeddedPaymentElement
+          ref={viewRef}
+          style={[{ width: '100%', height: height }]}
+          configuration={configuration}
+          intentConfiguration={intentConfig}
+        />
+      );
+    }
+    if (!element) return null;
+    return (
+      <NativeEmbeddedPaymentElement
+        ref={viewRef}
+        style={{ width: '100%', height }}
+        configuration={configuration}
+        intentConfiguration={intentConfig}
+      />
+    );
+  }, [configuration, element, height, intentConfig, isAndroid]);
+
+  // Other APIs
+  const confirm = useCallback((): Promise<EmbeddedPaymentElementResult> => {
+    const currentRef = viewRef.current;
+
+    if (isAndroid) {
+      if (currentRef) {
+        const promise = new Promise<EmbeddedPaymentElementResult>((resolve) => {
+          const sub = addListener(
+            'embeddedPaymentElementFormSheetConfirmComplete',
+            (result: EmbeddedPaymentElementResult) => {
+              sub.remove();
+              resolve(result);
+            }
+          );
+        });
+
+        Commands.confirm(currentRef);
+
+        return promise;
+      } else {
+        return Promise.reject(
+          new Error('Unable to find Android embedded payment element view!')
+        );
+      }
+    }
+
+    // iOS: just proxy to the native hook
+    return getElementOrThrow(elementRef).confirm();
+  }, [isAndroid]);
+  const update = useCallback(
+    (cfg: PaymentSheetTypes.IntentConfiguration) =>
+      getElementOrThrow(elementRef).update(cfg),
+    []
+  );
+  const clearPaymentOption = useCallback((): Promise<void> => {
+    if (isAndroid) {
+      const tag = findNodeHandle(viewRef.current);
+      if (tag == null) {
+        return Promise.reject(new Error('Unable to find Android view handle'));
+      }
+      return NativeStripeSdkModule.clearEmbeddedPaymentOption(tag);
+    }
+
+    // iOS: clear on the element instance
+    getElementOrThrow(elementRef).clearPaymentOption();
+    return Promise.resolve();
+  }, [isAndroid]);
+
+  return {
+    embeddedPaymentElementView,
+    paymentOption,
+    confirm,
+    update,
+    clearPaymentOption,
+    loadingError,
+  };
+}

package/src/types/PaymentSheet.ts

@@ -84,10 +84,6 @@ export type SetupParamsBase = IntentParams & {
    * Note: Card brand filtering is not currently supported in Link.
    */
   cardBrandAcceptance?: CardBrandAcceptance;
-  /** (Private Preview) This parameter is expected to be removed once we GA this feature
-   * When using customerSessions, allow users to update their saved cards
-   */
-  updatePaymentMethodEnabled?: boolean;
 };
 
 export type SetupParams =
@@ -207,6 +203,9 @@ export type AppearanceParams = RecursivePartial<{
   };
   /** Describes the appearance of the primary "Pay" button at the bottom of your Payment Sheet */
   primaryButton: PrimaryButtonConfig;
+
+  /** Describes the appearance of the Embedded Mobile Payment Element */
+  embeddedPaymentElement: EmbeddedPaymentElementAppearance;
 }>;
 
 export type FontConfig = {
@@ -332,6 +331,117 @@ export type PrimaryButtonColorConfig = {
   border: string;
 };
 
+/** A color that’s either a single hex or a light/dark pair */
+export type ThemedColor = string | { light: string; dark: string };
+
+/** Represents edge insets */
+export interface EdgeInsetsConfig {
+  top?: number;
+  left?: number;
+  bottom?: number;
+  right?: number;
+}
+
+/** Display styles for rows in the Embedded Mobile Payment Element */
+export enum RowStyle {
+  /** A flat style with radio buttons */
+  FlatWithRadio = 'flatWithRadio',
+  /** A floating button style */
+  FloatingButton = 'floatingButton',
+  /** A flat style with a checkmark */
+  FlatWithCheckmark = 'flatWithCheckmark',
+}
+
+/** Describes the appearance of the radio button */
+export interface RadioConfig {
+  /** The color of the radio button when selected, represented as a hex string #AARRGGBB or #RRGGBB.
+   * @default The root appearance.colors.primary
+   */
+  selectedColor?: ThemedColor;
+
+  /** The color of the radio button when unselected, represented as a hex string #AARRGGBB or #RRGGBB.
+   * @default The root appearance.colors.componentBorder
+   */
+  unselectedColor?: ThemedColor;
+}
+
+/** Describes the appearance of the checkmark */
+export interface CheckmarkConfig {
+  /** The color of the checkmark when selected, represented as a hex string #AARRGGBB or #RRGGBB.
+   * @default The root appearance.colors.primary
+   */
+  color?: ThemedColor;
+}
+
+/** Describes the appearance of the flat style row */
+export interface FlatConfig {
+  /** The thickness of the separator line between rows.
+   * @default 1.0
+   */
+  separatorThickness?: number;
+
+  /** The color of the separator line between rows, represented as a hex string #AARRGGBB or #RRGGBB.
+   * @default The root appearance.colors.componentBorder
+   */
+  separatorColor?: ThemedColor;
+
+  /** The insets of the separator line between rows.
+   * @default { top: 0, left: 30, bottom: 0, right: 0 } for RowStyle.FlatWithRadio
+   * @default { top: 0, left: 0, bottom: 0, right: 0 } for RowStyle.FlatWithCheckmark and RowStyle.FloatingButton
+   */
+  separatorInsets?: EdgeInsetsConfig;
+
+  /** Determines if the top separator is visible at the top of the Element.
+   * @default true
+   */
+  topSeparatorEnabled?: boolean;
+
+  /** Determines if the bottom separator is visible at the bottom of the Element.
+   * @default true
+   */
+  bottomSeparatorEnabled?: boolean;
+
+  /** Appearance settings for the radio button (used when RowStyle is FlatWithRadio) */
+  radio?: RadioConfig;
+
+  /** Appearance settings for the checkmark (used when RowStyle is FlatWithCheckmark) */
+  checkmark?: CheckmarkConfig;
+}
+
+/** Describes the appearance of the floating button style payment method row */
+export interface FloatingConfig {
+  /** The spacing between payment method rows.
+   * @default 12.0
+   */
+  spacing?: number;
+}
+
+/** Describes the appearance of the row in the Embedded Mobile Payment Element */
+export interface RowConfig {
+  /** The display style of the row.
+   * @default RowStyle.FlatWithRadio
+   */
+  style?: RowStyle;
+
+  /** Additional vertical insets applied to a payment method row.
+   * Increasing this value increases the height of each row.
+   * @default 6.0
+   */
+  additionalInsets?: number;
+
+  /** Appearance settings for the flat style row */
+  flat?: FlatConfig;
+
+  /** Appearance settings for the floating button style row */
+  floating?: FloatingConfig;
+}
+
+/** Describes the appearance of the Embedded Mobile Payment Element */
+export interface EmbeddedPaymentElementAppearance {
+  /** Describes the appearance of the row in the Embedded Mobile Payment Element */
+  row?: RowConfig;
+}
+
 type RecursivePartial<T> = {
   [P in keyof T]?: T[P] extends (infer U)[]
     ? RecursivePartial<U>[]

package/src/types/components/CardFieldInput.ts

@@ -55,14 +55,13 @@ export type OnFocusChangeEvent = NativeSyntheticEvent<{
   focusedField: FieldName | null;
 }>;
 
-export type OnCardChangeEvent = NativeSyntheticEvent<Details>;
+export type OnCardChangeEvent = NativeSyntheticEvent<{ card: Details }>;
 
 /**
  * @ignore
  */
 export interface NativeProps {
   style?: StyleProp<ViewStyle>;
-  value?: Partial<Details>;
   postalCodeEnabled?: boolean;
   autofocus?: boolean;
   countryCode: string | null;

package/src/types/components/CardFormView.ts

@@ -53,7 +53,7 @@ export type OnFocusChangeEvent = NativeSyntheticEvent<{
   focusedField: FieldName | null;
 }>;
 
-export type OnFormCompleteEvent = NativeSyntheticEvent<Details>;
+export type OnFormCompleteEvent = NativeSyntheticEvent<{ card: Details }>;
 
 /**
  * @ignore

package/stripe-react-native.podspec

@@ -2,7 +2,9 @@ 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 = '~> 24.11.0'
+stripe_version = '~> 24.12.0'
+
+fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
 
 Pod::Spec.new do |s|
   s.name         = 'stripe-react-native'
@@ -16,7 +18,19 @@ Pod::Spec.new do |s|
   s.source       = { git: 'https://github.com/stripe/stripe-react-native.git', tag: s.version.to_s }
 
   s.source_files = 'ios/**/*.{h,m,mm,swift}'
-  s.exclude_files = 'ios/Tests/'
+  s.exclude_files = [ 'ios/Tests/', 'ios/NewArch/' ]
+  # These headers contain c++ code so make sure they are private to avoid
+  # being exported to the umbrella header, which is used by swift interop.
+  # StripeSwiftInterop.h will cause circular dependency issues.
+  s.private_header_files = [ 'ios/StripeSdk.h', 'ios/StripeSwiftInterop.h' ]
+
+  s.header_dir = 'stripe_react_native'
+  s.pod_target_xcconfig = {
+    'USE_HEADERMAP' => 'YES',
+    'DEFINES_MODULE' => 'YES',
+    'CLANG_CXX_LANGUAGE_STANDARD' => 'c++20',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule',
+  }
 
   s.test_spec 'Tests' do |test_spec|
     test_spec.platforms    = { ios: '15.1' }
@@ -30,4 +44,15 @@ Pod::Spec.new do |s|
   s.dependency 'StripePaymentsUI', stripe_version
   s.dependency 'StripeApplePay', stripe_version
   s.dependency 'StripeFinancialConnections', stripe_version
+
+  if fabric_enabled
+    install_modules_dependencies(s)
+
+    s.subspec "NewArch" do |ss|
+      ss.source_files = "ios/NewArch/**/*.{h,m,mm}"
+      # These headers contain c++ code so make sure they are private to avoid
+      # being exported to the umbrella header, which is used by swift interop.
+      ss.private_header_files = '**/*.h'
+    end
+  end
 end