Appearance and Strings

Before You Start

Read the following guides before proceeding:

Guide	Why
Android SDK	Surfaces, isolation model and flows

Overview

Every surface takes an appearance object and a strings object. The SDK ships no copy — your app supplies
every word the views draw. One WirexAppearance styles Reveal, Collect and 3-D Secure; the wallet checkout
takes CSS variables.

Card Surfaces

val appearance = WirexAppearance(
    mode = WirexThemeMode.DARK,
    colorTextOverride = Color.WHITE,
    colorFocusOverride = Color.parseColor("#5753EA"),
    fontSizeBaseDp = 17f,
    borderRadiusDp = 12f,
)

fun apply(row: WirexRevealFieldView, form: WirexCollectForm) {
    row.setAppearance(appearance); row.setStrings(revealStrings)
    form.apply(appearance); form.apply(collectStrings)
}

WirexAppearance is a data class with every parameter defaulted. Colours are ARGB ints; sizes are dp.

Group	Parameters
Mode	`mode`: `LIGHT`, `DARK`
Colours	`colorTextOverride`, `colorLabelOverride`, `colorPlaceholderOverride`, `colorErrorOverride`, `colorFocusOverride`, `colorBackgroundOverride`, `colorBorderOverride`, `surfaceColorOverride`
Typography	`typeface`, `fontSizeBaseDp`, `fontSizeLabelDp`, `lineHeightBaseDp`, `lineHeightLabelDp`, `fontWeightBaseBold`, `fontWeightLabelBold`
Geometry	`borderRadiusDp`, `borderWidthDp`, `spacingUnitDp`, `paddingHorizontalDp`, `paddingVerticalDp`, `spacingLabelDp`, `spacingErrorDp`, `iconSizeDp`, `controlMinHeightDp`

WirexAppearanceTokens.appearance(tokens, mode) builds a WirexAppearance from a token map that uses the
Web SDK token names, so one token document can style both.

Icons are optional Drawables:

Type	Constructor
Reveal	`WirexRevealIcons(copy, copied)`
Collect	`WirexCollectIcons(visa, mastercard)`
3-D Secure	`WirexThreeDSIcons(close)`

Strings

val revealStrings = WirexRevealStrings(
    fieldLabels = mapOf(WirexRevealField.PAN to "Card number", WirexRevealField.CVV to "CVV"),
    maskedSegmentGlyph = "*", copy = "Copy", copied = "Copied",
)

val collectStrings = WirexCollectStrings(
    fieldLabels = mapOf(WirexCollectField.NUMBER to "Card number"),
    error = { field, reason ->
        when (reason) {
            WirexCollectFieldError.INCOMPLETE -> "${field.defaultLabel} is incomplete"
            WirexCollectFieldError.INVALID -> "Check the ${field.defaultLabel.lowercase()}"
            WirexCollectFieldError.EXPIRED -> "This card has expired"
        }
    },
)

Type	Contents
`WirexRevealStrings`	`fieldLabels`, `maskedPlaceholder` (plain fields), `maskedSegmentGlyph` (every PIN cell while masked, default `"*"`), `copy`, `copied`
`WirexCollectStrings`	Labels, placeholders, an `error` lambda per field and a `brandName` lambda. `fromJson` accepts the Web SDK's JSON shape
`WirexThreeDSStrings`	`WirexThreeDSStrings(title, close, loading)`

Google Pay Checkout

val walletAppearance = WirexWalletAppearance(theme = WirexWalletAppearance.Theme.DARK, variables = mapOf("--wx-accent" to "#5753EA"))
val walletButtons = WirexWalletButtons(googlePay = WirexWalletButtons.GooglePay(
    color = SpecWalletGooglePayButtonColor.BLACK, type = SpecWalletGooglePayButtonType.PAY))
val walletBranding = WirexWalletBranding(logo = WirexWalletLogo.Hidden, processingDisclosurePartnerName = "Acme")

Type	Description
`WirexWalletAppearance(theme, variables)`	CSS variables passed to the checkout
`WirexWalletBranding(logo, processingDisclosurePartnerName, privacyUrl)`	Logo, processing disclosure, privacy URL
`WirexWalletButtons(googlePay)`	Google Pay button `color`: `BLACK`, `WHITE`; `type`: `PLAIN`, `PAY`, `BUY`
`strings`	`Map<SpecWalletStringKey, String>` overriding the 11 labels of the checkout

Sizing

Surface	Height source
Reveal row	`WRAP_CONTENT` or `WirexRevealFieldView.naturalHeightPx(widthPx)`
Collect form	`WRAP_CONTENT` or `WirexCollectForm.naturalHeightPx(widthPx)`
Google Pay checkout	`NaturalHeight` event

Apply the measured height instead of hardcoding it. A box shorter than the content clips the value.