API GuideDashboard
Home
Payments
Automation
Observability
Reconciliation
Payment Methods
Fraud Providers
SDK Reference
Changelog

The interface that defines the styles available for customizing the appearance of the checkout. Refer to the guide on Styling Universal Checkout for more details and examples.

Properties
fontFaces
FontFace[]

An array of FontFace objects to specify custom fonts to be used in the checkout.

FontFace
fontFamily
string
A string that defines the font family of the text.
src
string
A string that defines the location of the font file.
unicodeRange
string
A string that defines the Unicode range of the font.
fontVariant
string
A string that defines the variant of the font.
fontFeatureSettings
string
A string that defines the feature settings of the font.
fontVariationSettings
string
A string that defines the variation settings of the font.
fontStretch
string
A string that defines the stretch of the font.
fontWeight
string
A string that defines the weight of the font.
fontStyle
string
A string that defines the style of the font.
stylesheets
Stylesheet[]

An array of Stylesheet objects to specify custom stylesheets to be used in the checkout.

Stylesheet
href
string
Url of the stylesheet.
loadingScreen
LoadingScreenStyle

An object of type LoadingScreenStyle to configure the loading screen that appears during checkout processing.

LoadingScreenStyle
color
string
Color of the loading screen.
input
InputStyles

An object of type InputStyles to configure the appearance of input fields in the checkout.

InputStyles
base
InputStyle

An object of type InputStyle describing the base style of the input.

error
InputStyle

An object of type InputStyle describing the style of the input in an error state.

inputLabel
TextStyle

An object of type TextStyle to configure the appearance of input field labels in the checkout.

TextStyle
color
string
An optional string that defines the color of the text.
fontFamily
string
An optional string that defines the font family of the text.
fontWeight
string
An optional string that defines the weight of the text.
fontSize
string
An optional string that defines the size of the text.
fontSmoothing
string
An optional string that defines the smoothing of the font.
lineHeight
string
An optional string that defines the height of the line.
textTransform
string
An optional string that defines the transformation of the text.
letterSpacing
string
An optional string that defines the spacing between letters in the text.
inputErrorText
TextStyle & TextAlignmentStyle

An object of type TextStyle & TextAlignmentStyle to configure the appearance of error text that appears below input fields.

TextStyle
color
string
An optional string that defines the color of the text.
fontFamily
string
An optional string that defines the font family of the text.
fontWeight
string
An optional string that defines the weight of the text.
fontSize
string
An optional string that defines the size of the text.
fontSmoothing
string
An optional string that defines the smoothing of the font.
lineHeight
string
An optional string that defines the height of the line.
textTransform
string
An optional string that defines the transformation of the text.
letterSpacing
string
An optional string that defines the spacing between letters in the text.
TextAlignmentStyle
textAlign
string
A string that defines the alignment of text.
formSpacings
FormSpacings

An object of type FormSpacings to configure the spacing between form elements in the checkout.

FormSpacings
betweenLabelAndInput
string
Specifies the amount of space between a form label and its corresponding input element. The value is a string representing a CSS length, such as "10px" or "1em".
betweenInputs
string
Specifies the amount of space between different input elements within a form. The value is a string representing a CSS length, such as "10px" or "1em".
showMorePaymentMethodsButton
ShowMorePaymentMethodsButtonStyles

An object of type ShowMorePaymentMethodsButtonStyles to configure the appearance of the "Show More Payment Methods" button in the checkout.

ShowMorePaymentMethodsButtonStyles
base
TextStyle

Defines the base style for the button. The value is an object of type TextStyle.

disabled
TextStyle

Defines the style for the button when it's disabled. The value is an object of type TextStyle.

networkError
NetworkErrorStyles

An object of type NetworkErrorStyles to configure the appearance of the network error message that appears when the checkout cannot connect to the server.

NetworkErrorStyles
button
object
Properties
base
BlockStyle & TextStyle
Properties
color
string
An optional string that defines the color of the text.
fontFamily
string
An optional string that defines the font family of the text.
fontWeight
string
An optional string that defines the weight of the text.
fontSize
string
An optional string that defines the size of the text.
fontSmoothing
string
An optional string that defines the smoothing of the font.
lineHeight
string
An optional string that defines the height of the line.
textTransform
string
An optional string that defines the transformation of the text.
letterSpacing
string
An optional string that defines the spacing between letters in the text.
background
string
A string that defines the background color or image of the box element.
borderRadius
number | string
A number or string that defines the radius of the box element's corners.
boxShadow
string
A string that defines the shadow effect of the box element.
borderStyle
string
A string that defines the style of the box element's border.
borderColor
number | string
A number or string that defines the color of the box element's border.
borderWidth
number | string
A number or string that defines the width of the box element's border.
submitButton
SubmitButtonStyles

An object of type SubmitButtonStyles to configure the appearance of the checkout's submit button.

SubmitButtonStyles
base
SubmitButtonStyle

Defines the base style for the submit button. The value is an object of type SubmitButtonStyle.

disabled
SubmitButtonStyle

Defines the style for the submit button when it's loading. The value is an object of type SubmitButtonStyle.

loading
SubmitButtonStyle

Defines the style for the submit button when it's loading. The value is an object of type SubmitButtonStyle.

vaultTitle
TextStyle

An object of type TextStyle to configure the appearance of the "Saved Payment Methods" title in the checkout.

TextStyle
color
string
An optional string that defines the color of the text.
fontFamily
string
An optional string that defines the font family of the text.
fontWeight
string
An optional string that defines the weight of the text.
fontSize
string
An optional string that defines the size of the text.
fontSmoothing
string
An optional string that defines the smoothing of the font.
lineHeight
string
An optional string that defines the height of the line.
textTransform
string
An optional string that defines the transformation of the text.
letterSpacing
string
An optional string that defines the spacing between letters in the text.
savedPaymentMethodButton
SavedPaymentMethodButtonStyles

An object of type SavedPaymentMethodButtonStyles to configure the appearance of the buttons that represent saved payment methods in the checkout.

SavedPaymentMethodButtonStyles
base
SavedPaymentMethodButtonStyle

An object of type SavedPaymentMethodButtonStyle that defines the style for the saved payment method button.

selected
SavedPaymentMethodButtonStyle

An object of type SavedPaymentMethodButtonStyle that defines the style for the saved payment method button when it's selected'.

paymentMethodButton
PaymentMethodButtonStyle

An object of type PaymentMethodButtonStyle to configure the appearance of the buttons that represent payment methods in the checkout.

PaymentMethodButtonStyle
height
number
The height of the payment method button.
minHeight
number
The minimum height of the payment method button.
maxHeight
number
The maximum height of the payment method button.
primaryText
TextStyle

An object of type Textstyle which describes the styling properties for the primary text in the payment method button.

logoColor
"DARK" | "LIGHT" | "COLORED"
The color of the payment method logo, which can be "DARK", "LIGHT", or "COLORED".
marginTop
string
The top margin of the payment method button.
background
string
A string that defines the background color or image of the box element.
borderRadius
number | string
A number or string that defines the radius of the box element's corners.
boxShadow
string
A string that defines the shadow effect of the box element.
borderStyle
string
A string that defines the style of the box element's border.
borderColor
number | string
A number or string that defines the color of the box element's border.
borderWidth
number | string
A number or string that defines the width of the box element's border.
errorMessage
ErrorMessageStyle

An object of type ErrorMessageStyle to configure the appearance of error messages that appear in the checkout.

ErrorMessageStyle
color
string
The color of the error message.
color
string
An optional string that defines the color of the text.
fontFamily
string
An optional string that defines the font family of the text.
fontWeight
string
An optional string that defines the weight of the text.
fontSize
string
An optional string that defines the size of the text.
fontSmoothing
string
An optional string that defines the smoothing of the font.
lineHeight
string
An optional string that defines the height of the line.
textTransform
string
An optional string that defines the transformation of the text.
letterSpacing
string
An optional string that defines the spacing between letters in the text.
background
string
A string that defines the background color or image of the box element.
borderRadius
number | string
A number or string that defines the radius of the box element's corners.
boxShadow
string
A string that defines the shadow effect of the box element.
borderStyle
string
A string that defines the style of the box element's border.
borderColor
number | string
A number or string that defines the color of the box element's border.
borderWidth
number | string
A number or string that defines the width of the box element's border.
smallPrint
TextStyle

An object of type TextStyle to configure the appearance of the small print that appears at the bottom of the checkout.

TextStyle
color
string
An optional string that defines the color of the text.
fontFamily
string
An optional string that defines the font family of the text.
fontWeight
string
An optional string that defines the weight of the text.
fontSize
string
An optional string that defines the size of the text.
fontSmoothing
string
An optional string that defines the smoothing of the font.
lineHeight
string
An optional string that defines the height of the line.
textTransform
string
An optional string that defines the transformation of the text.
letterSpacing
string
An optional string that defines the spacing between letters in the text.