@stripe/stripe-react-native 0.44.0 → 0.46.0

package/android/src/main/java/com/reactnativestripesdk/PaymentOptionDisplayDataMapper.kt

@@ -0,0 +1,17 @@
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.reactnativestripesdk.utils.mapFromPaymentSheetBillingDetails
+import com.stripe.android.paymentelement.EmbeddedPaymentElement
+import com.stripe.android.paymentelement.ExperimentalEmbeddedPaymentElementApi
+
+/**
+ * Serialize Stripe's PaymentOptionDisplayData into a WritableMap
+ * that can be sent over the RN bridge.
+ */
+@OptIn(ExperimentalEmbeddedPaymentElementApi::class)
+fun EmbeddedPaymentElement.PaymentOptionDisplayData.toWritableMap(): WritableMap =
+  Arguments.createMap().apply {
+    putString("label", label)
+    putString("paymentMethodType", paymentMethodType)
+    putMap("billingDetails", mapFromPaymentSheetBillingDetails(billingDetails))
+  }

package/android/src/main/java/com/reactnativestripesdk/PaymentSheetAppearance.kt

@@ -1,11 +1,15 @@
 package com.reactnativestripesdk
 
+import android.annotation.SuppressLint
 import android.content.Context
+import android.content.res.Configuration
 import android.graphics.Color
 import android.os.Bundle
 import com.reactnativestripesdk.utils.PaymentSheetAppearanceException
+import com.stripe.android.paymentelement.ExperimentalEmbeddedPaymentElementApi
 import com.stripe.android.paymentsheet.PaymentSheet
 
+@SuppressLint("RestrictedApi")
 fun buildPaymentSheetAppearance(
   userParams: Bundle?,
   context: Context,
@@ -14,6 +18,28 @@ fun buildPaymentSheetAppearance(
   val lightColorParams = colorParams?.getBundle(PaymentSheetAppearanceKeys.LIGHT) ?: colorParams
   val darkColorParams = colorParams?.getBundle(PaymentSheetAppearanceKeys.DARK) ?: colorParams
 
+  val embeddedAppearance =
+    buildEmbeddedAppearance(
+      userParams?.getBundle(PaymentSheetAppearanceKeys.EMBEDDED_PAYMENT_ELEMENT),
+      lightColorParams,
+      context,
+    )
+
+  embeddedAppearance?.let {
+    return PaymentSheet.Appearance(
+      typography = buildTypography(userParams?.getBundle(PaymentSheetAppearanceKeys.FONT), context),
+      colorsLight = buildColors(lightColorParams, PaymentSheet.Colors.defaultLight),
+      colorsDark = buildColors(darkColorParams, PaymentSheet.Colors.defaultDark),
+      shapes = buildShapes(userParams?.getBundle(PaymentSheetAppearanceKeys.SHAPES)),
+      primaryButton =
+        buildPrimaryButton(
+          userParams?.getBundle(PaymentSheetAppearanceKeys.PRIMARY_BUTTON),
+          context,
+        ),
+      embeddedAppearance = embeddedAppearance,
+    )
+  }
+
   return PaymentSheet.Appearance(
     typography = buildTypography(userParams?.getBundle(PaymentSheetAppearanceKeys.FONT), context),
     colorsLight = buildColors(lightColorParams, PaymentSheet.Colors.defaultLight),
@@ -213,6 +239,205 @@ private fun buildPrimaryButtonColors(
       ),
   )
 
+@OptIn(ExperimentalEmbeddedPaymentElementApi::class)
+@SuppressLint("RestrictedApi")
+@Throws(PaymentSheetAppearanceException::class)
+private fun buildEmbeddedAppearance(
+  embeddedParams: Bundle?,
+  defaultColorsBundle: Bundle?,
+  context: Context,
+): PaymentSheet.Appearance.Embedded? {
+  if (embeddedParams == null) {
+    return null
+  }
+
+  val rowParams =
+    getBundleOrNull(embeddedParams, PaymentSheetAppearanceKeys.ROW)
+      ?: return null
+
+  val defaultColors = buildColors(defaultColorsBundle, PaymentSheet.Colors.defaultLight)
+
+  // Default style
+  val styleString = rowParams.getString(PaymentSheetAppearanceKeys.STYLE, "flatWithRadio")
+
+  val defaultAdditionalInsetsDp = 6.0f
+  val defaultSeparatorThicknessDp = 1.0f
+  val defaultSpacingDp = 12.0f
+  val defaultCheckmarkInsetDp = 0f
+
+  val additionalInsets = getFloatOr(rowParams, PaymentSheetAppearanceKeys.ADDITIONAL_INSETS, defaultAdditionalInsetsDp)
+
+  val rowStyle: PaymentSheet.Appearance.Embedded.RowStyle =
+    when (styleString) {
+      "flatWithRadio" -> {
+        val flatParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLAT)
+        val radioParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.RADIO)
+        val separatorInsetsParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
+
+        // Default separator insets specific to FlatWithRadio
+        val defaultSeparatorStartInsetDp = 30.0f
+        val defaultSeparatorEndInsetDp = 0.0f
+
+        // Parse dimensions as Floats
+        val separatorThickness = getFloatOr(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_THICKNESS, defaultSeparatorThicknessDp)
+        val startSeparatorInset = getFloatOr(separatorInsetsParams, PaymentSheetAppearanceKeys.LEFT, defaultSeparatorStartInsetDp)
+        val endSeparatorInset = getFloatOr(separatorInsetsParams, PaymentSheetAppearanceKeys.RIGHT, defaultSeparatorEndInsetDp)
+
+        // Parse booleans
+        val topEnabled = getBooleanOr(flatParams, PaymentSheetAppearanceKeys.TOP_SEPARATOR_ENABLED, true)
+        val bottomEnabled = getBooleanOr(flatParams, PaymentSheetAppearanceKeys.BOTTOM_SEPARATOR_ENABLED, true)
+
+        // Parse individual colors using default colors
+        val parsedSeparatorColor =
+          dynamicColorFromParams(
+            context,
+            flatParams,
+            PaymentSheetAppearanceKeys.SEPARATOR_COLOR,
+            defaultColors.componentBorder,
+          )
+
+        val parsedSelectedColor =
+          dynamicColorFromParams(
+            context,
+            radioParams,
+            PaymentSheetAppearanceKeys.SELECTED_COLOR,
+            defaultColors.primary,
+          )
+
+        val parsedUnselectedColor =
+          dynamicColorFromParams(
+            context,
+            radioParams,
+            PaymentSheetAppearanceKeys.UNSELECTED_COLOR,
+            defaultColors.componentBorder,
+          )
+
+        val flatRadioColors =
+          PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Colors(
+            separatorColor = parsedSeparatorColor,
+            unselectedColor = parsedUnselectedColor,
+            selectedColor = parsedSelectedColor,
+          )
+
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio(
+          separatorThicknessDp = separatorThickness,
+          startSeparatorInsetDp = startSeparatorInset,
+          endSeparatorInsetDp = endSeparatorInset,
+          topSeparatorEnabled = topEnabled,
+          bottomSeparatorEnabled = bottomEnabled,
+          additionalVerticalInsetsDp = additionalInsets,
+          horizontalInsetsDp = 0.0F, // We do not have an iOS equal for this API so it's not configurable in React Native
+          colorsLight = flatRadioColors,
+          colorsDark = flatRadioColors,
+        )
+      }
+      "flatWithCheckmark" -> {
+        val flatParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLAT)
+        val checkmarkParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.CHECKMARK)
+        val separatorInsetsParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
+
+        // Default separator insets specific to FlatWithCheckmark
+        val defaultSeparatorStartInsetDp = 0.0f
+        val defaultSeparatorEndInsetDp = 0.0f
+
+        // Parse dimensions as Floats
+        val separatorThickness = getFloatOr(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_THICKNESS, defaultSeparatorThicknessDp)
+        val startSeparatorInset = getFloatOr(separatorInsetsParams, PaymentSheetAppearanceKeys.LEFT, defaultSeparatorStartInsetDp)
+        val endSeparatorInset = getFloatOr(separatorInsetsParams, PaymentSheetAppearanceKeys.RIGHT, defaultSeparatorEndInsetDp)
+        val checkmarkInset = getFloatOr(checkmarkParams, PaymentSheetAppearanceKeys.CHECKMARK_INSET, defaultCheckmarkInsetDp)
+
+        // Parse booleans
+        val topEnabled = getBooleanOr(flatParams, PaymentSheetAppearanceKeys.TOP_SEPARATOR_ENABLED, true)
+        val bottomEnabled = getBooleanOr(flatParams, PaymentSheetAppearanceKeys.BOTTOM_SEPARATOR_ENABLED, true)
+
+        // Parse individual colors using root defaults
+        val parsedSeparatorColor =
+          dynamicColorFromParams(
+            context,
+            flatParams,
+            PaymentSheetAppearanceKeys.SEPARATOR_COLOR,
+            defaultColors.componentBorder,
+          )
+
+        val parsedCheckmarkColor =
+          dynamicColorFromParams(
+            context,
+            checkmarkParams,
+            PaymentSheetAppearanceKeys.COLOR,
+            defaultColors.primary,
+          )
+
+        // Create the required Colors object
+        val flatCheckmarkColors =
+          PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Colors(
+            separatorColor = parsedSeparatorColor,
+            checkmarkColor = parsedCheckmarkColor,
+          )
+
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark(
+          separatorThicknessDp = separatorThickness,
+          startSeparatorInsetDp = startSeparatorInset,
+          endSeparatorInsetDp = endSeparatorInset,
+          topSeparatorEnabled = topEnabled,
+          bottomSeparatorEnabled = bottomEnabled,
+          checkmarkInsetDp = checkmarkInset,
+          additionalVerticalInsetsDp = additionalInsets,
+          horizontalInsetsDp = 0.0F, // We do not have an iOS equal for this API so it's not configurable in React Native
+          colorsLight = flatCheckmarkColors,
+          colorsDark = flatCheckmarkColors,
+        )
+      }
+      "floatingButton" -> {
+        val floatingParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLOATING)
+        PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton(
+          additionalInsetsDp = additionalInsets,
+          spacingDp = getFloatOr(floatingParams, PaymentSheetAppearanceKeys.SPACING, defaultSpacingDp),
+        )
+      }
+      else -> {
+        System.err.println("WARN: Unsupported embedded payment element row style received: $styleString. Falling back to default.")
+        return null
+      }
+    }
+
+  return PaymentSheet.Appearance.Embedded(style = rowStyle)
+}
+
+/**
+ * Pulls a light/dark hex‑string map out of [params],
+ * chooses the right one based on the current UI mode,
+ * and parses it (falling back to [defaultColor]).
+ */
+private fun dynamicColorFromParams(
+  context: Context,
+  params: Bundle?,
+  key: String,
+  defaultColor: Int,
+): Int {
+  // Expect a nested Bundle { "light": "#RRGGBB", "dark": "#RRGGBB" }
+  val colorBundle = params?.getBundle(key)
+  if (colorBundle != null) {
+    val isDark =
+      (
+        context.resources.configuration.uiMode
+          and Configuration.UI_MODE_NIGHT_MASK
+      ) == Configuration.UI_MODE_NIGHT_YES
+
+    // Pick the hex for current mode, or null
+    val hex =
+      if (isDark) {
+        colorBundle.getString(PaymentSheetAppearanceKeys.DARK)
+      } else {
+        colorBundle.getString(PaymentSheetAppearanceKeys.LIGHT)
+      }
+
+    return colorFromHexOrDefault(hex, defaultColor)
+  }
+
+  // no override bundle → just use default
+  return defaultColor
+}
+
 private fun getDoubleOrNull(
   bundle: Bundle?,
   key: String,
@@ -250,6 +475,22 @@ private fun getFloatOr(
   return defaultValue
 }
 
+private fun getBundleOrNull(
+  bundle: Bundle?,
+  key: String,
+): Bundle? = bundle?.getBundle(key)
+
+private fun getBooleanOr(
+  bundle: Bundle?,
+  key: String,
+  defaultValue: Boolean,
+): Boolean =
+  if (bundle?.containsKey(key) == true) {
+    bundle.getBoolean(key)
+  } else {
+    defaultValue
+  }
+
 private fun getFloatOrNull(
   bundle: Bundle?,
   key: String,
@@ -327,5 +568,30 @@ private class PaymentSheetAppearanceKeys {
     const val PRIMARY_BUTTON = "primaryButton"
     const val TEXT = "text"
     const val BORDER = "border"
+
+    const val EMBEDDED_PAYMENT_ELEMENT = "embeddedPaymentElement"
+    const val ROW = "row"
+    const val STYLE = "style"
+    const val ADDITIONAL_INSETS = "additionalInsets"
+
+    const val FLAT = "flat"
+    const val SEPARATOR_THICKNESS = "separatorThickness"
+    const val SEPARATOR_COLOR = "separatorColor"
+    const val SEPARATOR_INSETS = "separatorInsets"
+    const val TOP_SEPARATOR_ENABLED = "topSeparatorEnabled"
+    const val BOTTOM_SEPARATOR_ENABLED = "bottomSeparatorEnabled"
+    const val RADIO = "radio"
+    const val SELECTED_COLOR = "selectedColor"
+    const val UNSELECTED_COLOR = "unselectedColor"
+    const val CHECKMARK = "checkmark"
+    const val COLOR = "color"
+    const val CHECKMARK_INSET = "inset"
+
+    const val FLOATING = "floating"
+    const val SPACING = "spacing"
+
+    // Keys for EdgeInsetsConfig
+    const val LEFT = "left"
+    const val RIGHT = "right"
   }
 }

package/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt

@@ -11,13 +11,8 @@ import android.os.Bundle
 import android.os.Handler
 import android.os.Looper
 import android.util.Base64
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.graphics.drawable.DrawableCompat
-import androidx.fragment.app.Fragment
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
@@ -30,6 +25,7 @@ import com.reactnativestripesdk.utils.KeepJsAwakeTask
 import com.reactnativestripesdk.utils.PaymentSheetAppearanceException
 import com.reactnativestripesdk.utils.PaymentSheetErrorType
 import com.reactnativestripesdk.utils.PaymentSheetException
+import com.reactnativestripesdk.utils.StripeFragment
 import com.reactnativestripesdk.utils.createError
 import com.reactnativestripesdk.utils.createResult
 import com.reactnativestripesdk.utils.mapFromPaymentMethod
@@ -48,10 +44,9 @@ import java.io.ByteArrayOutputStream
 import kotlin.Exception
 
 @OptIn(ExperimentalAllowsRemovalOfLastSavedPaymentMethodApi::class)
-class PaymentSheetFragment(
-  private val context: ReactApplicationContext,
-  private val initPromise: Promise,
-) : Fragment() {
+class PaymentSheetFragment : StripeFragment() {
+  private lateinit var context: ReactApplicationContext
+  private lateinit var initPromise: Promise
   private var paymentSheet: PaymentSheet? = null
   private var flowController: PaymentSheet.FlowController? = null
   private var paymentIntentClientSecret: String? = null
@@ -64,17 +59,7 @@ class PaymentSheetFragment(
   internal var paymentSheetIntentCreationCallback = CompletableDeferred<ReadableMap>()
   private var keepJsAwake: KeepJsAwakeTask? = null
 
-  override fun onCreateView(
-    inflater: LayoutInflater,
-    container: ViewGroup?,
-    savedInstanceState: Bundle?,
-  ): View = FrameLayout(requireActivity()).also { it.visibility = View.GONE }
-
-  override fun onViewCreated(
-    view: View,
-    savedInstanceState: Bundle?,
-  ) {
-    super.onViewCreated(view, savedInstanceState)
+  override fun prepare() {
     val merchantDisplayName = arguments?.getString("merchantDisplayName").orEmpty()
     if (merchantDisplayName.isEmpty()) {
       initPromise.resolve(
@@ -163,11 +148,13 @@ class PaymentSheetFragment(
                 ),
               )
             }
+
             is PaymentSheetResult.Failed -> {
               resolvePaymentResult(
                 createError(PaymentSheetErrorType.Failed.toString(), paymentResult.error),
               )
             }
+
             is PaymentSheetResult.Completed -> {
               resolvePaymentResult(WritableNativeMap())
               // Remove the fragment now, we can be sure it won't be needed again if an intent is
@@ -183,22 +170,13 @@ class PaymentSheetFragment(
     val createIntentCallback =
       CreateIntentCallback { paymentMethod, shouldSavePaymentMethod ->
         val stripeSdkModule: StripeSdkModule? = context.getNativeModule(StripeSdkModule::class.java)
-        if (stripeSdkModule == null || stripeSdkModule.eventListenerCount == 0) {
-          return@CreateIntentCallback CreateIntentResult.Failure(
-            cause =
-              Exception(
-                "Tried to call confirmHandler, but no callback was found. Please file an issue: https://github.com/stripe/stripe-react-native/issues",
-              ),
-            displayMessage = "An unexpected error occurred",
-          )
-        }
         val params =
           Arguments.createMap().apply {
             putMap("paymentMethod", mapFromPaymentMethod(paymentMethod))
             putBoolean("shouldSavePaymentMethod", shouldSavePaymentMethod)
           }
 
-        stripeSdkModule.sendEvent(context, "onConfirmHandlerCallback", params)
+        stripeSdkModule?.emitOnConfirmHandlerCallback(params)
 
         val resultFromJavascript = paymentSheetIntentCreationCallback.await()
         // reset the completable
@@ -352,7 +330,8 @@ class PaymentSheetFragment(
         override fun onActivitySaveInstanceState(
           activity: Activity,
           outState: Bundle,
-        ) {}
+        ) {
+        }
 
         override fun onActivityDestroyed(activity: Activity) {
           paymentSheetActivity = null
@@ -442,6 +421,18 @@ class PaymentSheetFragment(
   companion object {
     internal const val TAG = "payment_sheet_launch_fragment"
 
+    internal fun create(
+      context: ReactApplicationContext,
+      arguments: Bundle,
+      initPromise: Promise,
+    ): PaymentSheetFragment {
+      val instance = PaymentSheetFragment()
+      instance.context = context
+      instance.initPromise = initPromise
+      instance.arguments = arguments
+      return instance
+    }
+
     private val mapIntToButtonType =
       mapOf(
         1 to PaymentSheet.GooglePayConfiguration.ButtonType.Buy,
@@ -509,7 +500,7 @@ class PaymentSheetFragment(
       }
 
     @Throws(PaymentSheetException::class)
-    private fun buildIntentConfiguration(intentConfigurationParams: Bundle?): PaymentSheet.IntentConfiguration? {
+    internal fun buildIntentConfiguration(intentConfigurationParams: Bundle?): PaymentSheet.IntentConfiguration? {
       if (intentConfigurationParams == null) {
         return null
       }
@@ -556,7 +547,7 @@ class PaymentSheetFragment(
 
     @OptIn(ExperimentalCustomerSessionApi::class)
     @Throws(PaymentSheetException::class)
-    private fun buildCustomerConfiguration(bundle: Bundle?): PaymentSheet.CustomerConfiguration? {
+    internal fun buildCustomerConfiguration(bundle: Bundle?): PaymentSheet.CustomerConfiguration? {
       val customerId = bundle?.getString("customerId").orEmpty()
       val customerEphemeralKeySecret = bundle?.getString("customerEphemeralKeySecret").orEmpty()
       val customerSessionClientSecret = bundle?.getString("customerSessionClientSecret").orEmpty()
@@ -638,6 +629,7 @@ fun mapToAddressCollectionMode(str: String?): PaymentSheet.BillingDetailsCollect
   when (str) {
     "automatic" ->
       PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Automatic
+
     "never" -> PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Never
     "full" -> PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Full
     else -> PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Automatic

package/android/src/main/java/com/reactnativestripesdk/StripeAbstractComposeView.kt

@@ -0,0 +1,113 @@
+package com.reactnativestripesdk
+
+import android.content.Context
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.AbstractComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.platform.findViewTreeCompositionContext
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleEventObserver
+import androidx.lifecycle.LifecycleOwner
+import androidx.lifecycle.LifecycleRegistry
+import androidx.lifecycle.findViewTreeViewModelStoreOwner
+import androidx.lifecycle.setViewTreeLifecycleOwner
+import androidx.lifecycle.setViewTreeViewModelStoreOwner
+import androidx.savedstate.findViewTreeSavedStateRegistryOwner
+import androidx.savedstate.setViewTreeSavedStateRegistryOwner
+import com.facebook.react.bridge.ReactContext
+
+/**
+ * Compose disposes views by default when using Fragments, which is not compatible with how
+ * react-native-screens work. To avoid this we change the composition strategy to use the
+ * activity lifecycle instead of the fragment. Note that `setViewTreeLifecycleOwner` also
+ * needs to be set otherwise a different code path will dispose of the view.
+ *
+ * **IMPORTANT** Views using this will need to call `handleOnDropViewInstance` manually to avoid leaking.
+ * This can be done using the using the following code in the view manager:
+ *
+ * ```
+ * override fun onDropViewInstance(view: SomeStripeAbstractComposeView) {
+ *   super.onDropViewInstance(view)
+ *
+ *   view.handleOnDropViewInstance()
+ * }
+ * ```
+ */
+abstract class StripeAbstractComposeView(
+  context: Context,
+) : AbstractComposeView(context) {
+  /**
+   * Dummy compose view that will be added at the root of the app, this is needed so that the context
+   * that compose needs is already initialized and we can set it directly on our compose views.
+   * If we do not do this there are cases where react-native initializes compose views in ways that
+   * are not supported and causes crashes. An example is when using a compose view inside react-native
+   * Modal component.
+   */
+  class CompatView(
+    context: Context,
+  ) : AbstractComposeView(context) {
+    init {
+      visibility = GONE
+    }
+
+    @Composable
+    override fun Content() {
+    }
+  }
+
+  private var isLifecycleSetup = false
+
+  // Create a lifecycle this is tied to the activity, but that we can manually
+  // update to DESTROYED state when the view is dropped.
+  private val lifecycleOwner: LifecycleOwner =
+    object : LifecycleOwner {
+      override val lifecycle: Lifecycle get() {
+        return lifecycleRegistry
+      }
+    }
+  private var lifecycleRegistry = LifecycleRegistry(lifecycleOwner)
+
+  init {
+    // Setup lifecycles
+    setViewCompositionStrategy(
+      ViewCompositionStrategy.DisposeOnLifecycleDestroyed(lifecycleOwner = lifecycleOwner),
+    )
+    setViewTreeLifecycleOwner(lifecycleOwner = lifecycleOwner)
+
+    // Setup context from dummy compose view.
+    (context as ReactContext).getNativeModule(StripeSdkModule::class.java)?.composeCompatView?.let {
+      setParentCompositionContext(it.findViewTreeCompositionContext())
+      setViewTreeSavedStateRegistryOwner(it.findViewTreeSavedStateRegistryOwner())
+      setViewTreeViewModelStoreOwner(it.findViewTreeViewModelStoreOwner())
+    }
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+
+    if (isLifecycleSetup) {
+      return
+    }
+
+    ((context as? ReactContext)?.currentActivity as? LifecycleOwner?)?.let {
+      isLifecycleSetup = true
+
+      // Setup the lifecycle to match the activity.
+      it.lifecycle.addObserver(
+        object : LifecycleEventObserver {
+          override fun onStateChanged(
+            source: LifecycleOwner,
+            event: Lifecycle.Event,
+          ) {
+            lifecycleRegistry.handleLifecycleEvent(event)
+          }
+        },
+      )
+    }
+  }
+
+  fun handleOnDropViewInstance() {
+    // Update the lifecycle state to DESTROYED to cause the composition to be destroyed.
+    lifecycleRegistry.handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
+  }
+}

package/android/src/main/java/com/reactnativestripesdk/StripeContainerManager.kt

@@ -4,20 +4,28 @@ import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.StripeContainerManagerDelegate
+import com.facebook.react.viewmanagers.StripeContainerManagerInterface
 
 @ReactModule(name = StripeContainerManager.REACT_CLASS)
-class StripeContainerManager : ViewGroupManager<StripeContainerView>() {
+class StripeContainerManager :
+  ViewGroupManager<StripeContainerView>(),
+  StripeContainerManagerInterface<StripeContainerView> {
+  private val delegate = StripeContainerManagerDelegate(this)
+
   override fun getName() = REACT_CLASS
 
+  override fun getDelegate() = delegate
+
   @ReactProp(name = "keyboardShouldPersistTaps")
-  fun setKeyboardShouldPersistTaps(
+  override fun setKeyboardShouldPersistTaps(
     view: StripeContainerView,
     keyboardShouldPersistTaps: Boolean,
   ) {
     view.setKeyboardShouldPersistTaps(keyboardShouldPersistTaps)
   }
 
-  override fun createViewInstance(reactContext: ThemedReactContext): StripeContainerView = StripeContainerView(reactContext)
+  override fun createViewInstance(reactContext: ThemedReactContext) = StripeContainerView(reactContext)
 
   companion object {
     const val REACT_CLASS = "StripeContainer"