@stripe/stripe-react-native 0.58.0 → 0.59.1

package/android/.idea/AndroidProjectSystem.xml

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

package/android/.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CompilerConfiguration">
+    <bytecodeTargetLevel target="1.6" />
+  </component>
+</project>

package/android/.idea/gradle.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
+  <component name="GradleSettings">
+    <option name="linkedExternalProjectsSettings">
+      <GradleProjectSettings>
+        <option name="testRunner" value="CHOOSE_PER_TEST" />
+        <option name="externalProjectPath" value="$PROJECT_DIR$" />
+        <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
+        <option name="modules">
+          <set>
+            <option value="$PROJECT_DIR$" />
+          </set>
+        </option>
+      </GradleProjectSettings>
+    </option>
+  </component>
+</project>

package/android/.idea/migrations.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectMigrations">
+    <option name="MigrateToGradleLocalJavaHome">
+      <set>
+        <option value="$PROJECT_DIR$" />
+      </set>
+    </option>
+  </component>
+</project>

package/android/.idea/misc.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ExternalStorageConfigurationManager" enabled="true" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/build/classes" />
+  </component>
+  <component name="ProjectType">
+    <option name="id" value="Android" />
+  </component>
+</project>

package/android/.idea/runConfigurations.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RunConfigurationProducerService">
+    <option name="ignoredProducers">
+      <set>
+        <option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
+        <option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
+        <option value="com.intellij.execution.junit.PatternConfigurationProducer" />
+        <option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
+        <option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
+        <option value="com.intellij.execution.junit.testDiscovery.JUnitTestDiscoveryConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinJUnitRunConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinPatternConfigurationProducer" />
+      </set>
+    </option>
+  </component>
+</project>

package/android/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

package/android/build.gradle

@@ -100,6 +100,7 @@ android {
     consumerProguardFiles "proguard-rules.txt"
     buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
     buildConfigField "boolean", "IS_ONRAMP_INCLUDED", isOnrampIncluded().toString()
+    buildConfigField "String", "STRIPE_ANDROID_SDK_VERSION", "\"${getExtOrDefault("stripeVersion")}\""
 
     ndk {
       abiFilters(*reactNativeArchitectures())
@@ -162,6 +163,7 @@ dependencies {
   implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
   implementation("com.stripe:stripe-android:$stripeVersion")
   implementation("com.stripe:financial-connections:$stripeVersion")
+  implementation("com.stripe:payment-method-messaging:$stripeVersion")
   
   if (isOnrampIncluded()) {
     implementation("com.stripe:crypto-onramp:$stripeVersion")

package/android/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Fri Aug 30 15:10:34 EDT 2024
+sdk.dir=/Users/samer/Library/Android/sdk

package/android/src/main/AndroidManifest.xml

@@ -2,12 +2,38 @@
           package="com.reactnativestripesdk">
 
     <application>
-        <activity 
+        <activity
             android:name=".CustomPaymentMethodActivity"
             android:theme="@style/Theme.StripeReactNative.Transparent"
             android:exported="false"
             android:launchMode="singleTop"
             android:excludeFromRecents="true"
             android:noHistory="true" />
+
+        <!-- Interceptor for stripe-connect:// deep links -->
+        <activity
+            android:name=".StripeConnectDeepLinkInterceptorActivity"
+            android:theme="@android:style/Theme.Translucent.NoTitleBar"
+            android:exported="true"
+            android:launchMode="singleTask"
+            android:excludeFromRecents="true"
+            android:noHistory="true">
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW"/>
+                <category android:name="android.intent.category.DEFAULT"/>
+                <category android:name="android.intent.category.BROWSABLE"/>
+                <data android:scheme="stripe-connect"/>
+            </intent-filter>
+        </activity>
+
+        <provider
+            android:name="com.reactnativestripesdk.StripeFileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths" />
+        </provider>
     </application>
 </manifest>

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

@@ -132,6 +132,7 @@ class EmbeddedPaymentElementViewManager :
         map.getMap("billingDetailsCollectionConfiguration"),
       )
     val allowsRemovalOfLastSavedPaymentMethod = map.getBooleanOr("allowsRemovalOfLastSavedPaymentMethod", true)
+    val opensCardScannerAutomatically = map.getBooleanOr("opensCardScannerAutomatically", false)
     val primaryButtonLabel = map.getString("primaryButtonLabel")
     val paymentMethodOrder = map.getStringList("paymentMethodOrder")
 
@@ -156,6 +157,7 @@ class EmbeddedPaymentElementViewManager :
               ?.let { ArrayList(it) },
           ),
         ).allowsRemovalOfLastSavedPaymentMethod(allowsRemovalOfLastSavedPaymentMethod)
+        .opensCardScannerAutomatically(opensCardScannerAutomatically)
         .cardBrandAcceptance(mapToCardBrandAcceptance(map))
         .apply {
           mapToAllowedCardFundingTypes(map)?.let { allowedCardFundingTypes(it) }

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

@@ -91,4 +91,12 @@ class EventEmitterCompat(
   fun emitOnCustomPaymentMethodConfirmHandlerCallback(value: ReadableMap?) {
     invoke("onCustomPaymentMethodConfirmHandlerCallback", value)
   }
+
+  fun emitPaymentMethodMessagingElementDidUpdateHeight(value: ReadableMap?) {
+    invoke("paymentMethodMessagingElementDidUpdateHeight", value)
+  }
+
+  fun emitPaymentMethodMessagingElementConfigureResult(value: ReadableMap?) {
+    invoke("paymentMethodMessagingElementConfigureResult", value)
+  }
 }

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

@@ -0,0 +1,147 @@
+@file:OptIn(PaymentMethodMessagingElementPreview::class)
+
+package com.reactnativestripesdk
+
+import android.content.Context
+import androidx.core.graphics.toColorInt
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
+import com.reactnativestripesdk.utils.PaymentMethodMessagingElementAppearanceException
+import com.reactnativestripesdk.utils.PaymentMethodMessagingElementConfigurationException
+import com.reactnativestripesdk.utils.getDoubleOrNull
+import com.reactnativestripesdk.utils.getStringList
+import com.stripe.android.model.PaymentMethod
+import com.stripe.android.paymentmethodmessaging.element.PaymentMethodMessagingElement
+import com.stripe.android.paymentmethodmessaging.element.PaymentMethodMessagingElementPreview
+
+@Throws(PaymentMethodMessagingElementConfigurationException::class)
+fun parseElementConfiguration(map: ReadableMap): PaymentMethodMessagingElement.Configuration {
+  val amount =
+    map.getDoubleOrNull("amount")?.toLong()
+      ?: throw PaymentMethodMessagingElementConfigurationException("`amount` is required")
+  val currency =
+    map.getString("currency")
+      ?: throw PaymentMethodMessagingElementConfigurationException("`currency` is required")
+
+  val locale = map.getString("locale")
+  val countryCode = map.getString("country")
+  val stringPaymentMethodTypes = map.getStringList("paymentMethodTypes")
+  val paymentMethodTypes =
+    stringPaymentMethodTypes?.mapNotNull {
+      PaymentMethod.Type.fromCode(it)
+    }
+
+  val config = PaymentMethodMessagingElement.Configuration()
+  config.amount(amount)
+  config.currency(currency)
+  locale?.let { config.locale(it) }
+  countryCode?.let { config.countryCode(it) }
+  paymentMethodTypes?.let { config.paymentMethodTypes(it) }
+
+  return config
+}
+
+fun parseAppearance(
+  map: ReadableMap,
+  context: Context,
+): PaymentMethodMessagingElement.Appearance {
+  val font =
+    map.getMap("font")?.let {
+      parseFont(
+        it,
+        context,
+      )
+    }
+
+  val theme = getTheme(map)
+  val textColor = dynamicColorFromParams(map, "textColor", theme)
+  val linkTextColor = dynamicColorFromParams(map, "linkTextColor", theme)
+  val appearance = PaymentMethodMessagingElement.Appearance()
+  appearance.theme(theme)
+  font?.let { appearance.font(font) }
+  val colors = PaymentMethodMessagingElement.Appearance.Colors()
+  textColor?.let { colors.textColor(it) }
+  linkTextColor?.let { colors.infoIconColor(linkTextColor) }
+  appearance.colors(colors)
+
+  return appearance
+}
+
+private fun parseFont(
+  map: ReadableMap,
+  context: Context,
+): PaymentMethodMessagingElement.Appearance.Font {
+  val fontFamily =
+    getFontResId(
+      map,
+      "family",
+      context,
+    )
+  val scaleFactor = map.getDoubleOrNull("scale") ?: 1.0
+  val textSize: Double = 16 * scaleFactor
+
+  val font =
+    PaymentMethodMessagingElement.Appearance
+      .Font()
+      .fontFamily(fontFamily)
+      .fontSizeSp(textSize.toFloat())
+
+  return font
+}
+
+private fun getTheme(map: ReadableMap): PaymentMethodMessagingElement.Appearance.Theme {
+  val style = map.getString("style")
+  return when (style) {
+    "dark" -> PaymentMethodMessagingElement.Appearance.Theme.DARK
+    "flat" -> PaymentMethodMessagingElement.Appearance.Theme.FLAT
+    else -> PaymentMethodMessagingElement.Appearance.Theme.LIGHT
+  }
+}
+
+/**
+ * Parses a ThemedColor from [params] at [key]. Supports both:
+ * - Single hex string: "#RRGGBB"
+ * - Light/dark object: { "light": "#RRGGBB", "dark": "#RRGGBB" }
+ * For light/dark objects, chooses the appropriate color based on current UI mode.
+ * Returns null if no color is provided.
+ */
+private fun dynamicColorFromParams(
+  params: ReadableMap?,
+  key: String,
+  theme: PaymentMethodMessagingElement.Appearance.Theme,
+): Int? {
+  if (params == null) {
+    return null
+  }
+
+  // First check if it's a nested map { "light": "#RRGGBB", "dark": "#RRGGBB" }
+  if (params.hasKey(key) && params.getType(key) == ReadableType.Map) {
+    val colorMap = params.getMap(key)
+    val isDark = theme == PaymentMethodMessagingElement.Appearance.Theme.DARK
+
+    // Pick the hex for current mode, or null
+    val hex =
+      if (isDark) {
+        colorMap?.getString("dark")
+      } else {
+        colorMap?.getString("light")
+      }
+
+    return colorFromHex(hex)
+  }
+
+  // Check if it's a single color string
+  return colorFromHex(params.getString(key))
+}
+
+@Throws(PaymentMethodMessagingElementAppearanceException::class)
+private fun colorFromHex(hexString: String?): Int? =
+  hexString?.trim()?.replace("#", "")?.let {
+    if (it.length == 6 || it.length == 8) {
+      "#$it".toColorInt()
+    } else {
+      throw PaymentMethodMessagingElementAppearanceException(
+        "Failed to set appearance. Expected hex string of length 6 or 8, but received: $it",
+      )
+    }
+  }

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

@@ -0,0 +1,164 @@
+package com.reactnativestripesdk
+
+import android.annotation.SuppressLint
+import android.app.Application
+import android.content.Context
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.uimanager.ThemedReactContext
+import com.stripe.android.paymentmethodmessaging.element.PaymentMethodMessagingElement
+import com.stripe.android.paymentmethodmessaging.element.PaymentMethodMessagingElementPreview
+import kotlinx.coroutines.channels.Channel
+import kotlinx.coroutines.flow.consumeAsFlow
+
+@OptIn(PaymentMethodMessagingElementPreview::class)
+class PaymentMethodMessagingElementView(
+  context: Context,
+) : StripeAbstractComposeView(context) {
+  private sealed interface Event {
+    data class Configure(
+      val configuration: PaymentMethodMessagingElement.Configuration,
+    ) : Event
+
+    data class Appearance(
+      val appearance: PaymentMethodMessagingElement.Appearance,
+    ) : Event
+  }
+
+  var latestElementConfig: PaymentMethodMessagingElement.Configuration? = null
+
+  private val reactContext get() = context as ThemedReactContext
+  private val events = Channel<Event>(Channel.UNLIMITED)
+
+  @SuppressLint("RestrictedApi")
+  @Composable
+  override fun Content() {
+    val messagingElement =
+      remember {
+        PaymentMethodMessagingElement.create(context.applicationContext as Application)
+      }
+    var appearance by remember { mutableStateOf(PaymentMethodMessagingElement.Appearance()) }
+
+    // collect events: configure, appearance
+    LaunchedEffect(Unit) {
+      events.consumeAsFlow().collect { ev ->
+        when (ev) {
+          is Event.Configure -> {
+            val loadingPayload = Arguments.createMap()
+            loadingPayload.putString("status", "loading")
+            requireStripeSdkModule().eventEmitter.emitPaymentMethodMessagingElementConfigureResult(loadingPayload)
+            val result =
+              messagingElement.configure(
+                configuration = ev.configuration,
+              )
+
+            val payload = Arguments.createMap()
+            when (result) {
+              is PaymentMethodMessagingElement.ConfigureResult.Succeeded -> {
+                payload.putString("status", "loaded")
+              }
+              is PaymentMethodMessagingElement.ConfigureResult.NoContent -> {
+                payload.putString("status", "no_content")
+                reportHeightChange(0f)
+              }
+              is PaymentMethodMessagingElement.ConfigureResult.Failed -> {
+                // send the error back to JS
+                val err = result.error
+                val msg = err.localizedMessage ?: err.toString()
+                // build a RN map
+                payload.putString("status", "failed")
+                payload.putString("message", msg)
+                reportHeightChange(0f)
+              }
+            }
+            requireStripeSdkModule().eventEmitter.emitPaymentMethodMessagingElementConfigureResult(payload)
+          }
+          is Event.Appearance -> {
+            appearance = ev.appearance
+          }
+        }
+      }
+    }
+
+    Box {
+      MeasureMessagingElement(
+        reportHeightChange = { h -> reportHeightChange(h) },
+      ) {
+        messagingElement.Content(appearance)
+      }
+    }
+  }
+
+  @Composable
+  private fun MeasureMessagingElement(
+    reportHeightChange: (Float) -> Unit,
+    content: @Composable () -> Unit,
+  ) {
+    val density = LocalDensity.current
+    var heightDp by remember { mutableStateOf(1.dp) } // non-zero sentinel
+
+    Box(
+      Modifier
+        // Post-layout: convert px -> dp, update RN & our dp state
+        .onSizeChanged { size ->
+          val h = with(density) { size.height.toDp() }
+          if (h != heightDp) {
+            heightDp = h
+            reportHeightChange(h.value) // send dp as Float to RN
+          }
+        }
+        // Custom measure path: force child to its min intrinsic height (in *px*)
+        .layout { measurable, constraints ->
+          val widthPx = constraints.maxWidth
+          val minHpx = measurable.minIntrinsicHeight(widthPx).coerceAtLeast(1)
+
+          // Measure the child with a tight height equal to min intrinsic
+          val placeable =
+            measurable.measure(
+              constraints.copy(
+                minHeight = minHpx,
+                maxHeight = minHpx,
+              ),
+            )
+
+          // Our own size: use the child’s measured size
+          layout(constraints.maxWidth, placeable.height) {
+            placeable.placeRelative(IntOffset.Zero)
+          }
+        },
+    ) {
+      content()
+    }
+  }
+
+  private fun reportHeightChange(height: Float) {
+    val params =
+      Arguments.createMap().apply {
+        putDouble("height", height.toDouble())
+      }
+    requireStripeSdkModule().eventEmitter.emitPaymentMethodMessagingElementDidUpdateHeight(params)
+  }
+
+  // APIs
+  fun configure(config: PaymentMethodMessagingElement.Configuration) {
+    events.trySend(Event.Configure(config))
+  }
+
+  fun appearance(appearance: PaymentMethodMessagingElement.Appearance) {
+    events.trySend(Event.Appearance(appearance))
+  }
+
+  private fun requireStripeSdkModule() = requireNotNull(reactContext.getNativeModule(StripeSdkModule::class.java))
+}

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

@@ -0,0 +1,65 @@
+package com.reactnativestripesdk
+
+import com.facebook.react.bridge.Dynamic
+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.PaymentMethodMessagingElementViewManagerDelegate
+import com.facebook.react.viewmanagers.PaymentMethodMessagingElementViewManagerInterface
+import com.reactnativestripesdk.utils.asMapOrNull
+import com.stripe.android.paymentmethodmessaging.element.PaymentMethodMessagingElementPreview
+
+@OptIn(PaymentMethodMessagingElementPreview::class)
+@ReactModule(name = PaymentMethodMessagingElementViewManager.NAME)
+class PaymentMethodMessagingElementViewManager :
+  ViewGroupManager<PaymentMethodMessagingElementView>(),
+  PaymentMethodMessagingElementViewManagerInterface<PaymentMethodMessagingElementView> {
+  companion object {
+    const val NAME = "PaymentMethodMessagingElementView"
+  }
+
+  private val delegate = PaymentMethodMessagingElementViewManagerDelegate(this)
+
+  override fun getName() = NAME
+
+  override fun getDelegate() = delegate
+
+  override fun createViewInstance(ctx: ThemedReactContext): PaymentMethodMessagingElementView = PaymentMethodMessagingElementView(ctx)
+
+  override fun onDropViewInstance(view: PaymentMethodMessagingElementView) {
+    super.onDropViewInstance(view)
+
+    view.handleOnDropViewInstance()
+  }
+
+  override fun needsCustomLayoutForChildren(): Boolean = true
+
+  @ReactProp(name = "appearance")
+  override fun setAppearance(
+    view: PaymentMethodMessagingElementView?,
+    value: Dynamic?,
+  ) {
+    val readableMap = value?.asMapOrNull() ?: return
+    view?.let {
+      val appearance = parseAppearance(readableMap, view.context)
+      view.appearance(appearance)
+    }
+  }
+
+  @ReactProp(name = "configuration")
+  override fun setConfiguration(
+    view: PaymentMethodMessagingElementView,
+    cfg: Dynamic,
+  ) {
+    val readableMap = cfg.asMapOrNull() ?: return
+
+    val elementConfig = parseElementConfiguration(readableMap)
+    view.latestElementConfig = elementConfig
+    view.configure(elementConfig)
+    view.post {
+      view.requestLayout()
+      view.invalidate()
+    }
+  }
+}

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

@@ -537,7 +537,7 @@ private fun dynamicColorFromParams(
 }
 
 @Throws(PaymentSheetAppearanceException::class)
-private fun getFontResId(
+internal fun getFontResId(
   map: ReadableMap?,
   key: String,
   context: Context,

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

@@ -106,6 +106,8 @@ class PaymentSheetManager(
     val paymentMethodOrder = arguments.getStringList("paymentMethodOrder")
     val allowsRemovalOfLastSavedPaymentMethod =
       arguments.getBooleanOr("allowsRemovalOfLastSavedPaymentMethod", true)
+    val opensCardScannerAutomatically =
+      arguments.getBooleanOr("opensCardScannerAutomatically", false)
     paymentIntentClientSecret = arguments.getString("paymentIntentClientSecret").orEmpty()
     setupIntentClientSecret = arguments.getString("setupIntentClientSecret").orEmpty()
     intentConfiguration =
@@ -283,6 +285,7 @@ class PaymentSheetManager(
         .preferredNetworks(
           mapToPreferredNetworks(arguments.getIntegerList("preferredNetworks")),
         ).allowsRemovalOfLastSavedPaymentMethod(allowsRemovalOfLastSavedPaymentMethod)
+        .opensCardScannerAutomatically(opensCardScannerAutomatically)
         .cardBrandAcceptance(mapToCardBrandAcceptance(arguments))
         .apply {
           mapToAllowedCardFundingTypes(arguments)?.let { allowedCardFundingTypes(it) }
@@ -430,32 +433,8 @@ class PaymentSheetManager(
 
   private fun configureFlowController() {
     val onFlowControllerConfigure =
-      PaymentSheet.FlowController.ConfigCallback { _, _ ->
-        flowController?.getPaymentOption()?.let { paymentOption ->
-          // Launch async job to convert drawable, but resolve promise synchronously
-          CoroutineScope(Dispatchers.Default).launch {
-            val imageString =
-              try {
-                convertDrawableToBase64(paymentOption.icon())
-              } catch (e: Exception) {
-                val result =
-                  createError(
-                    PaymentSheetErrorType.Failed.toString(),
-                    "Failed to process payment option image: ${e.message}",
-                  )
-                initPromise.resolve(result)
-                return@launch
-              }
-
-            val option: WritableMap = Arguments.createMap()
-            option.putString("label", paymentOption.label)
-            option.putString("image", imageString)
-            val result = createResult("paymentOption", option)
-            initPromise.resolve(result)
-          }
-        } ?: run {
-          initPromise.resolve(Arguments.createMap())
-        }
+      PaymentSheet.FlowController.ConfigCallback { success, error ->
+        handleFlowControllerConfigured(success, error, initPromise, flowController)
       }
 
     if (!paymentIntentClientSecret.isNullOrEmpty()) {
@@ -717,3 +696,44 @@ internal fun mapToPaymentMethodOptions(options: ReadableMap?): PaymentSheet.Inte
     null
   }
 }
+
+internal fun handleFlowControllerConfigured(
+  success: Boolean,
+  error: Throwable?,
+  promise: Promise,
+  flowController: PaymentSheet.FlowController?,
+) {
+  if (!success) {
+    promise.resolve(
+      createError(
+        PaymentSheetErrorType.Failed.toString(),
+        error?.message ?: "Failed to configure payment sheet",
+      ),
+    )
+    return
+  }
+  flowController?.getPaymentOption()?.let { paymentOption ->
+    CoroutineScope(Dispatchers.Default).launch {
+      val imageString =
+        try {
+          convertDrawableToBase64(paymentOption.icon())
+        } catch (e: Exception) {
+          val result =
+            createError(
+              PaymentSheetErrorType.Failed.toString(),
+              "Failed to process payment option image: ${e.message}",
+            )
+          promise.resolve(result)
+          return@launch
+        }
+
+      val option: WritableMap = Arguments.createMap()
+      option.putString("label", paymentOption.label)
+      option.putString("image", imageString)
+      val result = createResult("paymentOption", option)
+      promise.resolve(result)
+    }
+  } ?: run {
+    promise.resolve(Arguments.createMap())
+  }
+}