> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

The interface that defines the styles available for customizing the appearance of the checkout.
Refer to the guide on [Styling Universal Checkout](https://primer.io/docs/checkout/drop-in/customization.md#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](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/InputStyle.md) describing the base style of the input.

**error** `InputStyle`

An object of type [InputStyle](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/InputStyle.md) 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](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/TextStyle.md).

**disabled** `TextStyle`

Defines the style for the button when it's disabled. The value is an object of type [TextStyle](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/TextStyle.md).

**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](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/SubmitButtonStyle.md).

**disabled** `SubmitButtonStyle`

Defines the style for the submit button when it's disabled. The value is an object of type [SubmitButtonStyle](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/BaseInputStyle.md).

**loading** `SubmitButtonStyle`

Defines the style for the submit button when it's loading. The value is an object of type [SubmitButtonStyle](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/SubmitButtonStyle.md).

**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](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/SavedPaymentMethodButtonStyle.md) that defines the style for the saved payment method button.

**selected** `SavedPaymentMethodButtonStyle`

An object of type [SavedPaymentMethodButtonStyle](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/SavedPaymentMethodButtonStyle.md) 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](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/TextStyle.md) 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.