Appearance and Strings

Before You Start

Read the following guides before proceeding:

Guide	Why
Flutter 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. The card surfaces share one set of token names; the wallet checkout takes CSS
variables.

Card Surfaces

import 'package:wirex_mobile_sdk/wirex_mobile_sdk.dart';

const WirexThemeMode themeMode = WirexThemeMode.dark;

const WirexRevealAppearance revealAppearance = WirexRevealAppearance(
  colorText: '#FFFFFF', colorLabel: '#9AA0B5', colorFocus: '#5753EA', colorBackground: '#1B1E2B',
  fontFamily: 'Inter', fontSizeBase: 16, fontWeightBase: '500', borderRadius: 8, controlMinHeight: 44,
);

const Map<String, Object?> collectAppearance = <String, Object?>{
  'colorText': '#FFFFFF', 'colorFocus': '#5753EA', 'borderRadius': 8, 'fontSizeBase': 16,
};

Surface	Appearance type
Reveal	Typed `WirexRevealAppearance`
Collect, 3-D Secure	`Map<String, Object?>` with the same token names

themeMode is a parameter on every card view: WirexThemeMode.light or dark. Colours are '#RRGGBB'
strings; sizes are logical pixels.

Group	Tokens
Colours	`colorText`, `colorLabel`, `colorPlaceholder`, `colorError`, `colorFocus`, `colorBackground`, `colorBorder`, `surfaceColor`
Typography	`fontFamily`, `fontSizeBase`, `fontSizeLabel`, `lineHeightBase`, `lineHeightLabel`, `fontWeightBase`, `fontWeightLabel`
Geometry	`borderRadius`, `borderWidth`, `spacingUnit`, `paddingHorizontal`, `paddingVertical`, `spacingLabel`, `spacingError`, `iconSize`, `controlMinHeight`

Icons are PNG bytes wrapped in WirexArtwork:

Type	Constructor
`WirexRevealIcons`	`WirexRevealIcons(copy:, copied:)`
`WirexCollectIcons`	`WirexCollectIcons.brands(visa:, mastercard:)`
`WirexThreeDSIcons`	`WirexThreeDSIcons(close:)`

Strings

const WirexRevealStrings revealStrings = WirexRevealStrings(
  fieldLabels: <WirexRevealField, String>{WirexRevealField.pan: 'Card number', WirexRevealField.cvv: 'CVV'},
  maskedSegmentGlyph: '*', copy: 'Copy', copied: 'Copied',
);

const WirexCollectStrings collectStrings = WirexCollectStrings(
  labels: <WirexCollectField, String>{WirexCollectField.number: 'Card number', WirexCollectField.expiry: 'Expiry'},
  errors: <WirexCollectField?, Map<WirexCollectFieldError, String?>>{
    null: <WirexCollectFieldError, String?>{
      WirexCollectFieldError.incomplete: 'Required',
      WirexCollectFieldError.invalid: 'Check this field',
    },
    WirexCollectField.expiry: <WirexCollectFieldError, String?>{WirexCollectFieldError.expired: 'Card expired'},
  },
);

Type	Keys
`WirexRevealStrings`	`fieldLabels`, `maskedPlaceholder` (plain fields), `maskedSegmentGlyph` (every PIN cell while masked, default `'*'`), `copy`, `copied`
`WirexCollectStrings`	`labels`, `placeholders`, `errors` — per field, with the `null` key as the default for every field
`WirexThreeDSStrings`	`title`, `close`, `loading`

Wallet Checkout

const WirexWalletAppearance walletAppearance =
    WirexWalletAppearance(theme: WirexWalletTheme.dark, variables: <String, String>{'--wx-accent': '#5753EA'});
const WirexWalletButtons walletButtons = WirexWalletButtons(
  applePay: WirexWalletApplePayButton(style: SpecWalletApplePayButtonStyle.black, type: SpecWalletApplePayButtonType.topUp),
  googlePay: WirexWalletGooglePayButton(color: SpecWalletGooglePayButtonColor.black, type: SpecWalletGooglePayButtonType.pay),
);
const WirexWalletBranding walletBranding =
    WirexWalletBranding(logo: WirexWalletLogo.hidden(), processingDisclosurePartnerName: 'Acme');

Parameter	Description
`appearance`	`theme` and CSS `variables` passed to the checkout
`buttons`	Apple Pay `style` / `type`, Google Pay `color` / `type`
`branding`	Logo — `WirexWalletLogo.wirex()`, `hidden()` or `custom(dataUri)`; processing disclosure; privacy URL
`strings`	`Map<SpecWalletStringKey, String>` overriding the 11 labels of the checkout

Sizing

Surface	Height source
Reveal row	Sizes itself from its content
Collect form	Sizes itself from its content
Wallet checkout	`WirexWalletCheckoutNaturalHeight` event or `controller.naturalHeight`

Apply the reported heights instead of hardcoding them. A PIN row fills the row at controlMinHeight in a host
box of exactly that height.