On This Page
Customization Matrix
Top-Level Appearance
Field Name | Data Type | Description |
|---|---|---|
appearance | Object | Control checkout UI appearance |
theme | Enum (String) | Theme selection (LIGHT, DARK, seasonal) |
buttonType | Enum (String) | Button label/type |
variables | Object | UI customisation variables container |
Base
Field Name | Data Type | Description |
|---|---|---|
backgroundColor | Hex Colour | Main background colour |
textColor | Hex Colour | Main text colour |
Header
Field Name | Data Type | Description |
|---|---|---|
headerBackground | Hex Colour | Header background colour |
headerForeground | Hex Colour | Header text/icon colour |
headerAvatarBackgroundColor | Hex Colour | Header avatar background |
headerAvatarForegroundColor | Hex Colour | Header avatar foreground |
Input Default
Field Name | Data Type | Description |
|---|---|---|
inputBackground | Hex Colour | Input background |
inputColor | Hex Colour | Input text colour |
inputPlaceholderColor | Hex Colour | Placeholder text colour |
inputBorderColor | Hex Colour | Border colour |
inputBorderStyle | String | Border style |
inputBorderRadius | CSS Size | Border radius |
Input Hover State
Field Name | Data Type | Description |
|---|---|---|
inputHoverBackground | Hex Colour | Background when hover |
inputHoverColor | Hex Colour | Text colour when hover |
inputHoverPlaceholderColor | Hex Colour | Placeholder colour when hover |
inputHoverBorderColor | Hex Colour | Border colour when hover |
inputHoverBorderStyle | String | Border style when hover |
Input Focused State
Field Name | Data Type | Description |
|---|---|---|
inputFocusedBackground | Hex Colour | Background when focused |
inputFocusedColor | Hex Colour | Text colour when focused |
inputFocusedPlaceholderColor | Hex Colour | Placeholder colour when focused |
inputFocusedBorderColor | Hex Colour | Border colour when focused |
inputFocusedBorderStyle | String | Border style when focused |
Input Active State
Field Name | Data Type | Description |
|---|---|---|
inputActiveBackground | Hex Colour | Background when active |
inputActiveColor | Hex Colour | Text colour when active |
inputActivePlaceholderColor | Hex Colour | Placeholder colour when active |
inputActiveBorderColor | Hex Colour | Border colour when active |
inputActiveBorderStyle | String | Border style when active |
Input Pressed State
Field Name | Data Type | Description |
|---|---|---|
inputPressedBackground | Hex Colour | Background when pressed |
inputPressedColor | Hex Colour | Text colour when pressed |
inputPressedPlaceholderColor | Hex Colour | Placeholder colour when pressed |
inputPressedBorderColor | Hex Colour | Border colour when pressed |
inputPressedBorderStyle | String | Border style when pressed |
Input Error State
Field Name | Data Type | Description |
|---|---|---|
inputErrorBackground | Hex Colour | Background when error |
inputErrorColor | Hex Colour | Text colour when error |
inputErrorPlaceholderColor | Hex Colour | Placeholder colour when error |
inputErrorBorderColor | Hex Colour | Border colour when error |
inputErrorBorderStyle | String | Border style when error |
Input Valid State
Field Name | Data Type | Description |
|---|---|---|
inputValidBackground | Hex Colour | Background when valid |
inputValidColor | Hex Colour | Text colour when valid |
inputValidPlaceholderColor | Hex Colour | Placeholder colour when valid |
inputValidBorderColor | Hex Colour | Border colour when valid |
inputValidBorderStyle | String | Border style when valid |
Button Default
Field Name | Data Type | Description |
|---|---|---|
buttonBackground | Hex Colour | Button background |
buttonForeground | Hex Colour | Button text/icon colour |
buttonShape | String | Button shape |
buttonBorderColor | Hex Colour | Border colour |
buttonBorderStyle | String | Border style |
buttonBorderRadius | CSS Size | Border radius |
Button Hover State
Field Name | Data Type | Description |
|---|---|---|
buttonHoverBackground | Hex Colour | Background when hover |
buttonHoverForeground | Hex Colour | Text colour when hover |
buttonHoverBorderColor | Hex Colour | Border colour when hover |
buttonHoverBorderStyle | String | Border style when hover |
Button Focus State
Field Name | Data Type | Description |
|---|---|---|
buttonFocusBackground | Hex Colour | Background when focus |
buttonFocusForeground | Hex Colour | Text colour when focus |
buttonFocusBorderColor | Hex Colour | Border colour when focus |
Button Active State
Field Name | Data Type | Description |
|---|---|---|
buttonActiveBackground | Hex Colour | Background when active |
buttonActiveForeground | Hex Colour | Text colour when active |
buttonActiveBorderColor | Hex Colour | Border colour when active |
buttonActiveBorderStyle | String | Border style when active |
Button Disabled State
Field Name | Data Type | Description |
|---|---|---|
buttonDisabledBackground | Hex Colour | Background when disabled |
buttonDisabledForeground | Hex Colour | Text colour when disabled |
buttonDisabledBorderColor | Hex Colour | Border colour when disabled |
Typography & Other
Field Name | Data Type | Description |
|---|---|---|
fontFamily | String | Font family |
borderRadius | CSS Size | Global border radius |
paymentSelectionBackground | Hex Colour | Payment list background |