Styling your Components

Overviews

Components supports visual customisation, enabling you to personalise your payment forms to align with your business branding. The style option allows you to adjust colours, fonts, borders and other elements of components.

📘
Note
Styling is configured in the same way for both the form and fields solutions.

Example:

const components  = acquired.components(options);

const style = {
  base: {
    color: 'black',
    backgroundColor: '#fff',
    padding: '12px 16px',
    fontFamily: 'Tahoma',
    fontSize: '15px',
    fontWeight: '400',
    border: '1px solid #ccc',
    borderColor: 'gray',
    borderRadius: '6px'
  },
  focus: {
    color: 'green',
    borderColor: 'green'
  },
  invalid: {
    color: 'orange',
    borderColor: 'orange'
  },
  placeholder: {
    color: 'gray'
  }
};

Styling variables

Styling is broken down into 4 different objects, base, focus, invalid and placeholder, allowing you to define the styling for specific scenarios.

Object	Description
`base`	This object defines the base styling for the component. These styles are applied by default and provide the appearance of the element when no specific state is active.
`focus`	This object defines the styles for when the component is in a focused state, when a user clicks or interacts with it.
`invalid`	This object defines the styles for when the content of the component is considered invalid or incorrect.
`placeholder`	This object defines the styles for the placeholder text within the component.

The styling option utilises CSS variables, by specifying them within the syntax. For detailed guidance on input possibilities for each option, follow the link in the CSS property field. It is important to note that the Acquired variables are written in CamelCase due to the compatibility with Javascript.

Variable	CSS Property	Description
`backgroundColor`	background-color	The colour applied to the background of each component.
`padding`	padding	This determines the positioning of the text within the component.
`fontFamily`	font-family	The CSS font family utilised across Components. Please note that Components does not currently offer compatibility with Google fonts.
`fontSize`	font-size	This property sets the size of the font.
`fontWeight`	font-weight	This attribute defines the weight (or boldness) of the font. The available weights depend on the previously chosen fontFamily.
`border`	border	Sets the border properties.
`borderColor`	border-color	This property sets the colour of a component’s border.
`borderRadius`	border-radius	This allows you to determine the roundness of the border.
`color`	color	The default text colour used within the component.