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

CardNumberTextField

class CardNumberTextField(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0) : AbstractComposeView

A PCI-compliant XML view component for entering credit/debit card numbers.

This component provides a secure input field for card numbers with automatic formatting and validation. It supports various card number formats (8-19 digits) and automatically detects card types based on BIN (Bank Identification Number).

Features:

PCI-compliant input handling
Automatic card number formatting
BIN detection and card type identification
Real-time validation using Luhn algorithm
Customizable appearance and behavior

Example XML usage:

<com.mercadopago.sdk.android.coremethods.ui.components.textfield.cardnumber.xml.CardNumberTextField
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:maxLength="16"
    app:readOnly="false"
    app:cursorColor="@color/primary" />

Example Kotlin usage:

val cardNumberField = findViewById<CardNumberTextField>(R.id.cardNumberField)

// Configure the field
cardNumberField.maxLength = 16 // For standard credit cards
cardNumberField.textStyle = TextStyle(
    color = Color.Black,
    fontSize = 16.sp
)

// Handle events
cardNumberField.onEvent = { event ->
    when (event) {
        is CardNumberTextFieldEvent.OnBinChanged -> {
            // Handle BIN change and detect card type
            val cardType = detectCardType(event.cardBin)
            updateCardIssuerIcon(cardType)
        }
        is CardNumberTextFieldEvent.IsValid -> {
            if (event.isValid) {
                // Enable next step
            }
        }
    }
}

Parameters

context

The context in which the view is running

attrs

The attributes of the XML tag that is inflating the view

defStyle

The default style to apply to this view

Constructors

CardNumberTextField

constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0)

Properties

cursorBrush

var cursorBrush: Brush

Brush applied to customize the text cursor appearance. Default is unspecified color.

hasComposition

val hasComposition: Boolean

keyboardActions

var keyboardActions: KeyboardActions

Callbacks for keyboard action events. Use this to handle keyboard actions like "Done" or "Next".

keyboardOption

var keyboardOption: KeyboardOptions

Configuration for the software keyboard. Use this to customize keyboard behavior and appearance.

maxLength

var maxLength: Int

Maximum length of the card number input. This value is clamped between 8 and 19 digits to ensure valid card number lengths. The actual length may be adjusted after BIN detection.

onEvent

var onEvent: (CardNumberTextFieldEvent) -> Unit

Callback triggered for field events (BIN changes, validation, input completion). Use this to handle user interactions and update the UI accordingly.

readOnly

var readOnly: Boolean

Controls whether the field is editable or read-only. When true, the field can be focused but not edited.

showLayoutBounds

var showLayoutBounds: Boolean

state

lateinit var state: PCIFieldState

The state holder that manages the card number input value and PCI compliance. This state is automatically initialized when the view is created and persists across configuration changes.

CardNumberTextField

Parameters

Constructors

Properties

Functions