@stripe/stripe-react-native 0.56.0 → 0.57.1

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

@@ -3,487 +3,490 @@ package com.reactnativestripesdk
 import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.Configuration
-import android.graphics.Color
-import android.os.Bundle
+import androidx.core.graphics.toColorInt
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
 import com.reactnativestripesdk.utils.PaymentSheetAppearanceException
+import com.reactnativestripesdk.utils.getBooleanOrNull
+import com.reactnativestripesdk.utils.getDoubleOrNull
+import com.reactnativestripesdk.utils.getFloatOr
+import com.reactnativestripesdk.utils.getFloatOrNull
 import com.stripe.android.paymentelement.AppearanceAPIAdditionsPreview
 import com.stripe.android.paymentsheet.PaymentSheet
 import com.stripe.android.uicore.StripeThemeDefaults
 
 @SuppressLint("RestrictedApi")
 fun buildPaymentSheetAppearance(
-  userParams: Bundle?,
+  userParams: ReadableMap?,
   context: Context,
 ): PaymentSheet.Appearance {
-  val colorParams = userParams?.getBundle(PaymentSheetAppearanceKeys.COLORS)
-  val lightColorParams = colorParams?.getBundle(PaymentSheetAppearanceKeys.LIGHT) ?: colorParams
-  val darkColorParams = colorParams?.getBundle(PaymentSheetAppearanceKeys.DARK) ?: colorParams
-  val insetParams = userParams?.getBundle(PaymentSheetAppearanceKeys.FORM_INSETS)
+  val colorParams = userParams?.getMap(PaymentSheetAppearanceKeys.COLORS)
+  val lightColorParams = colorParams?.getMap(PaymentSheetAppearanceKeys.LIGHT) ?: colorParams
+  val darkColorParams = colorParams?.getMap(PaymentSheetAppearanceKeys.DARK) ?: colorParams
+  val insetParams = userParams?.getMap(PaymentSheetAppearanceKeys.FORM_INSETS)
 
   val embeddedAppearance =
     buildEmbeddedAppearance(
-      userParams?.getBundle(PaymentSheetAppearanceKeys.EMBEDDED_PAYMENT_ELEMENT),
-      lightColorParams,
+      userParams?.getMap(PaymentSheetAppearanceKeys.EMBEDDED_PAYMENT_ELEMENT),
       context,
     )
 
-  embeddedAppearance?.let {
-    return PaymentSheet.Appearance(
-      typography = buildTypography(userParams?.getBundle(PaymentSheetAppearanceKeys.FONT), context),
-      colorsLight = buildColors(lightColorParams, PaymentSheet.Colors.defaultLight),
-      colorsDark = buildColors(darkColorParams, PaymentSheet.Colors.defaultDark),
-      shapes = buildShapes(userParams?.getBundle(PaymentSheetAppearanceKeys.SHAPES)),
-      primaryButton =
-        buildPrimaryButton(
-          userParams?.getBundle(PaymentSheetAppearanceKeys.PRIMARY_BUTTON),
-          context,
-        ),
-      embeddedAppearance = embeddedAppearance,
-      formInsetValues = buildFormInsets(insetParams),
-    )
-  }
-
-  return PaymentSheet.Appearance(
-    typography = buildTypography(userParams?.getBundle(PaymentSheetAppearanceKeys.FONT), context),
-    colorsLight = buildColors(lightColorParams, PaymentSheet.Colors.defaultLight),
-    colorsDark = buildColors(darkColorParams, PaymentSheet.Colors.defaultDark),
-    shapes = buildShapes(userParams?.getBundle(PaymentSheetAppearanceKeys.SHAPES)),
-    primaryButton =
-      buildPrimaryButton(
-        userParams?.getBundle(PaymentSheetAppearanceKeys.PRIMARY_BUTTON),
-        context,
-      ),
-    formInsetValues = buildFormInsets(insetParams),
+  val builder = PaymentSheet.Appearance.Builder()
+  builder.typography(buildTypography(userParams?.getMap(PaymentSheetAppearanceKeys.FONT), context))
+  builder.colorsLight(buildColorsBuilder(isLightMode = true, lightColorParams).build())
+  builder.colorsDark(buildColorsBuilder(isLightMode = false, darkColorParams).build())
+  builder.shapes(buildShapes(userParams?.getMap(PaymentSheetAppearanceKeys.SHAPES)))
+  builder.primaryButton(
+    buildPrimaryButton(
+      userParams?.getMap(PaymentSheetAppearanceKeys.PRIMARY_BUTTON),
+      context,
+    ),
   )
+  builder.embeddedAppearance(embeddedAppearance)
+  builder.formInsetValues(buildFormInsets(insetParams))
+  return builder.build()
 }
 
+@SuppressLint("RestrictedApi")
 @OptIn(AppearanceAPIAdditionsPreview::class)
 private fun buildTypography(
-  fontParams: Bundle?,
+  fontParams: ReadableMap?,
   context: Context,
 ): PaymentSheet.Typography {
-  val scale = getDoubleOrNull(fontParams, PaymentSheetAppearanceKeys.SCALE)
+  val scale = fontParams.getDoubleOrNull(PaymentSheetAppearanceKeys.SCALE)
   val resId =
     getFontResId(
       fontParams,
       PaymentSheetAppearanceKeys.FAMILY,
-      PaymentSheet.Typography.default.fontResId,
       context,
     )
-  return PaymentSheet.Typography.default.copy(
-    sizeScaleFactor = scale?.toFloat() ?: PaymentSheet.Typography.default.sizeScaleFactor,
-    fontResId = resId,
-  )
+  val builder = PaymentSheet.Typography.Builder()
+  scale?.let {
+    builder.sizeScaleFactor(it.toFloat())
+  }
+  resId?.let {
+    builder.fontResId(it)
+  }
+  return builder.build()
 }
 
 @Throws(PaymentSheetAppearanceException::class)
-private fun colorFromHexOrDefault(
-  hexString: String?,
-  default: Int,
-): Int {
-  return hexString?.trim()?.replace("#", "")?.let {
+private fun colorFromHex(hexString: String?): Int? =
+  hexString?.trim()?.replace("#", "")?.let {
     if (it.length == 6 || it.length == 8) {
-      return Color.parseColor("#$it")
+      "#$it".toColorInt()
     } else {
       throw PaymentSheetAppearanceException(
         "Failed to set Payment Sheet appearance. Expected hex string of length 6 or 8, but received: $it",
       )
     }
   }
-    ?: run {
-      return default
+
+@SuppressLint("RestrictedApi")
+private fun buildColorsBuilder(
+  isLightMode: Boolean,
+  colorParams: ReadableMap?,
+): PaymentSheet.Colors.Builder {
+  val builder =
+    if (isLightMode) {
+      PaymentSheet.Colors.Builder.light()
+    } else {
+      PaymentSheet.Colors.Builder.dark()
     }
-}
 
-private fun buildColors(
-  colorParams: Bundle?,
-  default: PaymentSheet.Colors,
-): PaymentSheet.Colors {
-  if (colorParams == null) {
-    return default
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.PRIMARY))?.let {
+    builder.primary(it)
   }
 
-  return default.copy(
-    primary =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.PRIMARY),
-        default.primary,
-      ),
-    surface =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.BACKGROUND),
-        default.surface,
-      ),
-    component =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.COMPONENT_BACKGROUND),
-        default.component,
-      ),
-    componentBorder =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.COMPONENT_BORDER),
-        default.componentBorder,
-      ),
-    componentDivider =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.COMPONENT_DIVIDER),
-        default.componentDivider,
-      ),
-    onComponent =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.COMPONENT_TEXT),
-        default.onComponent,
-      ),
-    onSurface =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.PRIMARY_TEXT),
-        default.onSurface,
-      ),
-    subtitle =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.SECONDARY_TEXT),
-        default.subtitle,
-      ),
-    placeholderText =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.PLACEHOLDER_TEXT),
-        default.placeholderText,
-      ),
-    appBarIcon =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.ICON),
-        default.appBarIcon,
-      ),
-    error =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.ERROR),
-        default.error,
-      ),
-  )
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.BACKGROUND))?.let {
+    builder.surface(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.COMPONENT_BACKGROUND))?.let {
+    builder.component(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.COMPONENT_BORDER))?.let {
+    builder.componentBorder(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.COMPONENT_DIVIDER))?.let {
+    builder.componentDivider(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.COMPONENT_TEXT))?.let {
+    builder.onComponent(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.PRIMARY_TEXT))?.let {
+    builder.onSurface(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.SECONDARY_TEXT))?.let {
+    builder.subtitle(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.PLACEHOLDER_TEXT))?.let {
+    builder.placeholderText(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.ICON))?.let {
+    builder.appBarIcon(it)
+  }
+
+  colorFromHex(colorParams?.getString(PaymentSheetAppearanceKeys.ERROR))?.let {
+    builder.error(it)
+  }
+
+  return builder
 }
 
-private fun buildShapes(shapeParams: Bundle?): PaymentSheet.Shapes =
-  PaymentSheet.Shapes.default.copy(
-    cornerRadiusDp =
-      getFloatOr(
-        shapeParams,
-        PaymentSheetAppearanceKeys.BORDER_RADIUS,
-        PaymentSheet.Shapes.default.cornerRadiusDp,
-      ),
-    borderStrokeWidthDp =
-      getFloatOr(
-        shapeParams,
-        PaymentSheetAppearanceKeys.BORDER_WIDTH,
-        PaymentSheet.Shapes.default.borderStrokeWidthDp,
-      ),
-  )
+@SuppressLint("RestrictedApi")
+private fun buildShapes(shapeParams: ReadableMap?): PaymentSheet.Shapes {
+  val builder = PaymentSheet.Shapes.Builder()
+
+  shapeParams.getFloatOrNull(PaymentSheetAppearanceKeys.BORDER_RADIUS)?.let {
+    builder.cornerRadiusDp(it)
+  }
+
+  shapeParams.getFloatOrNull(PaymentSheetAppearanceKeys.BORDER_WIDTH)?.let {
+    builder.borderStrokeWidthDp(it)
+  }
 
+  return builder.build()
+}
+
+@SuppressLint("RestrictedApi")
 private fun buildPrimaryButton(
-  params: Bundle?,
+  params: ReadableMap?,
   context: Context,
 ): PaymentSheet.PrimaryButton {
   if (params == null) {
     return PaymentSheet.PrimaryButton()
   }
 
-  val fontParams = params.getBundle(PaymentSheetAppearanceKeys.FONT) ?: Bundle.EMPTY
-  val shapeParams = params.getBundle(PaymentSheetAppearanceKeys.SHAPES) ?: Bundle.EMPTY
-  val colorParams = params.getBundle(PaymentSheetAppearanceKeys.COLORS) ?: Bundle.EMPTY
-  val lightColorParams = colorParams.getBundle(PaymentSheetAppearanceKeys.LIGHT) ?: colorParams
-  val darkColorParams = colorParams.getBundle(PaymentSheetAppearanceKeys.DARK) ?: colorParams
+  val fontParams = params.getMap(PaymentSheetAppearanceKeys.FONT) ?: Arguments.createMap()
+  val shapeParams = params.getMap(PaymentSheetAppearanceKeys.SHAPES) ?: Arguments.createMap()
+  val colorParams = params.getMap(PaymentSheetAppearanceKeys.COLORS) ?: Arguments.createMap()
+  val lightColorParams = colorParams.getMap(PaymentSheetAppearanceKeys.LIGHT) ?: colorParams
+  val darkColorParams = colorParams.getMap(PaymentSheetAppearanceKeys.DARK) ?: colorParams
 
   return PaymentSheet.PrimaryButton(
     colorsLight =
-      buildPrimaryButtonColors(lightColorParams, PaymentSheet.PrimaryButtonColors.defaultLight, context),
+      buildPrimaryButtonColors(true, lightColorParams, context).build(),
     colorsDark =
-      buildPrimaryButtonColors(darkColorParams, PaymentSheet.PrimaryButtonColors.defaultDark, context),
+      buildPrimaryButtonColors(false, darkColorParams, context).build(),
     shape =
       PaymentSheet.PrimaryButtonShape(
         cornerRadiusDp =
-          getFloatOrNull(shapeParams, PaymentSheetAppearanceKeys.BORDER_RADIUS),
+          shapeParams.getFloatOrNull(PaymentSheetAppearanceKeys.BORDER_RADIUS),
         borderStrokeWidthDp =
-          getFloatOrNull(shapeParams, PaymentSheetAppearanceKeys.BORDER_WIDTH),
-        heightDp = getFloatOrNull(shapeParams, PaymentSheetAppearanceKeys.HEIGHT),
+          shapeParams.getFloatOrNull(PaymentSheetAppearanceKeys.BORDER_WIDTH),
+        heightDp = shapeParams.getFloatOrNull(PaymentSheetAppearanceKeys.HEIGHT),
       ),
     typography =
       PaymentSheet.PrimaryButtonTypography(
         fontResId =
-          getFontResId(fontParams, PaymentSheetAppearanceKeys.FAMILY, null, context),
+          getFontResId(fontParams, PaymentSheetAppearanceKeys.FAMILY, context),
       ),
   )
 }
 
+@SuppressLint("RestrictedApi")
 @Throws(PaymentSheetAppearanceException::class)
 private fun buildPrimaryButtonColors(
-  colorParams: Bundle,
-  default: PaymentSheet.PrimaryButtonColors,
+  isLightMode: Boolean,
+  colorParams: ReadableMap,
   context: Context,
-): PaymentSheet.PrimaryButtonColors =
-  PaymentSheet.PrimaryButtonColors(
-    background =
-      colorParams
-        .getString(PaymentSheetAppearanceKeys.BACKGROUND)
-        ?.trim()
-        ?.replace("#", "")
-        ?.let {
-          if (it.length == 6 || it.length == 8) {
-            Color.parseColor("#$it")
-          } else {
-            throw PaymentSheetAppearanceException(
-              "Failed to set Payment Sheet appearance. Expected hex string of length 6 or 8, but received: $it",
-            )
-          }
-        } ?: run { null },
-    onBackground =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.TEXT),
-        default.onBackground,
-      ),
-    border =
-      colorFromHexOrDefault(
-        colorParams.getString(PaymentSheetAppearanceKeys.BORDER),
-        default.border,
-      ),
-    successBackgroundColor =
-      dynamicColorFromParams(
-        context,
-        colorParams,
-        PaymentSheetAppearanceKeys.SUCCESS_BACKGROUND,
-        default.successBackgroundColor,
-      ),
-    onSuccessBackgroundColor =
-      dynamicColorFromParams(
-        context,
-        colorParams,
-        PaymentSheetAppearanceKeys.SUCCESS_TEXT,
-        default.onSuccessBackgroundColor,
-      ),
-  )
+): PaymentSheet.PrimaryButtonColors.Builder {
+  val builder =
+    if (isLightMode) {
+      PaymentSheet.PrimaryButtonColors.Builder.light()
+    } else {
+      PaymentSheet.PrimaryButtonColors.Builder.dark()
+    }
+
+  // TODO: Why is background a string but successBackgroundColor a "dynamic" color?
+  // https://stripe.dev/stripe-react-native/api-reference/types/PaymentSheet.PrimaryButtonColorConfig.html
+  colorFromHex(colorParams.getString(PaymentSheetAppearanceKeys.BACKGROUND))?.let {
+    builder.background(it)
+  }
+
+  colorFromHex(colorParams.getString(PaymentSheetAppearanceKeys.TEXT))?.let {
+    builder.onBackground(it)
+  }
+
+  colorFromHex(colorParams.getString(PaymentSheetAppearanceKeys.BORDER))?.let {
+    builder.border(it)
+  }
+
+  dynamicColorFromParams(
+    context,
+    colorParams,
+    PaymentSheetAppearanceKeys.SUCCESS_BACKGROUND,
+  )?.let {
+    builder.successBackgroundColor(it)
+  }
+
+  dynamicColorFromParams(
+    context,
+    colorParams,
+    PaymentSheetAppearanceKeys.SUCCESS_TEXT,
+  )?.let {
+    builder.onSuccessBackgroundColor(it)
+  }
+  return builder
+}
 
 @SuppressLint("RestrictedApi")
 @Throws(PaymentSheetAppearanceException::class)
 private fun buildEmbeddedAppearance(
-  embeddedParams: Bundle?,
-  defaultColorsBundle: Bundle?,
+  embeddedParams: ReadableMap?,
   context: Context,
-): PaymentSheet.Appearance.Embedded? {
-  if (embeddedParams == null) {
-    return null
-  }
+): PaymentSheet.Appearance.Embedded {
+  val embeddedBuilder = PaymentSheet.Appearance.Embedded.Builder()
+  val rowParams = embeddedParams?.getMap(PaymentSheetAppearanceKeys.ROW)
+  val styleString = rowParams?.getString(PaymentSheetAppearanceKeys.STYLE)
+  when (styleString) {
+    "flatWithRadio" -> {
+      val flatParams = rowParams.getMap(PaymentSheetAppearanceKeys.FLAT)
+      val radioParams = flatParams?.getMap(PaymentSheetAppearanceKeys.RADIO)
+      val separatorInsetsParams =
+        flatParams?.getMap(PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
+
+      val flatRadioLightColorsBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Colors
+          .Builder
+          .light()
+
+      val flatRadioDarkColorsBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Colors
+          .Builder
+          .dark()
+
+      dynamicColorFromParams(
+        context,
+        flatParams,
+        PaymentSheetAppearanceKeys.SEPARATOR_COLOR,
+      )?.let {
+        flatRadioLightColorsBuilder.separatorColor(it)
+        flatRadioDarkColorsBuilder.separatorColor(it)
+      }
+
+      dynamicColorFromParams(
+        context,
+        radioParams,
+        PaymentSheetAppearanceKeys.SELECTED_COLOR,
+      )?.let {
+        flatRadioLightColorsBuilder.selectedColor(it)
+        flatRadioDarkColorsBuilder.selectedColor(it)
+      }
+
+      dynamicColorFromParams(
+        context,
+        radioParams,
+        PaymentSheetAppearanceKeys.UNSELECTED_COLOR,
+      )?.let {
+        flatRadioLightColorsBuilder.unselectedColor(it)
+        flatRadioDarkColorsBuilder.unselectedColor(it)
+      }
+
+      val rowStyleBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio
+          .Builder()
+
+      flatParams.getFloatOrNull(PaymentSheetAppearanceKeys.SEPARATOR_THICKNESS)?.let {
+        rowStyleBuilder.separatorThicknessDp(it)
+      }
+
+      separatorInsetsParams.getFloatOrNull(PaymentSheetAppearanceKeys.LEFT)?.let {
+        rowStyleBuilder.startSeparatorInsetDp(it)
+      }
+
+      separatorInsetsParams.getFloatOrNull(PaymentSheetAppearanceKeys.RIGHT)?.let {
+        rowStyleBuilder.endSeparatorInsetDp(it)
+      }
+
+      flatParams.getBooleanOrNull(PaymentSheetAppearanceKeys.TOP_SEPARATOR_ENABLED)?.let {
+        rowStyleBuilder.topSeparatorEnabled(it)
+      }
+
+      flatParams.getBooleanOrNull(PaymentSheetAppearanceKeys.BOTTOM_SEPARATOR_ENABLED)?.let {
+        rowStyleBuilder.bottomSeparatorEnabled(it)
+      }
+
+      rowParams.getFloatOrNull(PaymentSheetAppearanceKeys.ADDITIONAL_INSETS)?.let {
+        rowStyleBuilder.additionalVerticalInsetsDp(it)
+      }
+
+      rowStyleBuilder.colorsLight(flatRadioLightColorsBuilder.build())
+      rowStyleBuilder.colorsDark(flatRadioDarkColorsBuilder.build())
+
+      embeddedBuilder.rowStyle(rowStyleBuilder.build())
+    }
+
+    "flatWithCheckmark" -> {
+      val flatParams = rowParams.getMap(PaymentSheetAppearanceKeys.FLAT)
+      val checkmarkParams = flatParams?.getMap(PaymentSheetAppearanceKeys.CHECKMARK)
+      val separatorInsetsParams =
+        flatParams?.getMap(PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
+
+      val flatCheckmarkLightColorsBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Colors
+          .Builder
+          .light()
+      val flatCheckmarkDarkColorsBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Colors
+          .Builder
+          .dark()
+
+      dynamicColorFromParams(
+        context,
+        flatParams,
+        PaymentSheetAppearanceKeys.SEPARATOR_COLOR,
+      )?.let {
+        flatCheckmarkLightColorsBuilder.separatorColor(it)
+        flatCheckmarkDarkColorsBuilder.separatorColor(it)
+      }
+
+      dynamicColorFromParams(context, checkmarkParams, PaymentSheetAppearanceKeys.COLOR)?.let {
+        flatCheckmarkLightColorsBuilder.checkmarkColor(it)
+        flatCheckmarkDarkColorsBuilder.checkmarkColor(it)
+      }
+
+      val rowStyleBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark
+          .Builder()
+
+      flatParams.getFloatOrNull(PaymentSheetAppearanceKeys.SEPARATOR_THICKNESS)?.let {
+        rowStyleBuilder.separatorThicknessDp(it)
+      }
+
+      separatorInsetsParams.getFloatOrNull(PaymentSheetAppearanceKeys.LEFT)?.let {
+        rowStyleBuilder.startSeparatorInsetDp(it)
+      }
+
+      separatorInsetsParams.getFloatOrNull(PaymentSheetAppearanceKeys.RIGHT)?.let {
+        rowStyleBuilder.endSeparatorInsetDp(it)
+      }
+
+      flatParams.getBooleanOrNull(PaymentSheetAppearanceKeys.TOP_SEPARATOR_ENABLED)?.let {
+        rowStyleBuilder.topSeparatorEnabled(it)
+      }
+
+      flatParams.getBooleanOrNull(PaymentSheetAppearanceKeys.BOTTOM_SEPARATOR_ENABLED)?.let {
+        rowStyleBuilder.bottomSeparatorEnabled(it)
+      }
+
+      checkmarkParams.getFloatOrNull(PaymentSheetAppearanceKeys.CHECKMARK_INSET)?.let {
+        rowStyleBuilder.checkmarkInsetDp(it)
+      }
+
+      rowParams.getFloatOrNull(PaymentSheetAppearanceKeys.ADDITIONAL_INSETS)?.let {
+        rowStyleBuilder.additionalVerticalInsetsDp(it)
+      }
+
+      // TODO: The theme is so crazy long, why does each Color thing has the same redundant Theme...
+      rowStyleBuilder.colorsLight(flatCheckmarkLightColorsBuilder.build())
+      rowStyleBuilder.colorsDark(flatCheckmarkDarkColorsBuilder.build())
+      embeddedBuilder.rowStyle(rowStyleBuilder.build())
+    }
+
+    "flatWithDisclosure" -> {
+      val flatParams = rowParams.getMap(PaymentSheetAppearanceKeys.FLAT)
+      val disclosureParams = flatParams?.getMap(PaymentSheetAppearanceKeys.DISCLOSURE)
+      val separatorInsetsParams =
+        flatParams?.getMap(PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
+
+      val flatDisclosureLightColorsBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Colors
+          .Builder
+          .light()
+      val flatDisclosureDarkColorsBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Colors
+          .Builder
+          .dark()
 
-  val rowParams =
-    getBundleOrNull(embeddedParams, PaymentSheetAppearanceKeys.ROW)
-      ?: return null
-
-  val defaultColors = buildColors(defaultColorsBundle, PaymentSheet.Colors.defaultLight)
-
-  // Default style
-  val styleString = rowParams.getString(PaymentSheetAppearanceKeys.STYLE, "flatWithRadio")
-
-  val defaultAdditionalInsetsDp = 6.0f
-  val defaultSeparatorThicknessDp = 1.0f
-  val defaultSpacingDp = 12.0f
-  val defaultCheckmarkInsetDp = 0f
-
-  val additionalInsets = getFloatOr(rowParams, PaymentSheetAppearanceKeys.ADDITIONAL_INSETS, defaultAdditionalInsetsDp)
-
-  val rowStyle: PaymentSheet.Appearance.Embedded.RowStyle =
-    when (styleString) {
-      "flatWithRadio" -> {
-        val flatParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLAT)
-        val radioParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.RADIO)
-        val separatorInsetsParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
-
-        // Default separator insets specific to FlatWithRadio
-        val defaultSeparatorStartInsetDp = 30.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)
-
-        // Parse individual colors using default colors
-        val parsedSeparatorColor =
-          dynamicColorFromParams(
-            context,
-            flatParams,
-            PaymentSheetAppearanceKeys.SEPARATOR_COLOR,
-            defaultColors.componentBorder,
-          )
-
-        val parsedSelectedColor =
-          dynamicColorFromParams(
-            context,
-            radioParams,
-            PaymentSheetAppearanceKeys.SELECTED_COLOR,
-            defaultColors.primary,
-          )
-
-        val parsedUnselectedColor =
-          dynamicColorFromParams(
-            context,
-            radioParams,
-            PaymentSheetAppearanceKeys.UNSELECTED_COLOR,
-            defaultColors.componentBorder,
-          )
-
-        val flatRadioColors =
-          PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Colors(
-            separatorColor = parsedSeparatorColor,
-            unselectedColor = parsedUnselectedColor,
-            selectedColor = parsedSelectedColor,
-          )
-
-        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio(
-          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 = flatRadioColors,
-          colorsDark = flatRadioColors,
-        )
+      dynamicColorFromParams(
+        context,
+        flatParams,
+        PaymentSheetAppearanceKeys.SEPARATOR_COLOR,
+      )?.let {
+        flatDisclosureLightColorsBuilder.separatorColor(it)
+        flatDisclosureDarkColorsBuilder.separatorColor(it)
       }
-      "flatWithCheckmark" -> {
-        val flatParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLAT)
-        val checkmarkParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.CHECKMARK)
-        val separatorInsetsParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
-
-        // Default separator insets specific to FlatWithCheckmark and FlatWithDisclosure
-        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)
-        val checkmarkInset = getFloatOr(checkmarkParams, PaymentSheetAppearanceKeys.CHECKMARK_INSET, defaultCheckmarkInsetDp)
-
-        // Parse booleans
-        val topEnabled = getBooleanOr(flatParams, PaymentSheetAppearanceKeys.TOP_SEPARATOR_ENABLED, true)
-        val bottomEnabled = getBooleanOr(flatParams, PaymentSheetAppearanceKeys.BOTTOM_SEPARATOR_ENABLED, true)
-
-        // Parse individual colors using root defaults
-        val parsedSeparatorColor =
-          dynamicColorFromParams(
-            context,
-            flatParams,
-            PaymentSheetAppearanceKeys.SEPARATOR_COLOR,
-            defaultColors.componentBorder,
-          )
-
-        val parsedCheckmarkColor =
-          dynamicColorFromParams(
-            context,
-            checkmarkParams,
-            PaymentSheetAppearanceKeys.COLOR,
-            defaultColors.primary,
-          )
-
-        // Create the required Colors object
-        val flatCheckmarkColors =
-          PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Colors(
-            separatorColor = parsedSeparatorColor,
-            checkmarkColor = parsedCheckmarkColor,
-          )
-
-        PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark(
-          separatorThicknessDp = separatorThickness,
-          startSeparatorInsetDp = startSeparatorInset,
-          endSeparatorInsetDp = endSeparatorInset,
-          topSeparatorEnabled = topEnabled,
-          bottomSeparatorEnabled = bottomEnabled,
-          checkmarkInsetDp = checkmarkInset,
-          additionalVerticalInsetsDp = additionalInsets,
-          horizontalInsetsDp = 0.0F, // We do not have an iOS equal for this API so it's not configurable in React Native
-          colorsLight = flatCheckmarkColors,
-          colorsDark = flatCheckmarkColors,
-        )
+
+      dynamicColorFromParams(context, disclosureParams, PaymentSheetAppearanceKeys.COLOR)?.let {
+        flatDisclosureLightColorsBuilder.disclosureColor(it)
+        flatDisclosureDarkColorsBuilder.disclosureColor(it)
       }
-      "flatWithDisclosure" -> {
-        val flatParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLAT)
-        val disclosureParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.DISCLOSURE)
-        val separatorInsetsParams = getBundleOrNull(flatParams, PaymentSheetAppearanceKeys.SEPARATOR_INSETS)
-
-        // Default separator insets specific to FlatWithCheckmark and FlatWithDisclosure
-        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 parsedDisclosureColor =
-          dynamicColorFromParams(
-            context,
-            disclosureParams,
-            PaymentSheetAppearanceKeys.COLOR,
-            defaultColors.componentBorder, // Default to component border color like other elements
-          )
-
-        // Create the required Colors object
-        val flatDisclosureColors =
-          PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Colors(
-            separatorColor = parsedSeparatorColor,
-            disclosureColor = parsedDisclosureColor,
-          )
 
+      val rowStyleBuilder =
         PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure
           .Builder()
-          .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(flatDisclosureColors)
-          .colorsDark(flatDisclosureColors)
-          .build()
+
+      flatParams.getFloatOrNull(PaymentSheetAppearanceKeys.SEPARATOR_THICKNESS)?.let {
+        rowStyleBuilder.separatorThicknessDp(it)
       }
-      "floatingButton" -> {
-        val floatingParams = getBundleOrNull(rowParams, PaymentSheetAppearanceKeys.FLOATING)
-        PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton(
-          additionalInsetsDp = additionalInsets,
-          spacingDp = getFloatOr(floatingParams, PaymentSheetAppearanceKeys.SPACING, defaultSpacingDp),
-        )
+
+      separatorInsetsParams.getFloatOrNull(PaymentSheetAppearanceKeys.LEFT)?.let {
+        rowStyleBuilder.startSeparatorInsetDp(it)
       }
-      else -> {
-        System.err.println("WARN: Unsupported embedded payment element row style received: $styleString. Falling back to default.")
-        return null
+
+      separatorInsetsParams.getFloatOrNull(PaymentSheetAppearanceKeys.RIGHT)?.let {
+        rowStyleBuilder.endSeparatorInsetDp(it)
       }
+
+      flatParams.getBooleanOrNull(PaymentSheetAppearanceKeys.TOP_SEPARATOR_ENABLED)?.let {
+        rowStyleBuilder.topSeparatorEnabled(it)
+      }
+
+      flatParams.getBooleanOrNull(PaymentSheetAppearanceKeys.BOTTOM_SEPARATOR_ENABLED)?.let {
+        rowStyleBuilder.bottomSeparatorEnabled(it)
+      }
+
+      rowParams.getFloatOrNull(PaymentSheetAppearanceKeys.ADDITIONAL_INSETS)?.let {
+        rowStyleBuilder.additionalVerticalInsetsDp(it)
+      }
+
+      rowStyleBuilder.colorsLight(flatDisclosureLightColorsBuilder.build())
+      rowStyleBuilder.colorsDark(flatDisclosureDarkColorsBuilder.build())
+
+      embeddedBuilder.rowStyle(rowStyleBuilder.build())
+    }
+
+    "floatingButton" -> {
+      val floatingParams = rowParams.getMap(PaymentSheetAppearanceKeys.FLOATING)
+      val rowStyleBuilder =
+        PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton
+          .Builder()
+
+      rowParams.getFloatOrNull(PaymentSheetAppearanceKeys.ADDITIONAL_INSETS)?.let {
+        rowStyleBuilder.additionalInsetsDp(it)
+      }
+
+      floatingParams.getFloatOrNull(PaymentSheetAppearanceKeys.SPACING)?.let {
+        rowStyleBuilder.spacingDp(it)
+      }
+
+      embeddedBuilder.rowStyle(rowStyleBuilder.build())
     }
 
-  return PaymentSheet.Appearance.Embedded(style = rowStyle)
+    else -> {
+      System.err.println("WARN: Unsupported embedded payment element row style received: $styleString. Falling back to default.")
+    }
+  }
+  return embeddedBuilder.build()
 }
 
 @SuppressLint("RestrictedApi")
-private fun buildFormInsets(insetParams: Bundle?): PaymentSheet.Insets {
+private fun buildFormInsets(insetParams: ReadableMap?): PaymentSheet.Insets {
   val defaults = StripeThemeDefaults.formInsets
-  val left = getFloatOr(insetParams, PaymentSheetAppearanceKeys.LEFT, defaults.start)
-  val top = getFloatOr(insetParams, PaymentSheetAppearanceKeys.TOP, defaults.top)
-  val right = getFloatOr(insetParams, PaymentSheetAppearanceKeys.RIGHT, defaults.end)
-  val bottom = getFloatOr(insetParams, PaymentSheetAppearanceKeys.BOTTOM, defaults.bottom)
+  val left = insetParams.getFloatOr(PaymentSheetAppearanceKeys.LEFT, defaults.start)
+  val top = insetParams.getFloatOr(PaymentSheetAppearanceKeys.TOP, defaults.top)
+  val right = insetParams.getFloatOr(PaymentSheetAppearanceKeys.RIGHT, defaults.end)
+  val bottom = insetParams.getFloatOr(PaymentSheetAppearanceKeys.BOTTOM, defaults.bottom)
 
   return PaymentSheet.Insets(
     startDp = left,
@@ -498,21 +501,20 @@ private fun buildFormInsets(insetParams: Bundle?): PaymentSheet.Insets {
  * - 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.
+ * Returns null if no color is provided.
  */
 private fun dynamicColorFromParams(
   context: Context,
-  params: Bundle?,
+  params: ReadableMap?,
   key: String,
-  defaultColor: Int,
-): Int {
+): Int? {
   if (params == null) {
-    return defaultColor
+    return null
   }
 
-  // First check if it's a nested Bundle { "light": "#RRGGBB", "dark": "#RRGGBB" }
-  val colorBundle = params.getBundle(key)
-  if (colorBundle != 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 =
       (
         context.resources.configuration.uiMode
@@ -522,108 +524,31 @@ private fun dynamicColorFromParams(
     // Pick the hex for current mode, or null
     val hex =
       if (isDark) {
-        colorBundle.getString(PaymentSheetAppearanceKeys.DARK)
+        colorMap?.getString(PaymentSheetAppearanceKeys.DARK)
       } else {
-        colorBundle.getString(PaymentSheetAppearanceKeys.LIGHT)
+        colorMap?.getString(PaymentSheetAppearanceKeys.LIGHT)
       }
 
-    return colorFromHexOrDefault(hex, defaultColor)
+    return colorFromHex(hex)
   }
 
   // Check if it's a single color string
-  params.getString(key)?.let { colorString ->
-    return colorFromHexOrDefault(colorString, defaultColor)
-  }
-
-  // no override → just use default
-  return defaultColor
-}
-
-private fun getDoubleOrNull(
-  bundle: Bundle?,
-  key: String,
-): Double? {
-  if (bundle?.containsKey(key) == true) {
-    val valueOfUnknownType = bundle.get(key)
-    if (valueOfUnknownType is Double) {
-      return valueOfUnknownType
-    } else if (valueOfUnknownType is Int) {
-      return valueOfUnknownType.toDouble()
-    } else if (valueOfUnknownType is Float) {
-      return valueOfUnknownType.toDouble()
-    }
-  }
-
-  return null
-}
-
-private fun getFloatOr(
-  bundle: Bundle?,
-  key: String,
-  defaultValue: Float,
-): Float {
-  if (bundle?.containsKey(key) == true) {
-    val valueOfUnknownType = bundle.get(key)
-    if (valueOfUnknownType is Float) {
-      return valueOfUnknownType
-    } else if (valueOfUnknownType is Int) {
-      return valueOfUnknownType.toFloat()
-    } else if (valueOfUnknownType is Double) {
-      return valueOfUnknownType.toFloat()
-    }
-  }
-
-  return defaultValue
-}
-
-private fun getBundleOrNull(
-  bundle: Bundle?,
-  key: String,
-): Bundle? = bundle?.getBundle(key)
-
-private fun getBooleanOr(
-  bundle: Bundle?,
-  key: String,
-  defaultValue: Boolean,
-): Boolean =
-  if (bundle?.containsKey(key) == true) {
-    bundle.getBoolean(key)
-  } else {
-    defaultValue
-  }
-
-private fun getFloatOrNull(
-  bundle: Bundle?,
-  key: String,
-): Float? {
-  if (bundle?.containsKey(key) == true) {
-    val valueOfUnknownType = bundle.get(key)
-    if (valueOfUnknownType is Float) {
-      return valueOfUnknownType
-    } else if (valueOfUnknownType is Int) {
-      return valueOfUnknownType.toFloat()
-    } else if (valueOfUnknownType is Double) {
-      return valueOfUnknownType.toFloat()
-    }
-  }
-
-  return null
+  return colorFromHex(params.getString(key))
 }
 
 @Throws(PaymentSheetAppearanceException::class)
 private fun getFontResId(
-  bundle: Bundle?,
+  map: ReadableMap?,
   key: String,
-  defaultValue: Int?,
   context: Context,
 ): Int? {
   val fontErrorPrefix = "Encountered an error when setting a custom font:"
-  if (bundle?.containsKey(key) != true) {
-    return defaultValue
+  if (map?.hasKey(key) != true) {
+    return null
   }
 
   val fontFileName =
-    bundle.getString(key)
+    map.getString(key)
       ?: throw PaymentSheetAppearanceException(
         "$fontErrorPrefix expected String for font.$key, but received null.",
       )
@@ -633,6 +558,7 @@ private fun getFontResId(
     )
   }
 
+  @SuppressLint("DiscouragedApi")
   val id = context.resources.getIdentifier(fontFileName, "font", context.packageName)
   if (id == 0) {
     throw PaymentSheetAppearanceException("$fontErrorPrefix Failed to find font: $fontFileName")