core-methods/com.mercadopago.sdk.android.coremethods.ui.components.textfield.securitycode/SecurityCodeTextField

SecurityCodeTextField

@Composable
fun SecurityCodeTextField(modifier: Modifier = Modifier, state: PCIFieldState, onEvent: (SecurityCodeTextFieldEvent) -> Unit, securityCodeSize: Int = MIN_LENGTH, enabled: Boolean = true, readOnly: Boolean = false, decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit = @Composable { innerTextField -> innerTextField() }, textStyle: TextStyle = MaterialTheme.typography.bodyLarge, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, cursorBrush: Brush = SolidColor(MaterialTheme.colorScheme.primary), visualTransformation: VisualTransformation = VisualTransformation.None)

A PCI-compliant security code input component for entering card CVV/CVC codes.

This component provides a secure input field for card security codes, with automatic formatting and validation. It supports both 3-digit (CVV) and 4-digit (CVC) security codes, with real-time feedback through events for validation and input state changes.

The component integrates with PCIFieldState for secure input management and provides events through SecurityCodeTextFieldEvent for handling focus changes, input completion, and length changes.

Features:

  • PCI-compliant input handling

  • Automatic digit validation

  • Configurable security code length

  • Real-time input state feedback

  • Customizable appearance and behavior

Example usage:

val state = rememberPCIFieldState()

SecurityCodeTextField(
    state = state,
    onEvent = { event ->
        when (event) {
            is SecurityCodeTextFieldEvent.OnInputFilled -> {
                // Handle input completion
            }
            is SecurityCodeTextFieldEvent.OnLengthChanged -> {
                // Update progress indicator
            }
            is SecurityCodeTextFieldEvent.OnFocusChanged -> {
                // Show/hide security code hint
            }
        }
    },
    securityCodeSize = 3, // For 3-digit CVV
    textStyle = MaterialTheme.typography.bodyLarge,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)
Content copied to clipboard

Parameters

modifier

Modifier to customize the style and behavior of the field

state

A PCIFieldState object that manages the secure input data

onEvent

Callback triggered for field events (focus changes, input completion, length changes)

securityCodeSize

Maximum number of digits allowed (typically 3 or 4)

enabled

Controls whether the field is interactive

readOnly

Controls whether the field is editable

decorationBox

Composable for adding decorative elements around the text field

textStyle

Text style applied to the input content

keyboardOptions

Configuration for the software keyboard

cursorBrush

Brush applied to customize the cursor appearance

visualTransformation

Visual transformations applied to the input text

See also