Styling your Components

Customise the appearance and style of Components to match the design of your site.

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.

ObjectDescription
baseThis 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.
focusThis object defines the styles for when the component is in a focused state, when a user clicks or interacts with it.
invalidThis object defines the styles for when the content of the component is considered invalid or incorrect.
placeholderThis 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.