Styles & Fonts

Customize the visual appearance of the embedded payment form using the styles and fonts options passed to Finix.PaymentForm().

To adjust the overall theme, see the theme and enableDarkMode options in the Appearance section on the Options API Reference page.

Styles

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:

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.

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.

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]