Styling the Inputs

You can apply custom styles to the inputs using ChargeHive.setStyle(...)

This method takes a nested object which specifies the styles that should be applied.

{
  FRAME_NAME: STYLE_DEF,
  "all": STYLE_DEF,
  "fontCss": FONT_URLS,
}

FRAME_NAME - string

Name of a specific frame included on the page (will match the data-chargehive attribute)

STYLE_DEF - object

{
  "default": STYLE_PROPS,
  "empty": STYLE_PROPS,
  "invalid": STYLE_PROPS,
  "complete": STYLE_PROPS,
}

STYLE_PROPS - object

{
  "color": STRING,
  "fontFamily": STRING,
  "fontSize": STRING,
  "fontStyle": STRING,
  "fontWeight": STRING,
  "fontSmoothing": STRING,
  "lineHeight": STRING,
  "letterSpacing": STRING,
  "textAlign": STRING,
  "padding": STRING,
  "textDecoration": STRING,
  "textShadow": STRING,
  "textTransform": STRING,
  "opacity": STRING,

  ":hover": STYLE_PROPS,
  ":focus": STYLE_PROPS,
  ":disabled": STYLE_PROPS,
  "::placeholder": STYLE_PROPS,
  "::selection": STYLE_PROPS,
}

FONT_URLS - string[]

An array of font urls hosted on the following urls:

• https://fonts.googleapis.com