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.

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.