Customize

Style the card fields and update their configuration at runtime without re-rendering.

Apply styles

Pass a VaultStyles object in SecureFieldsConfig.styles. Styles are applied to all fields at render time.

SecureFieldsConfig(
    brands = listOf(Brand.VISA, Brand.MASTERCARD),
    fields = ...,
    styles = VaultStyles(
        fontSize         = "16sp",
        color            = "#1A1A1A",
        placeholderColor = "#9E9E9E",
        backgroundColor  = "#FFFFFF",
        focus = VaultStyles(
            color = "#000000",
        ),
        invalid = VaultStyles(
            color = "#D32F2F",
        ),
    )
)

Available style properties

Property	Description	Example
fontFamily	Font family name	"sans-serif"
fontSize	Text size — use sp to respect system font size	"16sp"
lineHeight	Line height	"24sp"
fontWeight	Font weight	"400", "bold"
color	Input text color (hex)	"#1A1A1A"
placeholderColor	Placeholder text color (hex)	"#9E9E9E"
backgroundColor	Field background color (hex)	"#FFFFFF"

Pseudo-class overrides

Nest a VaultStyles instance in focus, empty, valid, invalid, or placeholder to apply styles conditionally — like CSS pseudo-classes:

VaultStyles(
    color       = "#1A1A1A",
    focus       = VaultStyles(color = "#000000"),
    empty       = VaultStyles(placeholderColor = "#BDBDBD"),
    valid       = VaultStyles(color = "#1B5E20"),
    invalid     = VaultStyles(color = "#D32F2F"),
    placeholder = VaultStyles(color = "#BDBDBD"),
)

Pseudo-class	When it applies
focus	Field is focused
empty	Field has no input
valid	Field passes validation
invalid	Field fails validation
placeholder	Placeholder text is shown

Configure fields

Set placeholder and contentDescription per field in VaultFieldConfig:

SecureFieldsFieldsConfig(
    cardNumber = VaultFieldConfig(
        placeholder        = "1234 5678 9012 3456",
        contentDescription = "Card number",
    ),
    expDate = VaultFieldConfig(placeholder = "MM / YY"),
    cvv     = VaultFieldConfig(placeholder = "CVV"),
)

Available fields

Field	Required	Description
cvv	Yes	Card verification value
cardNumber	No	Primary account number
expDate	No	Expiration date
holderName	No	Cardholder name

cvv is the only required field. Omit the others to render a CVV-only form — for example, when the customer has a stored card and only needs to re-enter the security code.

Supported brands

Pass the brands you accept in SecureFieldsConfig.brands. The SDK uses this list to validate card numbers and filter BIN lookup results.

SecureFieldsConfig(
    brands = listOf(Brand.VISA, Brand.MASTERCARD, Brand.AMEX, Brand.CB),
    ...
)

Available values: VISA, MASTERCARD, AMEX, CB, DISCOVER, DINERS, JCB, MAESTRO, UNIONPAY, ONEY.

If a card matches more than one of these (e.g. CB/VISA), set SecureFieldsConfig.brandSelector = true to let the cardholder choose — see Co-branded card picker.

Update configuration after render

Call setFieldConfig() to update a field's placeholder, content description, or styles without destroying and re-creating the SDK instance:

secureFields.setFieldConfig(
    field  = VaultFieldName.CardNumber,
    config = VaultFieldConfigUpdate(
        placeholder = "Enter your card number",
        styles      = VaultStyles(color = "#000000"),
    )
)

VaultFieldName values: CardNumber, HolderName, ExpDate, Cvv.

note

setFieldConfig() updates the visual configuration only. It does not clear or reset the field value.