@stripe/stripe-react-native 0.48.0 → 0.50.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # CHANGELOG
 
+## 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**
+- Added rowSelectionBehavior to `EmbeddedPaymentElementConfiguration` with `immediateAction` option
+- Added `flatWithChevron` to `AppearanceParams.embeddedPaymentElement.rowConfig.style`
+- Added `PaymentMethodOptions` to `PaymentMode` to enable setting payment method level setup future usage value
+- Added `None` to `FutureUsage`
+
 ## 0.48.0 - 2025-06-11
 
 **Feature**

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.properties

@@ -3,4 +3,4 @@ StripeSdk_compileSdkVersion=30
 StripeSdk_targetSdkVersion=28
 StripeSdk_minSdkVersion=21
 # Keep StripeSdk_stripeVersion in sync with https://github.com/stripe/stripe-identity-react-native/blob/main/android/gradle.properties
-StripeSdk_stripeVersion=21.17.+
+StripeSdk_stripeVersion=21.19.+

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,13 +1,17 @@
 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
 import androidx.compose.runtime.LaunchedEffect
 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
@@ -18,18 +22,29 @@ 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.ExperimentalEmbeddedPaymentElementApi
+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
 
-@OptIn(ExperimentalEmbeddedPaymentElementApi::class)
+enum class RowSelectionBehaviorType {
+  Default,
+  ImmediateAction,
+}
+
+@OptIn(ExperimentalCustomPaymentMethodsApi::class)
 class EmbeddedPaymentElementView(
   context: Context,
 ) : StripeAbstractComposeView(context) {
@@ -47,75 +62,175 @@ class EmbeddedPaymentElementView(
   var latestIntentConfig: PaymentSheet.IntentConfiguration? = null
   var latestElementConfig: EmbeddedPaymentElement.Configuration? = null
 
+  val rowSelectionBehaviorType = mutableStateOf<RowSelectionBehaviorType?>(null)
+
   private val reactContext get() = context as ThemedReactContext
   private val events = Channel<Event>(Channel.UNLIMITED)
 
-  private val builder by lazy {
-    EmbeddedPaymentElement.Builder(
-      createIntentCallback = { paymentMethod, shouldSavePaymentMethod ->
-        val stripeSdkModule =
+  @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 {
-            requireStripeSdkModule()
-          } catch (ex: IllegalArgumentException) {
-            return@Builder 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 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)
           }
 
-        // Make sure that JS is active since the activity will be paused when stripe ui is presented.
-        val keepJsAwakeTask = KeepJsAwakeTask(reactContext.reactApplicationContext).apply { start() }
+          val stripeSdkModule =
+            try {
+              requireStripeSdkModule()
+            } catch (ex: IllegalArgumentException) {
+              Log.e("StripeReactNative", "StripeSdkModule not found for CPM callback", ex)
+              CustomPaymentMethodActivity.finishCurrent()
+              return@remember
+            }
 
-        val params =
-          Arguments.createMap().apply {
-            putMap("paymentMethod", mapFromPaymentMethod(paymentMethod))
-            putBoolean("shouldSavePaymentMethod", shouldSavePaymentMethod)
-          }
+          // Keep JS awake while React Native is backgrounded by Stripe SDK.
+          val keepJsAwakeTask =
+            KeepJsAwakeTask(reactContext.reactApplicationContext).apply { start() }
 
-        stripeSdkModule.emitOnConfirmHandlerCallback(params)
+          // Run on coroutine scope.
+          coroutineScope.launch {
+            try {
+              // Give the CustomPaymentMethodActivity a moment to fully initialize
+              delay(100)
 
-        val resultFromJavascript = stripeSdkModule.embeddedIntentCreationCallback.await()
-        // reset the completable
-        stripeSdkModule.embeddedIntentCreationCallback = CompletableDeferred()
+              // Emit event so JS can show the Alert and eventually respond via `customPaymentMethodResultCallback`.
+              stripeSdkModule.emitOnCustomPaymentMethodConfirmHandlerCallback(
+                mapFromCustomPaymentMethod(customPaymentMethod, billingDetails),
+              )
 
-        keepJsAwakeTask.stop()
+              // Await JS result.
+              val resultFromJs = stripeSdkModule.customPaymentMethodResultCallback.await()
 
-        resultFromJavascript.getString("clientSecret")?.let {
-          CreateIntentResult.Success(clientSecret = it)
-        } ?: run {
-          val errorMap = resultFromJavascript.getMap("error")
-          CreateIntentResult.Failure(
-            cause = Exception(errorMap?.getString("message")),
-            displayMessage = errorMap?.getString("localizedMessage"),
-          )
+              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()
+            }
+          }
         }
-      },
-      resultCallback = { result ->
-        val map =
-          Arguments.createMap().apply {
-            when (result) {
-              is EmbeddedPaymentElement.Result.Completed -> {
-                putString("status", "completed")
-              }
-              is EmbeddedPaymentElement.Result.Canceled -> {
-                putString("status", "canceled")
+      }
+
+    val builder =
+      remember(type) {
+        EmbeddedPaymentElement
+          .Builder(
+            createIntentCallback = { paymentMethod, shouldSavePaymentMethod ->
+              val stripeSdkModule =
+                try {
+                  requireStripeSdkModule()
+                } catch (ex: IllegalArgumentException) {
+                  return@Builder 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",
+                  )
+                }
+
+              // Make sure that JS is active since the activity will be paused when stripe ui is presented.
+              val keepJsAwakeTask =
+                KeepJsAwakeTask(reactContext.reactApplicationContext).apply { start() }
+
+              val params =
+                Arguments.createMap().apply {
+                  putMap("paymentMethod", mapFromPaymentMethod(paymentMethod))
+                  putBoolean("shouldSavePaymentMethod", shouldSavePaymentMethod)
+                }
+
+              stripeSdkModule.emitOnConfirmHandlerCallback(params)
+
+              val resultFromJavascript = stripeSdkModule.embeddedIntentCreationCallback.await()
+              // reset the completable
+              stripeSdkModule.embeddedIntentCreationCallback = CompletableDeferred()
+
+              keepJsAwakeTask.stop()
+
+              resultFromJavascript.getString("clientSecret")?.let {
+                CreateIntentResult.Success(clientSecret = it)
+              } ?: run {
+                val errorMap = resultFromJavascript.getMap("error")
+                CreateIntentResult.Failure(
+                  cause = Exception(errorMap?.getString("message")),
+                  displayMessage = errorMap?.getString("localizedMessage"),
+                )
               }
-              is EmbeddedPaymentElement.Result.Failed -> {
-                putString("status", "failed")
-                putString("error", result.error.message ?: "Unknown error")
+            },
+            resultCallback = { result ->
+              val map =
+                Arguments.createMap().apply {
+                  when (result) {
+                    is EmbeddedPaymentElement.Result.Completed -> {
+                      putString("status", "completed")
+                    }
+
+                    is EmbeddedPaymentElement.Result.Canceled -> {
+                      putString("status", "canceled")
+                    }
+
+                    is EmbeddedPaymentElement.Result.Failed -> {
+                      putString("status", "failed")
+                      putString("error", result.error.message ?: "Unknown error")
+                    }
+                  }
+                }
+              requireStripeSdkModule().emitEmbeddedPaymentElementFormSheetConfirmComplete(map)
+            },
+          ).confirmCustomPaymentMethodCallback(confirmCustomPaymentMethodCallback)
+          .rowSelectionBehavior(
+            if (type == RowSelectionBehaviorType.Default) {
+              EmbeddedPaymentElement.RowSelectionBehavior.default()
+            } else {
+              EmbeddedPaymentElement.RowSelectionBehavior.immediateAction {
+                requireStripeSdkModule().emitEmbeddedPaymentElementRowSelectionImmediateAction()
               }
-            }
-          }
-        requireStripeSdkModule().emitEmbeddedPaymentElementFormSheetConfirmComplete(map)
-      },
-    )
-  }
+            },
+          )
+      }
 
-  @Composable
-  override fun Content() {
     val embedded = rememberEmbeddedPaymentElement(builder)
     var height by remember {
       mutableIntStateOf(0)

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

@@ -18,13 +18,13 @@ import com.reactnativestripesdk.addresssheet.AddressSheetView
 import com.reactnativestripesdk.utils.PaymentSheetAppearanceException
 import com.reactnativestripesdk.utils.PaymentSheetException
 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.ExperimentalEmbeddedPaymentElementApi
+import com.stripe.android.paymentelement.ExperimentalCustomPaymentMethodsApi
 import com.stripe.android.paymentsheet.PaymentSheet
 
-@OptIn(ExperimentalEmbeddedPaymentElementApi::class)
 @ReactModule(name = EmbeddedPaymentElementViewManager.NAME)
 class EmbeddedPaymentElementViewManager :
   ViewGroupManager<EmbeddedPaymentElementView>(),
@@ -54,6 +54,9 @@ class EmbeddedPaymentElementViewManager :
     view: EmbeddedPaymentElementView,
     cfg: Dynamic,
   ) {
+    val rowSelectionBehaviorType = parseRowSelectionBehavior(cfg.asMap())
+    view.rowSelectionBehaviorType.value = rowSelectionBehaviorType
+
     val elementConfig = parseElementConfiguration(cfg.asMap(), view.context)
     view.latestElementConfig = elementConfig
     // if intentConfig is already set, configure immediately:
@@ -79,7 +82,10 @@ class EmbeddedPaymentElementViewManager :
   }
 
   @SuppressLint("RestrictedApi")
-  @OptIn(ExperimentalAllowsRemovalOfLastSavedPaymentMethodApi::class)
+  @OptIn(
+    ExperimentalAllowsRemovalOfLastSavedPaymentMethodApi::class,
+    ExperimentalCustomPaymentMethodsApi::class,
+  )
   private fun parseElementConfiguration(
     map: ReadableMap,
     context: Context,
@@ -183,6 +189,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) }
@@ -190,6 +206,21 @@ class EmbeddedPaymentElementViewManager :
     return configurationBuilder.build()
   }
 
+  private fun parseRowSelectionBehavior(map: ReadableMap): RowSelectionBehaviorType {
+    val rowSelectionBehavior =
+      map
+        .getMap("rowSelectionBehavior")
+        ?.getString("type")
+        ?.let { type ->
+          when (type) {
+            "immediateAction" -> RowSelectionBehaviorType.ImmediateAction
+            else -> RowSelectionBehaviorType.Default
+          }
+        }
+        ?: RowSelectionBehaviorType.Default
+    return rowSelectionBehavior
+  }
+
   private fun parseIntentConfiguration(map: ReadableMap): PaymentSheet.IntentConfiguration {
     val intentConfig = PaymentSheetFragment.buildIntentConfiguration(toBundleObject(map))
     return intentConfig ?: throw IllegalArgumentException("IntentConfiguration is null")

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/PaymentOptionDisplayDataMapper.kt

@@ -2,13 +2,11 @@ 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)

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

@@ -6,7 +6,7 @@ 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.paymentelement.AppearanceAPIAdditionsPreview
 import com.stripe.android.paymentsheet.PaymentSheet
 import com.stripe.android.uicore.StripeThemeDefaults
 
@@ -57,6 +57,7 @@ fun buildPaymentSheetAppearance(
   )
 }
 
+@OptIn(AppearanceAPIAdditionsPreview::class)
 private fun buildTypography(
   fontParams: Bundle?,
   context: Context,
@@ -244,7 +245,6 @@ private fun buildPrimaryButtonColors(
       ),
   )
 
-@OptIn(ExperimentalEmbeddedPaymentElementApi::class)
 @SuppressLint("RestrictedApi")
 @Throws(PaymentSheetAppearanceException::class)
 private fun buildEmbeddedAppearance(
@@ -341,7 +341,7 @@ private fun buildEmbeddedAppearance(
         val checkmarkParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.CHECKMARK)
         val separatorInsetsParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
 
-        // Default separator insets specific to FlatWithCheckmark
+        // Default separator insets specific to FlatWithCheckmark and FlatWithChevron
         val defaultSeparatorStartInsetDp = 0.0f
         val defaultSeparatorEndInsetDp = 0.0f
 
@@ -392,6 +392,59 @@ private fun buildEmbeddedAppearance(
           colorsDark = flatCheckmarkColors,
         )
       }
+      "flatWithChevron" -> {
+        val flatParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLAT)
+        val chevronParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.CHEVRON)
+        val separatorInsetsParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
+
+        // Default separator insets specific to FlatWithCheckmark and FlatWithChevron
+        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)
+
+        // Parse booleans
+        val topEnabled = getBooleanOr(flatParams, PaymentSheetAppearanceKeys.TOP_SEPARATOR_ENABLED, true)
+        val bottomEnabled = getBooleanOr(flatParams, PaymentSheetAppearanceKeys.BOTTOM_SEPARATOR_ENABLED, true)
+
+        val parsedSeparatorColor =
+          dynamicColorFromParams(
+            context,
+            flatParams,
+            PaymentSheetAppearanceKeys.SEPARATOR_COLOR,
+            Color.GRAY,
+          )
+
+        val parsedChevronColor =
+          dynamicColorFromParams(
+            context,
+            chevronParams,
+            PaymentSheetAppearanceKeys.COLOR,
+            defaultColors.componentBorder, // Default to component border color like other elements
+          )
+
+        // Create the required Colors object
+        val flatChevronColors =
+          PaymentSheet.Appearance.Embedded.RowStyle.FlatWithChevron.Colors(
+            separatorColor = parsedSeparatorColor,
+            chevronColor = parsedChevronColor,
+          )
+
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithChevron(
+          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 = flatChevronColors,
+          colorsDark = flatChevronColors,
+        )
+      }
       "floatingButton" -> {
         val floatingParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLOATING)
         PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton(
@@ -606,6 +659,7 @@ private class PaymentSheetAppearanceKeys {
     const val SELECTED_COLOR = "selectedColor"
     const val UNSELECTED_COLOR = "unselectedColor"
     const val CHECKMARK = "checkmark"
+    const val CHEVRON = "chevron"
     const val COLOR = "color"
     const val CHECKMARK_INSET = "inset"