# Styling

You can customize the visuals of Shift4 components on your webpage. In order to do that 3 new attributes can be set in options. The options are applicable either to a single component or a component group. They are merged but only for top level attributes, ie.: `finalOptions = {...componentGroupOptions, ...componentOptions}`.

New attributes added to the options are:

- `height` - can be used to change height of component's iframe
- `style` - can be used to change styles; has two nested attributes:
  - `base` - used to defined base styles;
  - `invalid` - used to define styles when input has invalid value (for example invalid card number).
- `fonts` - can be used to add additional fonts (maps to *@font-face* from CSS), must be a list of objects with following attributes:
  - `family` - maps to *font-family* from CSS;
  - `style` - maps to *font-style* from CSS;
  - `weight` - maps to *font-weight* from CSS;
  - `display` - maps to *font-display* from CSS;
  - `src` - maps to *src* from CSS;
  - `unicodeRange` - maps to *unicode-range* from CSS.


For defining styles following attributes can be used:

- `color` - maps to *color* from CSS;
- `backgroundColor` - maps to *background-color* from CSS;
- `fontFamily` - maps to *font-family* from CSS;
- `fontSize` - maps to *font-size* from CSS;
- `fontWeight` - maps to *font-weight* from CSS.


Additionally following pseudo classes are also supported:

- `:hover`
- `:focus`
- `::placeholder`


## Example

```javascript
let shift4 = Shift4("pu_test_WVMFC9GFuvm54b0uorifKkCh");

let options = {
  height: '38px',
  style: {
    base: {
      color: '#44d',
      fontSize: '30px',
      fontFamily: 'Orbitron',
      '::placeholder': {
        color: '#99f'
      },
    },
    invalid: {
      color: '#f00',
      '::placeholder': {
        color: '#f99'
      },
    }
  },
  fonts: [{
    family: 'Orbitron',
    style: 'normal',
    weight: 400,
    display: 'swap',
    src: "url(https://fonts.gstatic.com/s/orbitron/v25/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');"
  }]
};

let components = shift4.createComponentGroup(options);
let number = components.createComponent("number").mount("#number");
let expiry = components.createComponent("expiry").mount("#expiry");
let cvc = components.createComponent("cvc").mount("#cvc");
```

The `createComponent()` method accepts an optional second argument with options for that single component - `createComponent("expiry", { height: '48px' })`. The placeholder to render into is never passed to `createComponent()`; it is always given to `mount()`.