Interface: CheckoutAppearance

Properties

Property	Type	Description
`accent?`	`string`	The whole brand. Hover, pressed, subtle and focus are derived from it in CSS.
`accentContrast?`	`string`	Only when your brand's accent is light: what text on top of it should be.
`border?`	`string`	-
`buttonRadius?`	`string` \| `number`	Buttons only - a pill button with square inputs is a deliberate look.
`controlBorder?`	`string`	Border of editable controls and unchecked radio/checkbox markers.
`controlHeight?`	`string` \| `number`	Height of the buttons and inputs.
`danger?`	`string`	-
`dangerContrast?`	`string`	-
`density?`	`"comfortable"` \| `"compact"`	`compact` tightens the gaps and the controls, for an embedded or WebView checkout.
`focusRing?`	`string`	The focus ring, when the accent is not the right colour against your surfaces.
`font?`	`string`	-
`fontMono?`	`string`	-
`radius?`	`string` \| `number`	The corner radius of the large controls. The smaller radii scale from the same idea.
`success?`	`string`	-
`surface?`	`string`	-
`surfaceRaised?`	`string`	-
`surfaceSunken?`	`string`	-
`text?`	`string`	-
`textMuted?`	`string`	-