> ## 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](/checkout/drop-in/customization#styling-universal-checkout) for more details and examples.

<Expandable title="Properties" defaultOpen>
  <ResponseField name="fontFaces" type="FontFace[]">
    An array of `FontFace` objects to specify custom fonts to be used in the checkout.

    <Expandable title="FontFace">
      <ResponseField name="fontFamily" type="string">
        A string that defines the font family of the text.
      </ResponseField>

      <ResponseField name="src" type="string">
        A string that defines the location of the font file.
      </ResponseField>

      <ResponseField name="unicodeRange" type="string">
        A string that defines the Unicode range of the font.
      </ResponseField>

      <ResponseField name="fontVariant" type="string">
        A string that defines the variant of the font.
      </ResponseField>

      <ResponseField name="fontFeatureSettings" type="string">
        A string that defines the feature settings of the font.
      </ResponseField>

      <ResponseField name="fontVariationSettings" type="string">
        A string that defines the variation settings of the font.
      </ResponseField>

      <ResponseField name="fontStretch" type="string">
        A string that defines the stretch of the font.
      </ResponseField>

      <ResponseField name="fontWeight" type="string">
        A string that defines the weight of the font.
      </ResponseField>

      <ResponseField name="fontStyle" type="string">
        A string that defines the style of the font.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="stylesheets" type="Stylesheet[]">
    An array of `Stylesheet` objects to specify custom stylesheets to be used in the checkout.

    <Expandable title="Stylesheet">
      <ResponseField name="href" type="string">
        Url of the stylesheet.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="loadingScreen" type="LoadingScreenStyle">
    An object of type `LoadingScreenStyle` to configure the loading screen that appears during checkout processing.

    <Expandable title="LoadingScreenStyle">
      <ResponseField name="color" type="string">
        Color of the loading screen.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="input" type="InputStyles">
    An object of type `InputStyles` to configure the appearance of input fields in the checkout.

    <Expandable title="InputStyles">
      <ResponseField name="base" type="InputStyle">
        An object of type [InputStyle](/sdk/web/v2.x.x/checkout-style/InputStyle) describing the base style of the input.
      </ResponseField>

      <ResponseField name="error" type="InputStyle">
        An object of type [InputStyle](/sdk/web/v2.x.x/checkout-style/InputStyle) describing the style of the input in an error state.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="inputLabel" type="TextStyle">
    An object of type `TextStyle` to configure the appearance of input field labels in the checkout.

    <Expandable title="TextStyle">
      <ResponseField name="color" type="string">
        An optional string that defines the color of the text.
      </ResponseField>

      <ResponseField name="fontFamily" type="string">
        An optional string that defines the font family of the text.
      </ResponseField>

      <ResponseField name="fontWeight" type="string">
        An optional string that defines the weight of the text.
      </ResponseField>

      <ResponseField name="fontSize" type="string">
        An optional string that defines the size of the text.
      </ResponseField>

      <ResponseField name="fontSmoothing" type="string">
        An optional string that defines the smoothing of the font.
      </ResponseField>

      <ResponseField name="lineHeight" type="string">
        An optional string that defines the height of the line.
      </ResponseField>

      <ResponseField name="textTransform" type="string">
        An optional string that defines the transformation of the text.
      </ResponseField>

      <ResponseField name="letterSpacing" type="string">
        An optional string that defines the spacing between letters in the text.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="inputErrorText" type="TextStyle & TextAlignmentStyle">
    An object of type `TextStyle & TextAlignmentStyle` to configure the appearance of error text that appears below input fields.

    <Expandable title="TextStyle">
      <ResponseField name="color" type="string">
        An optional string that defines the color of the text.
      </ResponseField>

      <ResponseField name="fontFamily" type="string">
        An optional string that defines the font family of the text.
      </ResponseField>

      <ResponseField name="fontWeight" type="string">
        An optional string that defines the weight of the text.
      </ResponseField>

      <ResponseField name="fontSize" type="string">
        An optional string that defines the size of the text.
      </ResponseField>

      <ResponseField name="fontSmoothing" type="string">
        An optional string that defines the smoothing of the font.
      </ResponseField>

      <ResponseField name="lineHeight" type="string">
        An optional string that defines the height of the line.
      </ResponseField>

      <ResponseField name="textTransform" type="string">
        An optional string that defines the transformation of the text.
      </ResponseField>

      <ResponseField name="letterSpacing" type="string">
        An optional string that defines the spacing between letters in the text.
      </ResponseField>
    </Expandable>

    <Expandable title="TextAlignmentStyle">
      <ResponseField name="textAlign" type="string">
        A string that defines the alignment of text.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="formSpacings" type="FormSpacings">
    An object of type `FormSpacings` to configure the spacing between form elements in the checkout.

    <Expandable title="FormSpacings">
      <ResponseField name="betweenLabelAndInput" type="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".
      </ResponseField>

      <ResponseField name="betweenInputs" type="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".
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="showMorePaymentMethodsButton" type="ShowMorePaymentMethodsButtonStyles">
    An object of type `ShowMorePaymentMethodsButtonStyles` to configure the appearance of the "Show More Payment Methods" button in the checkout.

    <Expandable title="ShowMorePaymentMethodsButtonStyles">
      <ResponseField name="base" type="TextStyle">
        Defines the base style for the button. The value is an object of type [TextStyle](/sdk/web/v2.x.x/checkout-style/TextStyle).
      </ResponseField>

      <ResponseField name="disabled" type="TextStyle">
        Defines the style for the button when it's disabled. The value is an object of type [TextStyle](/sdk/web/v2.x.x/checkout-style/TextStyle).
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="networkError" type="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.

    <Expandable title="NetworkErrorStyles">
      <ResponseField name="button" type="object">
        <Expandable title="Properties">
          <ResponseField name="base" type="BlockStyle & TextStyle">
            <Expandable title="Properties">
              <ResponseField name="color" type="string">
                An optional string that defines the color of the text.
              </ResponseField>

              <ResponseField name="fontFamily" type="string">
                An optional string that defines the font family of the text.
              </ResponseField>

              <ResponseField name="fontWeight" type="string">
                An optional string that defines the weight of the text.
              </ResponseField>

              <ResponseField name="fontSize" type="string">
                An optional string that defines the size of the text.
              </ResponseField>

              <ResponseField name="fontSmoothing" type="string">
                An optional string that defines the smoothing of the font.
              </ResponseField>

              <ResponseField name="lineHeight" type="string">
                An optional string that defines the height of the line.
              </ResponseField>

              <ResponseField name="textTransform" type="string">
                An optional string that defines the transformation of the text.
              </ResponseField>

              <ResponseField name="letterSpacing" type="string">
                An optional string that defines the spacing between letters in the text.
              </ResponseField>

              <ResponseField name="background" type="string">
                A string that defines the background color or image of the box element.
              </ResponseField>

              <ResponseField name="borderRadius" type="number | string">
                A number or string that defines the radius of the box element's corners.
              </ResponseField>

              <ResponseField name="boxShadow" type="string">
                A string that defines the shadow effect of the box element.
              </ResponseField>

              <ResponseField name="borderStyle" type="string">
                A string that defines the style of the box element's border.
              </ResponseField>

              <ResponseField name="borderColor" type="number | string">
                A number or string that defines the color of the box element's border.
              </ResponseField>

              <ResponseField name="borderWidth" type="number | string">
                A number or string that defines the width of the box element's border.
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="submitButton" type="SubmitButtonStyles">
    An object of type `SubmitButtonStyles` to configure the appearance of the checkout's submit button.

    <Expandable title="SubmitButtonStyles">
      <ResponseField name="base" type="SubmitButtonStyle">
        Defines the base style for the submit button. The value is an object of type [SubmitButtonStyle](/sdk/web/v2.x.x/checkout-style/SubmitButtonStyle).
      </ResponseField>

      <ResponseField name="disabled" type="SubmitButtonStyle">
        Defines the style for the submit button when it's disabled. The value is an object of type [SubmitButtonStyle](/sdk/web/v2.x.x/checkout-style/BaseInputStyle).
      </ResponseField>

      <ResponseField name="loading" type="SubmitButtonStyle">
        Defines the style for the submit button when it's loading. The value is an object of type [SubmitButtonStyle](/sdk/web/v2.x.x/checkout-style/SubmitButtonStyle).
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="vaultTitle" type="TextStyle">
    An object of type `TextStyle` to configure the appearance of the "Saved Payment Methods" title in the checkout.

    <Expandable title="TextStyle">
      <ResponseField name="color" type="string">
        An optional string that defines the color of the text.
      </ResponseField>

      <ResponseField name="fontFamily" type="string">
        An optional string that defines the font family of the text.
      </ResponseField>

      <ResponseField name="fontWeight" type="string">
        An optional string that defines the weight of the text.
      </ResponseField>

      <ResponseField name="fontSize" type="string">
        An optional string that defines the size of the text.
      </ResponseField>

      <ResponseField name="fontSmoothing" type="string">
        An optional string that defines the smoothing of the font.
      </ResponseField>

      <ResponseField name="lineHeight" type="string">
        An optional string that defines the height of the line.
      </ResponseField>

      <ResponseField name="textTransform" type="string">
        An optional string that defines the transformation of the text.
      </ResponseField>

      <ResponseField name="letterSpacing" type="string">
        An optional string that defines the spacing between letters in the text.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="savedPaymentMethodButton" type="SavedPaymentMethodButtonStyles">
    An object of type `SavedPaymentMethodButtonStyles` to configure the appearance of the buttons that represent saved payment methods in the checkout.

    <Expandable title="SavedPaymentMethodButtonStyles">
      <ResponseField name="base" type="SavedPaymentMethodButtonStyle">
        An object of type [SavedPaymentMethodButtonStyle](/sdk/web/v2.x.x/checkout-style/SavedPaymentMethodButtonStyle) that defines the style for the saved payment method button.
      </ResponseField>

      <ResponseField name="selected" type="SavedPaymentMethodButtonStyle">
        An object of type [SavedPaymentMethodButtonStyle](/sdk/web/v2.x.x/checkout-style/SavedPaymentMethodButtonStyle/) that defines the style for the saved payment method button when it's selected.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="paymentMethodButton" type="PaymentMethodButtonStyle">
    An object of type `PaymentMethodButtonStyle` to configure the appearance of the buttons that represent payment methods in the checkout.

    <Expandable title="PaymentMethodButtonStyle">
      <ResponseField name="height" type="number">
        The height of the payment method button.
      </ResponseField>

      <ResponseField name="minHeight" type="number">
        The minimum height of the payment method button.
      </ResponseField>

      <ResponseField name="maxHeight" type="number">
        The maximum height of the payment method button.
      </ResponseField>

      <ResponseField name="primaryText" type="TextStyle">
        An object of type [TextStyle](/sdk/web/v2.x.x/checkout-style/TextStyle) which describes the styling properties for the primary text in the payment method button.
      </ResponseField>

      <ResponseField name="logoColor" type="&#x22;DARK&#x22; | &#x22;LIGHT&#x22; | &#x22;COLORED&#x22;">
        The color of the payment method logo, which can be "DARK", "LIGHT", or
        "COLORED".
      </ResponseField>

      <ResponseField name="marginTop" type="string">
        The top margin of the payment method button.
      </ResponseField>

      <ResponseField name="background" type="string">
        A string that defines the background color or image of the box element.
      </ResponseField>

      <ResponseField name="borderRadius" type="number | string">
        A number or string that defines the radius of the box element's corners.
      </ResponseField>

      <ResponseField name="boxShadow" type="string">
        A string that defines the shadow effect of the box element.
      </ResponseField>

      <ResponseField name="borderStyle" type="string">
        A string that defines the style of the box element's border.
      </ResponseField>

      <ResponseField name="borderColor" type="number | string">
        A number or string that defines the color of the box element's border.
      </ResponseField>

      <ResponseField name="borderWidth" type="number | string">
        A number or string that defines the width of the box element's border.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="errorMessage" type="ErrorMessageStyle">
    An object of type `ErrorMessageStyle` to configure the appearance of error messages that appear in the checkout.

    <Expandable title="ErrorMessageStyle">
      <ResponseField name="color" type="string">
        The color of the error message.
      </ResponseField>

      <ResponseField name="color" type="string">
        An optional string that defines the color of the text.
      </ResponseField>

      <ResponseField name="fontFamily" type="string">
        An optional string that defines the font family of the text.
      </ResponseField>

      <ResponseField name="fontWeight" type="string">
        An optional string that defines the weight of the text.
      </ResponseField>

      <ResponseField name="fontSize" type="string">
        An optional string that defines the size of the text.
      </ResponseField>

      <ResponseField name="fontSmoothing" type="string">
        An optional string that defines the smoothing of the font.
      </ResponseField>

      <ResponseField name="lineHeight" type="string">
        An optional string that defines the height of the line.
      </ResponseField>

      <ResponseField name="textTransform" type="string">
        An optional string that defines the transformation of the text.
      </ResponseField>

      <ResponseField name="letterSpacing" type="string">
        An optional string that defines the spacing between letters in the text.
      </ResponseField>

      <ResponseField name="background" type="string">
        A string that defines the background color or image of the box element.
      </ResponseField>

      <ResponseField name="borderRadius" type="number | string">
        A number or string that defines the radius of the box element's corners.
      </ResponseField>

      <ResponseField name="boxShadow" type="string">
        A string that defines the shadow effect of the box element.
      </ResponseField>

      <ResponseField name="borderStyle" type="string">
        A string that defines the style of the box element's border.
      </ResponseField>

      <ResponseField name="borderColor" type="number | string">
        A number or string that defines the color of the box element's border.
      </ResponseField>

      <ResponseField name="borderWidth" type="number | string">
        A number or string that defines the width of the box element's border.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="smallPrint" type="TextStyle">
    An object of type `TextStyle` to configure the appearance of the small print that appears at the bottom of the checkout.

    <Expandable title="TextStyle">
      <ResponseField name="color" type="string">
        An optional string that defines the color of the text.
      </ResponseField>

      <ResponseField name="fontFamily" type="string">
        An optional string that defines the font family of the text.
      </ResponseField>

      <ResponseField name="fontWeight" type="string">
        An optional string that defines the weight of the text.
      </ResponseField>

      <ResponseField name="fontSize" type="string">
        An optional string that defines the size of the text.
      </ResponseField>

      <ResponseField name="fontSmoothing" type="string">
        An optional string that defines the smoothing of the font.
      </ResponseField>

      <ResponseField name="lineHeight" type="string">
        An optional string that defines the height of the line.
      </ResponseField>

      <ResponseField name="textTransform" type="string">
        An optional string that defines the transformation of the text.
      </ResponseField>

      <ResponseField name="letterSpacing" type="string">
        An optional string that defines the spacing between letters in the text.
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>