> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CrossmintCheckoutAppearance

> Flutter Final Class

**Final Class**

UI customization for the hosted checkout page.

```dart theme={null}
final class CrossmintCheckoutAppearance
```

Supports three levels of customization:

* `variables` — CSS custom properties (e.g. `colorPrimary`, `borderRadius`)
* `rules` — CSS rules targeting specific elements (e.g. `.Input`, `.Tab`)
* `fonts` — custom web fonts via `cssSrc`

## Constructors

### CrossmintCheckoutAppearance

```dart theme={null}
const CrossmintCheckoutAppearance({this.variables, this.rules, this.fonts})
```

## Properties

### variables

```dart theme={null}
final Map<String, Object?>? variables
```

CSS custom properties for theming (e.g. `{'colorPrimary': '#0F172A'}`).

### rules

```dart theme={null}
final Map<String, Object?>? rules
```

CSS rules for specific checkout elements (e.g. `{'.Input': {'borderColor': '#CBD5E1'}}`).

### fonts

```dart theme={null}
final List<Map<String, String>>? fonts
```

Custom font definitions (e.g. `[{'cssSrc': 'https://fonts.googleapis.com/...'}]`).

## Methods

### toJson

```dart theme={null}
Map<String, Object?> toJson()
```

Serializes the appearance configuration to a JSON-compatible map.