Add icons to the IBAN, credit card and CVC fields.

payments-ui-core/build.gradle

@@ -22,6 +22,7 @@ dependencies {
     implementation project(":stripe-core")
     implementation project(":payments-core")
 
+    implementation 'androidx.constraintlayout:constraintlayout-compose:1.0.0'
     implementation 'androidx.core:core-ktx:1.7.0'
     implementation libraries.androidx.appcompat
     implementation libraries.androidx.lifecycle.livedata.ktx

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/CardNumberController.kt

@@ -30,6 +30,10 @@ internal class CardNumberController constructor(
         CardBrand.getCardBrands(it).firstOrNull() ?: CardBrand.Unknown
     }
 
+    override val trailingIcon: Flow<TextFieldIcon?> = cardBrandFlow.map {
+        TextFieldIcon(it.icon, isIcon = false)
+    }
+
     private val _fieldState = combine(cardBrandFlow, _fieldValue) { brand, fieldValue ->
         cardTextFieldConfig.determineState(brand, fieldValue)
     }

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/CvcController.kt

@@ -63,6 +63,10 @@ internal class CvcController constructor(
             FormFieldEntry(value, complete)
         }
 
+    override val trailingIcon: Flow<TextFieldIcon?> = cardBrandFlow.map {
+        TextFieldIcon(it.cvcIcon, isIcon = false)
+    }
+
     init {
         onValueChange("")
     }

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/DateConfig.kt

@@ -7,6 +7,8 @@ import androidx.compose.ui.text.input.KeyboardType
 import com.stripe.android.ui.core.R
 import com.stripe.android.ui.core.elements.TextFieldStateConstants.Error
 import com.stripe.android.ui.core.elements.TextFieldStateConstants.Valid
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
 import java.util.Calendar
 
 internal class DateConfig : TextFieldConfig {
@@ -17,6 +19,7 @@ internal class DateConfig : TextFieldConfig {
     override val label = R.string.stripe_paymentsheet_expiration_date_hint
     override val keyboard = KeyboardType.NumberPassword
     override val visualTransformation = ExpiryDateVisualTransformation()
+    override val trailingIcon: StateFlow<TextFieldIcon?> = MutableStateFlow(null)
 
     override fun filter(userTyped: String) = userTyped.filter { it.isDigit() }
 

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/EmailConfig.kt

@@ -8,6 +8,7 @@ import androidx.compose.ui.text.input.VisualTransformation
 import com.stripe.android.ui.core.R
 import com.stripe.android.ui.core.elements.TextFieldStateConstants.Error
 import com.stripe.android.ui.core.elements.TextFieldStateConstants.Valid
+import kotlinx.coroutines.flow.MutableStateFlow
 import java.util.regex.Pattern
 
 @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
@@ -19,6 +20,7 @@ class EmailConfig : TextFieldConfig {
     override val label = R.string.email
     override val keyboard = KeyboardType.Email
     override val visualTransformation: VisualTransformation? = null
+    override val trailingIcon: MutableStateFlow<TextFieldIcon?> = MutableStateFlow(null)
 
     /**
      * This will allow all characters, but will show as invalid if it doesn't match

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/IbanConfig.kt

@@ -9,6 +9,7 @@ import androidx.compose.ui.text.input.OffsetMapping
 import androidx.compose.ui.text.input.TransformedText
 import androidx.compose.ui.text.input.VisualTransformation
 import com.stripe.android.ui.core.R
+import kotlinx.coroutines.flow.MutableStateFlow
 import java.math.BigInteger
 import java.util.Locale
 
@@ -27,6 +28,13 @@ class IbanConfig : TextFieldConfig {
     override val label = R.string.iban
     override val keyboard = KeyboardType.Ascii
 
+    override val trailingIcon: MutableStateFlow<TextFieldIcon?> = MutableStateFlow(
+        TextFieldIcon(
+            R.drawable.stripe_ic_bank_generic,
+            isIcon = true
+        )
+    )
+
     // Displays the IBAN in groups of 4 characters with spaces added between them
     override val visualTransformation: VisualTransformation = VisualTransformation { text ->
         val output = StringBuilder()

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/NameConfig.kt

@@ -8,6 +8,7 @@ import androidx.compose.ui.text.input.VisualTransformation
 import com.stripe.android.ui.core.R
 import com.stripe.android.ui.core.elements.TextFieldStateConstants.Error
 import com.stripe.android.ui.core.elements.TextFieldStateConstants.Valid
+import kotlinx.coroutines.flow.MutableStateFlow
 
 @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
 class NameConfig : TextFieldConfig {
@@ -17,6 +18,7 @@ class NameConfig : TextFieldConfig {
     override val debugLabel = "name"
     override val keyboard = KeyboardType.Text
     override val visualTransformation: VisualTransformation? = null
+    override val trailingIcon: MutableStateFlow<TextFieldIcon?> = MutableStateFlow(null)
 
     override fun determineState(input: String): TextFieldState {
         return when {

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/RowElementUI.kt

@@ -2,18 +2,14 @@ package com.stripe.android.ui.core.elements
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.Divider
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
 
 @Composable
 internal fun RowElementUI(
@@ -22,45 +18,53 @@ internal fun RowElementUI(
     hiddenIdentifiers: List<IdentifierSpec>
 ) {
     val fields = controller.fields
-    Row(
-        Modifier
-            .fillMaxWidth(),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
+    val cardStyle = CardStyle(isSystemInDarkTheme())
+
+    // An attempt was made to do this with a row, and a vertical divider created with a box.
+    // The row had a height of IntrinsicSize.Min, and the box/vertical divider filled the height
+    // when adding in the trailing icon this broke and caused the overall height of the row to
+    // increase.  By using the constraint layout the vertical divider does not negatively effect
+    // the size of the row.
+    ConstraintLayout {
+        // Create references for the composables to constrain
+        val fieldRefs = fields.map { createRef() }
+        val dividerRefs = fields.map { createRef() }
+
         fields.forEachIndexed { index, field ->
             SectionFieldElementUI(
                 enabled,
                 field,
-                Modifier.fillMaxWidth(
-                    (1f / fields.size.toFloat()).takeIf { index != (fields.size - 1) } ?: 1f
-                ),
+                Modifier
+                    .constrainAs(fieldRefs[index]) {
+                        if (index == 0) {
+                            start.linkTo(parent.start)
+                        } else {
+                            start.linkTo(dividerRefs[index - 1].end)
+                        }
+                        top.linkTo(parent.top)
+                    }
+                    .fillMaxWidth(
+                        (1f / fields.size.toFloat()).takeIf { index != (fields.size - 1) } ?: 1f
+                    ),
                 hiddenIdentifiers
             )
+
             if (index != (fields.size - 1)) {
-                val cardStyle = CardStyle(isSystemInDarkTheme())
-                VeriticalDivider(
-                    color = cardStyle.cardBorderColor,
-                    thickness = cardStyle.cardBorderWidth,
+                Divider(
                     modifier = Modifier
+                        .constrainAs(dividerRefs[index]) {
+                            start.linkTo(fieldRefs[index].end)
+                            top.linkTo(parent.top)
+                            bottom.linkTo(parent.bottom)
+                            height = (Dimension.fillToConstraints)
+                        }
                         .padding(
                             horizontal = cardStyle.cardBorderWidth
                         )
+                        .width(cardStyle.cardBorderWidth)
+                        .background(cardStyle.cardBorderColor)
                 )
             }
         }
     }
 }
-
-@Composable
-internal fun VeriticalDivider(
-    color: Color,
-    modifier: Modifier = Modifier,
-    thickness: Dp = 1.dp,
-) {
-    Box(
-        modifier = Modifier
-            .fillMaxHeight()
-            .width(thickness)
-            .background(color)
-    )
-}

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/SimpleTextFieldConfig.kt

@@ -5,6 +5,7 @@ import androidx.annotation.StringRes
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.VisualTransformation
+import kotlinx.coroutines.flow.MutableStateFlow
 
 @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
 class SimpleTextFieldConfig(
@@ -14,6 +15,7 @@ class SimpleTextFieldConfig(
 ) : TextFieldConfig {
     override val debugLabel: String = "generic_text"
     override val visualTransformation: VisualTransformation? = null
+    override val trailingIcon: MutableStateFlow<TextFieldIcon?> = MutableStateFlow(null)
 
     override fun determineState(input: String): TextFieldState = object : TextFieldState {
         override fun shouldShowError(hasFocus: Boolean) = false

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/TextFieldConfig.kt

@@ -4,6 +4,7 @@ import androidx.annotation.RestrictTo
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.VisualTransformation
+import kotlinx.coroutines.flow.StateFlow
 
 @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP_PREFIX)
 sealed interface TextFieldConfig {
@@ -22,6 +23,8 @@ sealed interface TextFieldConfig {
     /** Transformation for changing visual output of the input field. */
     val visualTransformation: VisualTransformation?
 
+    val trailingIcon: StateFlow<TextFieldIcon?>
+
     /** This will determine the state of the field based on the text */
     fun determineState(input: String): TextFieldState
 

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/TextFieldController.kt

@@ -1,6 +1,8 @@
 package com.stripe.android.ui.core.elements
 
+import androidx.annotation.DrawableRes
 import androidx.annotation.RestrictTo
+import androidx.annotation.StringRes
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.VisualTransformation
@@ -17,6 +19,7 @@ interface TextFieldController : InputController {
     fun onFocusChange(newHasFocus: Boolean)
 
     val debugLabel: String
+    val trailingIcon: Flow<TextFieldIcon?>
     val capitalization: KeyboardCapitalization
     val keyboardType: KeyboardType
     override val label: Flow<Int>
@@ -27,17 +30,29 @@ interface TextFieldController : InputController {
     val visibleError: Flow<Boolean>
 }
 
+@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP_PREFIX)
+data class TextFieldIcon(
+    @DrawableRes
+    val idRes: Int,
+    @StringRes
+    val contentDescription: Int? = null,
+
+    /** If it is an icon that should be tinted to match the text the value should be true */
+    val isIcon: Boolean
+)
+
 /**
  * This class will provide the onValueChanged and onFocusChanged functionality to the field's
  * composable.  These functions will update the observables as needed.  It is responsible for
  * exposing immutable observers for its data
  */
-@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
+@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP_PREFIX)
 class SimpleTextFieldController constructor(
     private val textFieldConfig: TextFieldConfig,
     override val showOptionalLabel: Boolean = false,
     initialValue: String? = null
 ) : TextFieldController, SectionFieldErrorController {
+    override val trailingIcon: Flow<TextFieldIcon?> = textFieldConfig.trailingIcon
     override val capitalization: KeyboardCapitalization = textFieldConfig.capitalization
     override val keyboardType: KeyboardType = textFieldConfig.keyboard
     override val visualTransformation =

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/TextFieldUI.kt

@@ -1,10 +1,12 @@
 package com.stripe.android.ui.core.elements
 
 import android.util.Log
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.Icon
 import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.LocalContentColor
 import androidx.compose.material.MaterialTheme
@@ -23,6 +25,7 @@ import androidx.compose.ui.focus.FocusManager
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
 import com.stripe.android.ui.core.R
@@ -58,6 +61,7 @@ internal fun TextField(
 
     val focusManager = LocalFocusManager.current
     val value by textFieldController.fieldValue.collectAsState("")
+    val trailingIcon by textFieldController.trailingIcon.collectAsState(null)
     val shouldShowError by textFieldController.visibleError.collectAsState(false)
 
     var hasFocus by rememberSaveable { mutableStateOf(false) }
@@ -137,7 +141,10 @@ internal fun TextField(
         colors = colors,
         maxLines = 1,
         singleLine = true,
-        enabled = enabled
+        enabled = enabled,
+        trailingIcon = trailingIcon?.let {
+            { TrailingIcon(it, colors) }
+        }
     )
 }
 
@@ -148,3 +155,25 @@ internal fun nextFocus(focusManager: FocusManager) {
         }
     }
 }
+
+@Composable
+internal fun TrailingIcon(
+    trailingIcon: TextFieldIcon,
+    colors: androidx.compose.material.TextFieldColors
+) {
+    if (trailingIcon.isIcon) {
+        Icon(
+            painter = painterResource(id = trailingIcon.idRes),
+            contentDescription = trailingIcon.contentDescription?.let {
+                stringResource(trailingIcon.contentDescription)
+            }
+        )
+    } else {
+        Image(
+            painter = painterResource(id = trailingIcon.idRes),
+            contentDescription = trailingIcon.contentDescription?.let {
+                stringResource(trailingIcon.contentDescription)
+            }
+        )
+    }
+}

paymentsheet/src/main/java/com/stripe/android/paymentsheet/forms/FormViewModel.kt

@@ -119,7 +119,7 @@ internal class FormViewModel @Inject internal constructor(
             }
         }
 
-    private val creditBillingElement = elements
+    private val cardBillingElement = elements
         .map { elementsList ->
             elementsList
                 ?.filterIsInstance<SectionElement>()
@@ -134,11 +134,11 @@ internal class FormViewModel @Inject internal constructor(
             saveForFutureUseElement.map {
                 it?.controller?.hiddenIdentifiers ?: flowOf(emptyList())
             }.flattenConcat(),
-            creditBillingElement.map {
+            cardBillingElement.map {
                 it?.hiddenIdentifiers ?: flowOf(emptyList())
             }.flattenConcat()
-        ) { showFutureUse, saveFutureUseIdentifiers, creditBillingIdentifiers ->
-            val hiddenIdentifiers = saveFutureUseIdentifiers.plus(creditBillingIdentifiers)
+        ) { showFutureUse, saveFutureUseIdentifiers, cardBillingIdentifiers ->
+            val hiddenIdentifiers = saveFutureUseIdentifiers.plus(cardBillingIdentifiers)
             // For hidden *section* identifiers, list of identifiers of elements in the section
             val identifiers = sectionToFieldIdentifierMap
                 .filter { idControllerPair ->