@stripe/stripe-react-native 0.57.1 → 0.57.3

package/README.md

@@ -215,14 +215,6 @@ function App() {
 
 You can find more details about the `StripeProvider` component in the [API reference](https://stripe.dev/stripe-react-native/api-reference/index.html#StripeProvider).
 
-##### Additional steps for webhook forwarding
-
-Certain payment methods require a [webhook listener](https://stripe.com/docs/payments/payment-intents/verifying-status#webhooks) to notify you of changes in the status. When developing locally, you can use the [Stripe CLI](https://stripe.com/docs/stripe-cli) to forward webhook events to your local dev server.
-
-- [Install the `stripe-cli`](https://stripe.com/docs/stripe-cli#install)
-- Run `stripe listen --forward-to localhost:4242/webhook`
-- The CLI will print a webhook secret (such as, `whsec_***`) to the console. Set STRIPE_WEBHOOK_SECRET to this value in your `example/.env` file.
-
 ## Testing
 
 This library includes a built in mock file for Jest.

package/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"

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

@@ -54,6 +54,10 @@ class EmbeddedPaymentElementView(
       val intentConfiguration: PaymentSheet.IntentConfiguration,
     ) : Event
 
+    data class Update(
+      val intentConfiguration: PaymentSheet.IntentConfiguration,
+    ) : Event
+
     data object Confirm : Event
 
     data object ClearPaymentOption : Event
@@ -322,6 +326,47 @@ class EmbeddedPaymentElementView(
             }
           }
 
+          is Event.Update -> {
+            val elemConfig = latestElementConfig
+            if (elemConfig == null) {
+              val payload =
+                Arguments.createMap().apply {
+                  putString("message", "Cannot update: no element configuration exists")
+                }
+              requireStripeSdkModule().eventEmitter.emitEmbeddedPaymentElementLoadingFailed(payload)
+              requireStripeSdkModule().eventEmitter.emitEmbeddedPaymentElementUpdateComplete(null)
+              return@collect
+            }
+
+            val result =
+              embedded.configure(
+                intentConfiguration = ev.intentConfiguration,
+                configuration = elemConfig,
+              )
+
+            when (result) {
+              is EmbeddedPaymentElement.ConfigureResult.Succeeded -> {
+                val payload =
+                  Arguments.createMap().apply {
+                    putString("status", "succeeded")
+                  }
+                requireStripeSdkModule().eventEmitter.emitEmbeddedPaymentElementUpdateComplete(payload)
+              }
+              is EmbeddedPaymentElement.ConfigureResult.Failed -> {
+                val err = result.error
+                val msg = err.localizedMessage ?: err.toString()
+                val failPayload =
+                  Arguments.createMap().apply {
+                    putString("message", msg)
+                  }
+                requireStripeSdkModule().eventEmitter.emitEmbeddedPaymentElementLoadingFailed(failPayload)
+                requireStripeSdkModule().eventEmitter.emitEmbeddedPaymentElementUpdateComplete(null)
+              }
+            }
+
+            latestIntentConfig = ev.intentConfiguration
+          }
+
           is Event.Confirm -> {
             embedded.confirm()
           }
@@ -412,6 +457,10 @@ class EmbeddedPaymentElementView(
     events.trySend(Event.Configure(config, intentConfig))
   }
 
+  fun update(intentConfig: PaymentSheet.IntentConfiguration) {
+    events.trySend(Event.Update(intentConfig))
+  }
+
   fun confirm() {
     events.trySend(Event.Confirm)
   }

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

@@ -2,8 +2,11 @@ package com.reactnativestripesdk
 
 import android.annotation.SuppressLint
 import android.content.Context
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.Dynamic
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.WritableArray
+import com.facebook.react.bridge.WritableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
@@ -23,6 +26,8 @@ import com.stripe.android.ExperimentalAllowsRemovalOfLastSavedPaymentMethodApi
 import com.stripe.android.paymentelement.EmbeddedPaymentElement
 import com.stripe.android.paymentelement.ExperimentalCustomPaymentMethodsApi
 import com.stripe.android.paymentsheet.PaymentSheet
+import org.json.JSONArray
+import org.json.JSONObject
 
 @ReactModule(name = EmbeddedPaymentElementViewManager.NAME)
 class EmbeddedPaymentElementViewManager :
@@ -178,6 +183,62 @@ class EmbeddedPaymentElementViewManager :
   override fun clearPaymentOption(view: EmbeddedPaymentElementView) {
     view.clearPaymentOption()
   }
+
+  override fun update(
+    view: EmbeddedPaymentElementView,
+    intentConfigurationJson: String?,
+  ) {
+    intentConfigurationJson?.let { json ->
+      try {
+        val jsonObject = JSONObject(json)
+        val cfg = jsonToWritableMap(jsonObject)
+        val intentConfig = buildIntentConfiguration(cfg)
+        if (intentConfig != null) {
+          view.update(intentConfig)
+        }
+      } catch (e: Exception) {
+        android.util.Log.e("EmbeddedPaymentElement", "Failed to parse intent config JSON", e)
+      }
+    }
+  }
+
+  private fun jsonToWritableMap(json: JSONObject): WritableMap {
+    val map = Arguments.createMap()
+    val keys = json.keys()
+    while (keys.hasNext()) {
+      val key = keys.next()
+      when (val value = json.get(key)) {
+        is Boolean -> map.putBoolean(key, value)
+        is Int -> map.putInt(key, value)
+        is Double -> map.putDouble(key, value)
+        is Long -> map.putDouble(key, value.toDouble())
+        is String -> map.putString(key, value)
+        is JSONObject -> map.putMap(key, jsonToWritableMap(value))
+        is JSONArray -> map.putArray(key, jsonToWritableArray(value))
+        JSONObject.NULL -> map.putNull(key)
+        else -> map.putString(key, value.toString())
+      }
+    }
+    return map
+  }
+
+  private fun jsonToWritableArray(json: JSONArray): WritableArray {
+    val array = Arguments.createArray()
+    for (i in 0 until json.length()) {
+      when (val value = json.get(i)) {
+        is Boolean -> array.pushBoolean(value)
+        is Int -> array.pushInt(value)
+        is Double -> array.pushDouble(value)
+        is Long -> array.pushDouble(value.toDouble())
+        is String -> array.pushString(value)
+        is JSONObject -> array.pushMap(jsonToWritableMap(value))
+        is JSONArray -> array.pushArray(jsonToWritableArray(value))
+        JSONObject.NULL -> array.pushNull()
+        else -> array.pushString(value.toString())
+      }
+    }
+    return array
+  }
 }
 
 internal fun mapToRowSelectionBehaviorType(map: ReadableMap?): RowSelectionBehaviorType {

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

@@ -84,6 +84,10 @@ class EventEmitterCompat(
     invoke("embeddedPaymentElementLoadingFailed", value)
   }
 
+  fun emitEmbeddedPaymentElementUpdateComplete(value: ReadableMap?) {
+    invoke("embeddedPaymentElementUpdateComplete", value)
+  }
+
   fun emitOnCustomPaymentMethodConfirmHandlerCallback(value: ReadableMap?) {
     invoke("onCustomPaymentMethodConfirmHandlerCallback", value)
   }

package/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
 }
 

package/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) {

package/android/src/oldarch/java/com/facebook/react/viewmanagers/EmbeddedPaymentElementViewManagerDelegate.java

@@ -44,6 +44,9 @@ public class EmbeddedPaymentElementViewManagerDelegate<T extends View, U extends
       case "clearPaymentOption":
         mViewManager.clearPaymentOption(view);
         break;
+      case "update":
+        mViewManager.update(view, args != null ? args.getString(0) : null);
+        break;
     }
   }
 }

package/android/src/oldarch/java/com/facebook/react/viewmanagers/EmbeddedPaymentElementViewManagerInterface.java

@@ -10,6 +10,7 @@
 package com.facebook.react.viewmanagers;
 
 import android.view.View;
+import androidx.annotation.Nullable;
 import com.facebook.react.bridge.Dynamic;
 
 public interface EmbeddedPaymentElementViewManagerInterface<T extends View>  {
@@ -17,4 +18,5 @@ public interface EmbeddedPaymentElementViewManagerInterface<T extends View>  {
   void setIntentConfiguration(T view, Dynamic value);
   void confirm(T view);
   void clearPaymentOption(T view);
+  void update(T view, @Nullable String intentConfigurationJson);
 }