Customize Hosted Fields

You can fully control the appearance of input fields in the Hosted Fields Checkout using the stylesheet.overrides object when initializing your widget. This gives you the flexibility to match the style of your brand and user interface.

Example Integration

Here's how you can inject custom style variables into your widget configuration:

ui: {
  stylesheet: {
    overrides: {
      'usp-input-text-color': '#000000',
      'usp-input-border-color': '#ACACAC',
      'usp-input-height': '2.6rem',
      'usp-input-border-radius': '4px',
      'usp-input-bg-color': '#FFFFFF'
    }
  }
}

Tip

You don't need to specify all variables. Just override the ones you want to change.

Available Input Style Variables

Variable	Description	Type	Example
usp-input-width	Specifies the width of the input field	length	300px
usp-input-bg-color	Background color of the input field	color	#FFFFFF
usp-input-border-color	Border color of the input field	color	#ACACAC
usp-input-border-radius	Border radius of the input field	length	4px
usp-input-border-width	Border width of the input field	length	1px
usp-input-focused-border-color	Border color when the field is focused	color	#7A7A7A
usp-input-height	Height of the input field	length	2.6rem
usp-input-l-width	Width of the large-sized input	length	500px
usp-input-m-width	Width of the medium-sized input	length	290px
usp-input-s-width	Width of the small-sized input	length	110px
usp-input-xs-width	Width of the extra small-sized input	length	90px
usp-input-placeholder-color	Placeholder text color	color	#ACACAC
usp-input-text-color	Text color of user input	color	#000000