core-methods/com.mercadopago.sdk.android.coremethods.ui.components.textfield.cardnumber/CardNumberTextField

CardNumberTextField

@Composable
fun CardNumberTextField(state: PCIFieldState, onEvent: (CardNumberTextFieldEvent) -> Unit, modifier: Modifier = Modifier, @IntRange(from = 8, to = 19) maxLength: Int = DEFAULT_CARD_NUMBER_MAX_LENGTH, enabled: Boolean = true, readOnly: Boolean = false, decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit = @Composable { innerTextField -> innerTextField() }, textStyle: TextStyle = MaterialTheme.typography.bodyLarge, keyboardOptions: KeyboardOptions = KeyboardOptions(), keyboardActions: KeyboardActions = KeyboardActions(), cursorBrush: Brush = SolidColor(MaterialTheme.colorScheme.primary), visualTransformation: VisualTransformation = MaskVisualTransformationDefaults.CardNumber)

A PCI-compliant card number input component that handles user input of credit/debit card numbers. This component provides real-time validation, formatting, and event notifications for card number input. It supports various card number formats and automatically detects card types based on BIN.

The component ensures PCI compliance by handling sensitive card data securely and provides real-time feedback through events for validation, BIN changes, and input state changes.

Parameters

state

The PCIFieldState that manages the card number input value and PCI compliance

onEvent

Callback for handling CardNumberTextFieldEvents triggered during input

modifier

Optional Modifier for customizing the text field's appearance and behavior

maxLength

Maximum length of the card number (8-19 digits). Can be updated after BIN detection

enabled

Whether the text field is enabled for input

readOnly

Whether the text field is read-only (can be focused but not edited)

decorationBox

Composable for customizing the text field's visual appearance

textStyle

Style configuration for the text field's typography

keyboardOptions

Configuration for the software keyboard

keyboardActions

Callbacks for keyboard action events

cursorBrush

Brush for painting the text cursor

visualTransformation

Visual transformation for formatting the card number display

Samples

See also

Samples

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.mercadopago.sdk.android.core.sample.Sampled
import com.mercadopago.sdk.android.coremethods.ui.components.textfield.cardnumber.CardNumberTextField
import com.mercadopago.sdk.android.coremethods.ui.components.textfield.pcitextfield.PCIFieldState
import com.mercadopago.sdk.android.coremethods.ui.components.textfield.pcitextfield.rememberPCIFieldState

fun main() { 
   //sampleStart 
   val state: PCIFieldState = rememberPCIFieldState().apply {
    input = "1234567890123456123"
}
val iconUrl = ""
CardNumberTextField(
    state = state,
    onEvent = { _ ->
        // call viewmodel passing the events to handle the calls
    },
    decorationBox = { innerTextField ->
        // Adding the inner text inside a box with a border
        Box(
            modifier = Modifier.border(
                width = 2.dp,
                color = Color.Blue,
                shape = RoundedCornerShape(10.dp),
            ),
        ) {
            Row {
                if (iconUrl.isNotEmpty()) {
                    // Display the issuer icon when you have an icon
                }

                // Don`t forget to call the innerTextField()
                innerTextField()
            }
        }
    },
) 
   //sampleEnd
}