Overview

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.

Hide Properties

fontFaces · FontFace[]

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

Show 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.

Show Stylesheet

href · string

Url of the stylesheet.

loadingScreen · LoadingScreenStyle

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

Show 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.

Show 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.

Show 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.

Show 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.

Show 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.

Show 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.

Show 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.

Show NetworkErrorStyles

button · object

Show Properties

base · BlockStyle & TextStyle

Show 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.

Show 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 disabled. 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.

Show 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.

Show 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.

Show 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.

Show 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.

Show 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.