@stripe/stripe-react-native 0.49.0 → 0.50.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # CHANGELOG
 
+## 0.50.1 - 2025-07-22
+
+**Fixes**
+- Fixed embedded payment element color support to accept both single color strings and light/dark color objects for `ThemedColor` properties (separatorColor, selectedColor, unselectedColor, checkmark color, chevron color).
+- Fixed Android crash when providing partial `billingDetailsCollectionConfiguration` objects. Now gracefully handles missing fields like `attachDefaultsToPaymentMethod` by using safe accessor methods with default values.
+- Fixed Android Kotlin compilation errors where nullable `ReadableMap?` was passed to functions expecting non-nullable `ReadableMap`. Added null checks in `EmbeddedPaymentElementViewManager` and `AddToWalletButtonManager`. [#1988](https://github.com/stripe/stripe-react-native/issues/1988)
+
+## 0.50.0 - 2025-07-17
+
+**Features**
+- Added support for Custom Payment Methods in PaymentSheet and Embedded Payment Element.
+
+**Fixes**
+- Removed Sofort from playground pages. Sofort is no longer support by Stripe.
+- **Patches**
+- Fixed codegen error when using React Native 0.74+ with old architecture by converting EventEmitter properties to callback functions in TurboModule interface. [#1977](https://github.com/stripe/stripe-react-native/issues/1977). See `patches/README.md` for more info.
+
 ## 0.49.0 - 2025-07-02
 
 **Features**

package/README.md

@@ -23,7 +23,7 @@ Get started with our [📚 integration guides](https://stripe.com/docs/payments/
 
 **Native UI**: We provide native screens and elements to securely collect payment details on Android and iOS.
 
-**PaymentSheet**: [Learn how to integrate](https://stripe.com/docs/payments/accept-a-payment) PaymentSheet, our new pre-built payments UI for mobile apps. PaymentSheet lets you accept cards, Apple Pay, Google Pay, and much more out of the box and also supports saving & reusing payment methods. PaymentSheet currently accepts the following payment methods: Card, Apple Pay, Google Pay, SEPA Debit, Bancontact, iDEAL, EPS, P24, Afterpay/Clearpay, Klarna, Giropay, Sofort, and ACH.
+**PaymentSheet**: [Learn how to integrate](https://stripe.com/docs/payments/accept-a-payment) PaymentSheet, our new pre-built payments UI for mobile apps. PaymentSheet lets you accept cards, Apple Pay, Google Pay, and much more out of the box and also supports saving & reusing payment methods. PaymentSheet currently accepts the following payment methods: Card, Apple Pay, Google Pay, SEPA Debit, Bancontact, iDEAL, EPS, P24, Afterpay/Clearpay, Klarna, Giropay, and ACH.
 
 #### Recommended usage
 

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Thu Jul 17 13:09:27 MDT 2025
+gradle.version=8.11.1

package/android/src/main/AndroidManifest.xml

@@ -1,3 +1,13 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
           package="com.reactnativestripesdk">
+
+    <application>
+        <activity 
+            android:name=".CustomPaymentMethodActivity"
+            android:theme="@style/Theme.StripeReactNative.Transparent"
+            android:exported="false"
+            android:launchMode="singleTop"
+            android:excludeFromRecents="true"
+            android:noHistory="true" />
+    </application>
 </manifest>

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

@@ -0,0 +1,81 @@
+package com.reactnativestripesdk
+
+import android.os.Bundle
+import android.view.MotionEvent
+import com.facebook.react.ReactActivity
+import java.lang.ref.WeakReference
+
+/**
+ * A transparent activity that is launched when the Payment Element requests the
+ * `confirmCustomPaymentMethodCallback`.
+ *
+ * Its only purpose is to bring the app back to the foreground (the Stripe
+ * SDK launches its own proxy activity which pauses the host React Native
+ * activity). Having a React (transparent) activity on top ensures that React
+ * Native can display UI elements such as `Alert` dialogs coming from
+ * JavaScript.
+ *
+ * The activity uses a translucent theme to minimize visibility and is excluded
+ * from recents, though it may still be briefly visible to the end-user during
+ * certain operations.
+ */
+class CustomPaymentMethodActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Disable the transition animation to make it truly invisible
+    overridePendingTransition(0, 0)
+    super.onCreate(savedInstanceState)
+  }
+
+  override fun getMainComponentName(): String? {
+    // We don't want to mount another React Native root – returning null is
+    // enough to make ReactActivity skip loading a JS component while still
+    // hooking into the lifecycle so that ReactContext is aware of this
+    // activity.
+    return null
+  }
+
+  override fun onTouchEvent(event: MotionEvent?): Boolean {
+    // Ensure touch events are properly handled by React Native
+    return super.onTouchEvent(event)
+  }
+
+  override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
+    // Ensure touch events are properly dispatched to React Native
+    return super.dispatchTouchEvent(event)
+  }
+
+  override fun onResume() {
+    super.onResume()
+    // Ensure the activity is properly focused for touch events
+    currentFocus?.requestFocus()
+  }
+
+  override fun finish() {
+    super.finish()
+    // Disable the exit animation as well
+    overridePendingTransition(0, 0)
+
+    // Clear the weak reference when finished
+    if (currentActivityRef?.get() == this) {
+      currentActivityRef = null
+    }
+  }
+
+  companion object {
+    @Volatile
+    private var currentActivityRef: WeakReference<CustomPaymentMethodActivity>? = null
+
+    fun finishCurrent() {
+      currentActivityRef?.get()?.let { activity ->
+        activity.runOnUiThread {
+          activity.finish()
+        }
+      }
+    }
+  }
+
+  override fun onStart() {
+    super.onStart()
+    currentActivityRef = WeakReference(this)
+  }
+}

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

@@ -1,6 +1,8 @@
 package com.reactnativestripesdk
 
 import android.content.Context
+import android.content.Intent
+import android.util.Log
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.runtime.Composable
@@ -9,6 +11,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.layout
@@ -19,14 +22,21 @@ import androidx.compose.ui.unit.dp
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.uimanager.ThemedReactContext
 import com.reactnativestripesdk.utils.KeepJsAwakeTask
+import com.reactnativestripesdk.utils.mapFromCustomPaymentMethod
 import com.reactnativestripesdk.utils.mapFromPaymentMethod
+import com.stripe.android.model.PaymentMethod
+import com.stripe.android.paymentelement.CustomPaymentMethodResult
+import com.stripe.android.paymentelement.CustomPaymentMethodResultHandler
 import com.stripe.android.paymentelement.EmbeddedPaymentElement
+import com.stripe.android.paymentelement.ExperimentalCustomPaymentMethodsApi
 import com.stripe.android.paymentelement.rememberEmbeddedPaymentElement
 import com.stripe.android.paymentsheet.CreateIntentResult
 import com.stripe.android.paymentsheet.PaymentSheet
 import kotlinx.coroutines.CompletableDeferred
 import kotlinx.coroutines.channels.Channel
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.consumeAsFlow
+import kotlinx.coroutines.launch
 import toWritableMap
 
 enum class RowSelectionBehaviorType {
@@ -34,6 +44,7 @@ enum class RowSelectionBehaviorType {
   ImmediateAction,
 }
 
+@OptIn(ExperimentalCustomPaymentMethodsApi::class)
 class EmbeddedPaymentElementView(
   context: Context,
 ) : StripeAbstractComposeView(context) {
@@ -56,9 +67,92 @@ class EmbeddedPaymentElementView(
   private val reactContext get() = context as ThemedReactContext
   private val events = Channel<Event>(Channel.UNLIMITED)
 
+  @OptIn(ExperimentalCustomPaymentMethodsApi::class)
   @Composable
   override fun Content() {
     val type by remember { rowSelectionBehaviorType }
+    val coroutineScope = rememberCoroutineScope()
+
+    val confirmCustomPaymentMethodCallback =
+      remember(coroutineScope) {
+        {
+          customPaymentMethod: PaymentSheet.CustomPaymentMethod,
+          billingDetails: PaymentMethod.BillingDetails,
+          ->
+          // Launch a transparent Activity to ensure React Native UI can appear on top of the Stripe proxy activity.
+          try {
+            val intent =
+              Intent(reactContext, CustomPaymentMethodActivity::class.java).apply {
+                addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+                addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION)
+              }
+            reactContext.startActivity(intent)
+          } catch (e: Exception) {
+            Log.e("StripeReactNative", "Failed to start CustomPaymentMethodActivity", e)
+          }
+
+          val stripeSdkModule =
+            try {
+              requireStripeSdkModule()
+            } catch (ex: IllegalArgumentException) {
+              Log.e("StripeReactNative", "StripeSdkModule not found for CPM callback", ex)
+              CustomPaymentMethodActivity.finishCurrent()
+              return@remember
+            }
+
+          // Keep JS awake while React Native is backgrounded by Stripe SDK.
+          val keepJsAwakeTask =
+            KeepJsAwakeTask(reactContext.reactApplicationContext).apply { start() }
+
+          // Run on coroutine scope.
+          coroutineScope.launch {
+            try {
+              // Give the CustomPaymentMethodActivity a moment to fully initialize
+              delay(100)
+
+              // Emit event so JS can show the Alert and eventually respond via `customPaymentMethodResultCallback`.
+              stripeSdkModule.emitOnCustomPaymentMethodConfirmHandlerCallback(
+                mapFromCustomPaymentMethod(customPaymentMethod, billingDetails),
+              )
+
+              // Await JS result.
+              val resultFromJs = stripeSdkModule.customPaymentMethodResultCallback.await()
+
+              keepJsAwakeTask.stop()
+
+              val status = resultFromJs.getString("status")
+
+              val nativeResult =
+                when (status) {
+                  "completed" ->
+                    CustomPaymentMethodResult
+                      .completed()
+                  "canceled" ->
+                    CustomPaymentMethodResult
+                      .canceled()
+                  "failed" -> {
+                    val errMsg = resultFromJs.getString("error") ?: "Custom payment failed"
+                    CustomPaymentMethodResult
+                      .failed(displayMessage = errMsg)
+                  }
+                  else ->
+                    CustomPaymentMethodResult
+                      .failed(displayMessage = "Unknown status")
+                }
+
+              // Return result to Stripe SDK.
+              CustomPaymentMethodResultHandler.handleCustomPaymentMethodResult(
+                reactContext,
+                nativeResult,
+              )
+            } finally {
+              // Clean up the transparent activity
+              CustomPaymentMethodActivity.finishCurrent()
+            }
+          }
+        }
+      }
+
     val builder =
       remember(type) {
         EmbeddedPaymentElement
@@ -125,7 +219,8 @@ class EmbeddedPaymentElementView(
                 }
               requireStripeSdkModule().emitEmbeddedPaymentElementFormSheetConfirmComplete(map)
             },
-          ).rowSelectionBehavior(
+          ).confirmCustomPaymentMethodCallback(confirmCustomPaymentMethodCallback)
+          .rowSelectionBehavior(
             if (type == RowSelectionBehaviorType.Default) {
               EmbeddedPaymentElement.RowSelectionBehavior.default()
             } else {

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

@@ -17,10 +17,13 @@ import com.reactnativestripesdk.PaymentSheetFragment.Companion.buildGooglePayCon
 import com.reactnativestripesdk.addresssheet.AddressSheetView
 import com.reactnativestripesdk.utils.PaymentSheetAppearanceException
 import com.reactnativestripesdk.utils.PaymentSheetException
+import com.reactnativestripesdk.utils.getBooleanOr
 import com.reactnativestripesdk.utils.mapToPreferredNetworks
+import com.reactnativestripesdk.utils.parseCustomPaymentMethods
 import com.reactnativestripesdk.utils.toBundleObject
 import com.stripe.android.ExperimentalAllowsRemovalOfLastSavedPaymentMethodApi
 import com.stripe.android.paymentelement.EmbeddedPaymentElement
+import com.stripe.android.paymentelement.ExperimentalCustomPaymentMethodsApi
 import com.stripe.android.paymentsheet.PaymentSheet
 
 @ReactModule(name = EmbeddedPaymentElementViewManager.NAME)
@@ -52,10 +55,13 @@ class EmbeddedPaymentElementViewManager :
     view: EmbeddedPaymentElementView,
     cfg: Dynamic,
   ) {
-    val rowSelectionBehaviorType = parseRowSelectionBehavior(cfg.asMap())
+    val readableMap = cfg.asMap()
+    if (readableMap == null) return
+
+    val rowSelectionBehaviorType = parseRowSelectionBehavior(readableMap)
     view.rowSelectionBehaviorType.value = rowSelectionBehaviorType
 
-    val elementConfig = parseElementConfiguration(cfg.asMap(), view.context)
+    val elementConfig = parseElementConfiguration(readableMap, view.context)
     view.latestElementConfig = elementConfig
     // if intentConfig is already set, configure immediately:
     view.latestIntentConfig?.let { intentCfg ->
@@ -72,7 +78,9 @@ class EmbeddedPaymentElementViewManager :
     view: EmbeddedPaymentElementView,
     cfg: Dynamic,
   ) {
-    val intentConfig = parseIntentConfiguration(cfg.asMap())
+    val readableMap = cfg.asMap()
+    if (readableMap == null) return
+    val intentConfig = parseIntentConfiguration(readableMap)
     view.latestIntentConfig = intentConfig
     view.latestElementConfig?.let { elemCfg ->
       view.configure(elemCfg, intentConfig)
@@ -80,7 +88,10 @@ class EmbeddedPaymentElementViewManager :
   }
 
   @SuppressLint("RestrictedApi")
-  @OptIn(ExperimentalAllowsRemovalOfLastSavedPaymentMethodApi::class)
+  @OptIn(
+    ExperimentalAllowsRemovalOfLastSavedPaymentMethodApi::class,
+    ExperimentalCustomPaymentMethodsApi::class,
+  )
   private fun parseElementConfiguration(
     map: ReadableMap,
     context: Context,
@@ -142,7 +153,7 @@ class EmbeddedPaymentElementViewManager :
         email = mapToCollectionMode(billingConfigParams?.getString("email")),
         address = mapToAddressCollectionMode(billingConfigParams?.getString("address")),
         attachDefaultsToPaymentMethod =
-          billingConfigParams?.getBoolean("attachDefaultsToPaymentMethod") ?: false,
+          billingConfigParams?.getBooleanOr("attachDefaultsToPaymentMethod", false) ?: false,
       )
     val allowsRemovalOfLastSavedPaymentMethod =
       if (map.hasKey("allowsRemovalOfLastSavedPaymentMethod")) {
@@ -184,6 +195,16 @@ class EmbeddedPaymentElementViewManager :
           ),
         ).allowsRemovalOfLastSavedPaymentMethod(allowsRemovalOfLastSavedPaymentMethod)
         .cardBrandAcceptance(mapToCardBrandAcceptance(toBundleObject(map)))
+        // Serialize original ReadableMap because toBundleObject cannot keep arrays of objects
+        .customPaymentMethods(
+          parseCustomPaymentMethods(
+            toBundleObject(map.getMap("customPaymentMethodConfiguration")).apply {
+              map.getMap("customPaymentMethodConfiguration")?.let { readable ->
+                putSerializable("customPaymentMethodConfigurationReadableMap", readable.toHashMap())
+              }
+            },
+          ),
+        )
 
     primaryButtonLabel?.let { configurationBuilder.primaryButtonLabel(it) }
     paymentMethodOrder?.let { configurationBuilder.paymentMethodOrder(it) }

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

@@ -38,7 +38,6 @@ class PaymentMethodCreateParamsFactory(
         PaymentMethod.Type.Card -> createCardPaymentMethodParams()
         PaymentMethod.Type.Ideal -> createIDEALParams()
         PaymentMethod.Type.Alipay -> createAlipayParams()
-        PaymentMethod.Type.Sofort -> createSofortParams()
         PaymentMethod.Type.Bancontact -> createBancontactParams()
         PaymentMethod.Type.SepaDebit -> createSepaParams()
         PaymentMethod.Type.Oxxo -> createOXXOParams()
@@ -79,21 +78,6 @@ class PaymentMethodCreateParamsFactory(
   @Throws(PaymentMethodCreateParamsException::class)
   private fun createAlipayParams(): PaymentMethodCreateParams = PaymentMethodCreateParams.createAlipay()
 
-  @Throws(PaymentMethodCreateParamsException::class)
-  private fun createSofortParams(): PaymentMethodCreateParams {
-    val country =
-      getValOr(paymentMethodData, "country", null)
-        ?: run {
-          throw PaymentMethodCreateParamsException("You must provide bank account country")
-        }
-
-    return PaymentMethodCreateParams.create(
-      PaymentMethodCreateParams.Sofort(country = country),
-      billingDetailsParams,
-      metadata = metadataParams,
-    )
-  }
-
   @Throws(PaymentMethodCreateParamsException::class)
   private fun createBancontactParams(): PaymentMethodCreateParams {
     billingDetailsParams?.let {
@@ -271,7 +255,6 @@ class PaymentMethodCreateParamsFactory(
         PaymentMethod.Type.Affirm -> createAffirmStripeIntentParams(clientSecret, isPaymentIntent)
         PaymentMethod.Type.Ideal,
         PaymentMethod.Type.Alipay,
-        PaymentMethod.Type.Sofort,
         PaymentMethod.Type.Bancontact,
         PaymentMethod.Type.SepaDebit,
         PaymentMethod.Type.Oxxo,

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

@@ -478,9 +478,11 @@ private fun buildFormInsets(insetParams: Bundle?): PaymentSheet.Insets {
 }
 
 /**
- * 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]).
+ * 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.
+ * Falls back to [defaultColor] if no color is provided.
  */
 private fun dynamicColorFromParams(
   context: Context,
@@ -488,8 +490,12 @@ private fun dynamicColorFromParams(
   key: String,
   defaultColor: Int,
 ): Int {
-  // Expect a nested Bundle { "light": "#RRGGBB", "dark": "#RRGGBB" }
-  val colorBundle = params?.getBundle(key)
+  if (params == null) {
+    return defaultColor
+  }
+
+  // First check if it's a nested Bundle { "light": "#RRGGBB", "dark": "#RRGGBB" }
+  val colorBundle = params.getBundle(key)
   if (colorBundle != null) {
     val isDark =
       (
@@ -508,7 +514,12 @@ private fun dynamicColorFromParams(
     return colorFromHexOrDefault(hex, defaultColor)
   }
 
-  // no override bundle → just use default
+  // Check if it's a single color string
+  params.getString(key)?.let { colorString ->
+    return colorFromHexOrDefault(colorString, defaultColor)
+  }
+
+  // no override → just use default
   return defaultColor
 }