Android inconsistent paymentOption.image bug (#2266)

* update getBitmapFromDrawable

* waitForDrawableToLoad

* ui in example screens

* use convertDrawableToBase64 to get paymentOption image

* Update PaymentSheetManager.kt

* use async drawable logic in customerSheetManager

* tests

* yarn update

Author: tianzhao-stripe

android/build.gradle

@@ -183,6 +183,7 @@ dependencies {
   testImplementation "org.mockito:mockito-core:3.+"
   testImplementation "org.robolectric:robolectric:4.10"
   testImplementation "androidx.test:core:1.4.0"
+  testImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:1.6.0"
 
   implementation "androidx.compose.ui:ui:1.7.8"
   implementation "androidx.compose.foundation:foundation-layout:1.7.8"

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

@@ -58,8 +58,11 @@ import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
+import kotlinx.coroutines.suspendCancellableCoroutine
+import kotlinx.coroutines.withTimeoutOrNull
 import java.io.ByteArrayOutputStream
 import kotlin.Exception
+import kotlin.coroutines.resume
 
 @OptIn(
   ReactNativeSdkInternal::class,
@@ -140,28 +143,42 @@ class PaymentSheetManager(
 
     val paymentOptionCallback =
       PaymentOptionResultCallback { paymentOptionResult ->
-        val result =
-          paymentOptionResult.paymentOption?.let {
-            val bitmap = getBitmapFromDrawable(it.icon())
-            val imageString = getBase64FromBitmap(bitmap)
+        paymentOptionResult.paymentOption?.let { paymentOption ->
+          // Convert drawable to bitmap asynchronously to avoid shared state issues
+          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}",
+                  )
+                resolvePresentPromise(result)
+                return@launch
+              }
+
             val option: WritableMap = Arguments.createMap()
-            option.putString("label", it.label)
+            option.putString("label", paymentOption.label)
             option.putString("image", imageString)
             val additionalFields: Map<String, Any> = mapOf("didCancel" to paymentOptionResult.didCancel)
-            createResult("paymentOption", option, additionalFields)
+            val result = createResult("paymentOption", option, additionalFields)
+            resolvePresentPromise(result)
           }
-            ?: run {
-              if (paymentSheetTimedOut) {
-                paymentSheetTimedOut = false
-                createError(PaymentSheetErrorType.Timeout.toString(), "The payment has timed out")
-              } else {
-                createError(
-                  PaymentSheetErrorType.Canceled.toString(),
-                  "The payment option selection flow has been canceled",
-                )
-              }
+        } ?: run {
+          val result =
+            if (paymentSheetTimedOut) {
+              paymentSheetTimedOut = false
+              createError(PaymentSheetErrorType.Timeout.toString(), "The payment has timed out")
+            } else {
+              createError(
+                PaymentSheetErrorType.Canceled.toString(),
+                "The payment option selection flow has been canceled",
+              )
             }
-        resolvePresentPromise(result)
+          resolvePresentPromise(result)
+        }
       }
 
     val paymentResultCallback =
@@ -413,16 +430,31 @@ class PaymentSheetManager(
   private fun configureFlowController() {
     val onFlowControllerConfigure =
       PaymentSheet.FlowController.ConfigCallback { _, _ ->
-        val result =
-          flowController?.getPaymentOption()?.let {
-            val bitmap = getBitmapFromDrawable(it.icon())
-            val imageString = getBase64FromBitmap(bitmap)
+        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", it.label)
+            option.putString("label", paymentOption.label)
             option.putString("image", imageString)
-            createResult("paymentOption", option)
-          } ?: run { Arguments.createMap() }
-        initPromise.resolve(result)
+            val result = createResult("paymentOption", option)
+            initPromise.resolve(result)
+          }
+        } ?: run {
+          initPromise.resolve(Arguments.createMap())
+        }
       }
 
     if (!paymentIntentClientSecret.isNullOrEmpty()) {
@@ -550,17 +582,86 @@ class PaymentSheetManager(
   }
 }
 
+suspend fun waitForDrawableToLoad(
+  drawable: Drawable,
+  timeoutMs: Long = 3000,
+): Drawable {
+  // If already loaded, return immediately
+  if (drawable.intrinsicWidth > 1 && drawable.intrinsicHeight > 1) {
+    return drawable
+  }
+
+  // Use callback to be notified when drawable finishes loading
+  return withTimeoutOrNull(timeoutMs) {
+    suspendCancellableCoroutine { continuation ->
+      val callback =
+        object : Drawable.Callback {
+          override fun invalidateDrawable(who: Drawable) {
+            // Drawable has changed/loaded - check if it's ready now
+            if (who.intrinsicWidth > 1 && who.intrinsicHeight > 1) {
+              who.callback = null // Remove callback
+              if (continuation.isActive) {
+                continuation.resume(who)
+              }
+            }
+          }
+
+          override fun scheduleDrawable(
+            who: Drawable,
+            what: Runnable,
+            `when`: Long,
+          ) {}
+
+          override fun unscheduleDrawable(
+            who: Drawable,
+            what: Runnable,
+          ) {}
+        }
+
+      drawable.callback = callback
+
+      // Trigger an invalidation to check if it loads immediately
+      drawable.invalidateSelf()
+
+      continuation.invokeOnCancellation { drawable.callback = null }
+    }
+  } ?: drawable // Return drawable even if timeout (best effort)
+}
+
+suspend fun convertDrawableToBase64(drawable: Drawable): String? {
+  val loadedDrawable = waitForDrawableToLoad(drawable)
+  val bitmap = getBitmapFromDrawable(loadedDrawable)
+  return getBase64FromBitmap(bitmap)
+}
+
 fun getBitmapFromDrawable(drawable: Drawable): Bitmap? {
   val drawableCompat = DrawableCompat.wrap(drawable).mutate()
-  if (drawableCompat.intrinsicWidth <= 0 || drawableCompat.intrinsicHeight <= 0) {
+
+  // Determine the size to use - prefer intrinsic size, fall back to bounds
+  val width =
+    if (drawableCompat.intrinsicWidth > 0) {
+      drawableCompat.intrinsicWidth
+    } else {
+      drawableCompat.bounds.width()
+    }
+
+  val height =
+    if (drawableCompat.intrinsicHeight > 0) {
+      drawableCompat.intrinsicHeight
+    } else {
+      drawableCompat.bounds.height()
+    }
+
+  if (width <= 0 || height <= 0) {
     return null
   }
-  val bitmap =
-    createBitmap(drawableCompat.intrinsicWidth, drawableCompat.intrinsicHeight)
+
+  val bitmap = createBitmap(width, height, Bitmap.Config.ARGB_8888)
   bitmap.eraseColor(Color.TRANSPARENT)
   val canvas = Canvas(bitmap)
-  drawable.setBounds(0, 0, canvas.width, canvas.height)
-  drawable.draw(canvas)
+  drawableCompat.setBounds(0, 0, canvas.width, canvas.height)
+  drawableCompat.draw(canvas)
+
   return bitmap
 }
 

android/src/main/java/com/reactnativestripesdk/customersheet/CustomerSheetManager.kt

@@ -17,8 +17,7 @@ import com.reactnativestripesdk.ReactNativeCustomerSessionProvider
 import com.reactnativestripesdk.buildBillingDetails
 import com.reactnativestripesdk.buildBillingDetailsCollectionConfiguration
 import com.reactnativestripesdk.buildPaymentSheetAppearance
-import com.reactnativestripesdk.getBase64FromBitmap
-import com.reactnativestripesdk.getBitmapFromDrawable
+import com.reactnativestripesdk.convertDrawableToBase64
 import com.reactnativestripesdk.mapToCardBrandAcceptance
 import com.reactnativestripesdk.utils.CreateTokenErrorType
 import com.reactnativestripesdk.utils.ErrorType
@@ -163,25 +162,49 @@ class CustomerSheetManager(
   }
 
   private fun handleResult(result: CustomerSheetResult) {
-    var promiseResult = Arguments.createMap()
     when (result) {
       is CustomerSheetResult.Failed -> {
         resolvePresentPromise(createError(ErrorType.Failed.toString(), result.exception))
       }
 
       is CustomerSheetResult.Selected -> {
-        promiseResult = createPaymentOptionResult(result.selection)
+        // Convert drawable asynchronously to avoid shared state issues
+        CoroutineScope(Dispatchers.Default).launch {
+          try {
+            val promiseResult = createPaymentOptionResult(result.selection)
+            resolvePresentPromise(promiseResult)
+          } catch (e: Exception) {
+            resolvePresentPromise(
+              createError(
+                ErrorType.Failed.toString(),
+                "Failed to process payment option image: ${e.message}",
+              ),
+            )
+          }
+        }
       }
 
       is CustomerSheetResult.Canceled -> {
-        promiseResult = createPaymentOptionResult(result.selection)
-        promiseResult.putMap(
-          "error",
-          Arguments.createMap().also { it.putString("code", ErrorType.Canceled.toString()) },
-        )
+        // Convert drawable asynchronously to avoid shared state issues
+        CoroutineScope(Dispatchers.Default).launch {
+          try {
+            val promiseResult = createPaymentOptionResult(result.selection)
+            promiseResult.putMap(
+              "error",
+              Arguments.createMap().also { it.putString("code", ErrorType.Canceled.toString()) },
+            )
+            resolvePresentPromise(promiseResult)
+          } catch (e: Exception) {
+            resolvePresentPromise(
+              createError(
+                ErrorType.Failed.toString(),
+                "Failed to process payment option image: ${e.message}",
+              ),
+            )
+          }
+        }
       }
     }
-    resolvePresentPromise(promiseResult)
   }
 
   override fun onPresent() {
@@ -355,7 +378,7 @@ class CustomerSheetManager(
       )
     }
 
-    internal fun createPaymentOptionResult(selection: PaymentOptionSelection?): WritableMap {
+    internal suspend fun createPaymentOptionResult(selection: PaymentOptionSelection?): WritableMap {
       var paymentOptionResult = Arguments.createMap()
 
       when (selection) {
@@ -392,16 +415,18 @@ class CustomerSheetManager(
           }.build()
       }
 
-    private fun buildResult(
+    private suspend fun buildResult(
       label: String,
       drawable: Drawable,
       paymentMethod: PaymentMethod?,
     ): WritableMap {
+      val imageString = convertDrawableToBase64(drawable)
+
       val result = Arguments.createMap()
       val paymentOption =
         Arguments.createMap().also {
           it.putString("label", label)
-          it.putString("image", getBase64FromBitmap(getBitmapFromDrawable(drawable)))
+          it.putString("image", imageString)
         }
       result.putMap("paymentOption", paymentOption)
       if (paymentMethod != null) {