# Styles & Fonts

Customize the visual appearance of the embedded payment form using the `styles` and `fonts` options passed to [Finix.PaymentForm()](https://docs.finix.com/js/payment-form).

To adjust the overall theme, see the `theme` and `enableDarkMode` options in the Appearance section on the [Options API Reference](https://docs.finix.com/js/options) page.

## Styles

Style structure

Use the `styles` option to match the payment form to your brand. Styles are organized by **theme** (`default` or `dark`), then by **element**, then by **state**.

```
styles: {
  default: { /* base (light) theme */ },
  dark:    { /* optional dark mode overrides */ }
}
```

- `default` — your baseline styles, applied in all conditions.
- `dark` — overrides applied on top of `default` when dark mode is active.
- You only need to include the properties you want to customize.

**Available targets and states:**

| Target | Supported states |
| --- | --- |
| `form` | `default`, `error`, `success`, `focused` |
| `input` | `default`, `error`, `success`, `focused` |
| `sectionHeader` | `default`, `focused` |
| `section` | `default` |
| `submitButton` | `default`, `disabled` |

Style values are plain CSS-in-JS objects. For example, to change the input error color in light mode:

```
styles.default.input.error.color = "red"
```

Or to change the submit button background in dark mode:

```
styles.dark.submitButton.default.backgroundColor = "green"
```

**How theming and state styling works:**

- The form starts with `styles.default`.
- If dark mode is active, `styles.dark` is layered on top.
- State styles (`focused`, `error`, `disabled`) layer on top of the element's `default` style.

Input styles

Use `styles.default.input` to style the payment input fields. The `input` target supports `default`, `error`, `success`, and `focused` states.

Prioritize these states for the best buyer experience:

- `input.error` — highlight invalid fields.
- `input.focused` — highlight the active field.
- `submitButton.disabled` — style the button when submission is unavailable.
- `sectionHeader.focused` — highlight the selected payment method.

Dark mode

Set `enableDarkMode: true` to enable dark mode. When active, the user's system preference (`prefers-color-scheme: dark`) determines which theme is applied.

Define your complete brand look in `styles.default`, then add only the differences in `styles.dark`.

## Fonts

Load custom fonts inside the form iframe using the `fonts` option. Pass an array of font objects to register fonts that can then be applied via `styles`.

**Type:**`array[object]`

```javascript
Finix.PaymentForm("payment-form", "sandbox", "APgPDQrLD52TYvqazjHJJchM", {
  styles: {
    // styles applied to all inputs, regardless of theme
    default: {
      form: {
        default: {
          fontFamily: "Effra, sans-serif",
        },
      },
      input: {
        default: {
          border: "1px solid gray",
          borderRadius: "12px",
          padding: "12px",
          fontFamily: "Effra, sans-serif",
        },
        error: {
          border: "1px solid red",
          color: "red",
        },
        success: {
          border: "1px solid green",
          color: "green",
        },
        focused: {
          border: "1px solid orange",
          color: "orange",
        },
      },
      sectionHeader: {
        default: {
          backgroundColor: "pink",
          borderColor: "brown",
        },
        focused: {
          backgroundColor: "#E0B0FF",
          borderColor: "brown",
        },
      },
      section: {
        default: {
          padding: "8px",
          backgroundColor: "yellow",
          borderColor: "brown",
        },
      },
      submitButton: {
        default: {
          fontFamily: "Effra, sans-serif",
          backgroundColor: "green",
          color: "white",
          fontSize: "20px",
        },
        disabled: {
          backgroundColor: "gray",
          color: "white",
        },
      },
    },
    // styles applied when dark mode is active, either by system preference or user selection
    dark: {
      form: {
        default: {
          borderColor: "gray",
        },
      },
      input: {
        default: {
          backgroundColor: "gray",
        },
        error: {
          borderColor: "magenta",
          color: "magenta",
        },
        success: {
          border: "1px solid greenyellow",
          color: "greenyellow",
        },
        focused: {
          border: "1px solid yellow",
          color: "yellow",
        },
      },
      sectionHeader: {
        default: {
          backgroundColor: "black",
          borderColor: "white",
          color: "white",
        },
        focused: {
          backgroundColor: "#444",
          borderColor: "white",
          color: "white",
        },
      },
      section: {
        default: {
          backgroundColor: "#222",
          borderColor: "white",
          color: "white",
        },
      },
    },
  },
});
```

Different examples of `Finix.PaymentForm` configurations for styles and fonts are provided, showcasing various states like `default`, `error`, `success`, `focused`, etc.