Customization Matrix

These tables list the fields available to customize the appearance of the Click to Pay Drop-In UI checkout experience, grouped by the UI area they control.

Top-Level Appearance

This table lists the top-level fields that control checkout UI appearance:

Field	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 customization variables container

Base

This table lists the base color fields for the checkout UI:

Field	Type	Description
`backgroundColor`	Hex Color	Main background color
`textColor`	Hex Color	Main text color

This table lists the fields that control the checkout UI header:

Field	Type	Description
`headerBackground`	Hex Color	Header background color
`headerForeground`	Hex Color	Header text/icon color
`headerAvatarBackgroundColor`	Hex Color	Header avatar background
`headerAvatarForegroundColor`	Hex Color	Header avatar foreground

Input Default

This table lists the default state fields for input controls:

Field	Type	Description
`inputBackground`	Hex Color	Input background
`inputColor`	Hex Color	Input text color
`inputPlaceholderColor`	Hex Color	Placeholder text color
`inputBorderColor`	Hex Color	Border color
`inputBorderStyle`	String	Border style
`inputBorderRadius`	CSS Size	Border radius

Input Hover State

This table lists the hover-state fields for input controls:

Field	Type	Description
`inputHoverBackground`	Hex Color	Background when hover
`inputHoverColor`	Hex Color	Text color when hover
`inputHoverPlaceholderColor`	Hex Color	Placeholder color when hover
`inputHoverBorderColor`	Hex Color	Border color when hover
`inputHoverBorderStyle`	String	Border style when hover

Input Focused State

This table lists the focused-state fields for input controls:

Field	Type	Description
`inputFocusedBackground`	Hex Color	Background when focused
`inputFocusedColor`	Hex Color	Text color when focused
`inputFocusedPlaceholderColor`	Hex Color	Placeholder color when focused
`inputFocusedBorderColor`	Hex Color	Border color when focused
`inputFocusedBorderStyle`	String	Border style when focused

Input Active State

This table lists the active-state fields for input controls:

Field	Type	Description
`inputActiveBackground`	Hex Color	Background when active
`inputActiveColor`	Hex Color	Text color when active
`inputActivePlaceholderColor`	Hex Color	Placeholder color when active
`inputActiveBorderColor`	Hex Color	Border color when active
`inputActiveBorderStyle`	String	Border style when active

Input Pressed State

This table lists the pressed-state fields for input controls:

Field	Type	Description
`inputPressedBackground`	Hex Color	Background when pressed
`inputPressedColor`	Hex Color	Text color when pressed
`inputPressedPlaceholderColor`	Hex Color	Placeholder color when pressed
`inputPressedBorderColor`	Hex Color	Border color when pressed
`inputPressedBorderStyle`	String	Border style when pressed

Input Error State

This table lists the error-state fields for input controls:

Field	Type	Description
`inputErrorBackground`	Hex Color	Background when error
`inputErrorColor`	Hex Color	Text color when error
`inputErrorPlaceholderColor`	Hex Color	Placeholder color when error
`inputErrorBorderColor`	Hex Color	Border color when error
`inputErrorBorderStyle`	String	Border style when error

Input Valid State

This table lists the valid-state fields for input controls:

Field	Type	Description
`inputValidBackground`	Hex Color	Background when valid
`inputValidColor`	Hex Color	Text color when valid
`inputValidPlaceholderColor`	Hex Color	Placeholder color when valid
`inputValidBorderColor`	Hex Color	Border color when valid
`inputValidBorderStyle`	String	Border style when valid

Button Default

This table lists the default state fields for the payment button:

Field	Type	Description
`buttonBackground`	Hex Color	Button background
`buttonForeground`	Hex Color	Button text/icon color
`buttonShape`	String	Button shape
`buttonBorderColor`	Hex Color	Border color
`buttonBorderStyle`	String	Border style
`buttonBorderRadius`	CSS Size	Border radius

Button Hover State

This table lists the hover-state fields for the payment button:

Field	Type	Description
`buttonHoverBackground`	Hex Color	Background when hover
`buttonHoverForeground`	Hex Color	Text color when hover
`buttonHoverBorderColor`	Hex Color	Border color when hover
`buttonHoverBorderStyle`	String	Border style when hover

Button Focus State

This table lists the focus-state fields for the payment button:

Field	Type	Description
`buttonFocusBackground`	Hex Color	Background when focus
`buttonFocusForeground`	Hex Color	Text color when focus
`buttonFocusBorderColor`	Hex Color	Border color when focus

Button Active State

This table lists the active-state fields for the payment button:

Field	Type	Description
`buttonActiveBackground`	Hex Color	Background when active
`buttonActiveForeground`	Hex Color	Text color when active
`buttonActiveBorderColor`	Hex Color	Border color when active
`buttonActiveBorderStyle`	String	Border style when active

Button Disabled State

This table lists the disabled-state fields for the payment button:

Field	Type	Description
`buttonDisabledBackground`	Hex Color	Background when disabled
`buttonDisabledForeground`	Hex Color	Text color when disabled
`buttonDisabledBorderColor`	Hex Color	Border color when disabled

Typography and Other

This table lists remaining typography and layout fields:

Field	Type	Description
`fontFamily`	String	Font family
`borderRadius`	CSS Size	Global border radius
`paymentSelectionBackground`	Hex Color	Payment list background

Was this page helpful?

Last published: September 29, 2026