Styling your Components

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


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.



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


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.

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.

VariableCSS PropertyDescription
backgroundColorbackground-colorThe colour applied to the background of each component.
paddingpaddingThis determines the positioning of the text within the component.
fontFamilyfont-familyThe CSS font family utilised across Components. Please note that Components does not currently offer compatibility with Google fonts.
fontSizefont-sizeThis property sets the size of the font.
fontWeightfont-weightThis attribute defines the weight (or boldness) of the font. The available weights depend on the previously chosen fontFamily.
borderborderSets the border properties.
borderColorborder-colorThis property sets the colour of a component’s border.
borderRadiusborder-radiusThis allows you to determine the roundness of the border.
colorcolorThe default text colour used within the component.