Skip to content

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

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:

TargetSupported states
formdefault, error, success, focused
inputdefault, error, success, focused
sectionHeaderdefault, focused
sectiondefault
submitButtondefault, 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

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]

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",
        },
      },
    },
  },
});

Finix.PaymentForm("payment-form", "sandbox", "APgPDQrLD52TYvqazjHJJchM", {
  styles: {
    // light mode
    default: {
      // input styles (supports default, error, success, focused)
      input: {
        default: {
          color: "#1a1a1a",
          border: "1px solid #d1d5db",
          borderRadius: "6px",
          padding: "10px 12px",
          fontSize: "14px",
        },
      },
    },
  },
});

Finix.PaymentForm("payment-form", "sandbox", "APgPDQrLD52TYvqazjHJJchM", {
  enableDarkMode: true,
  styles: {
    default: {
      input: {
        default: {
          backgroundColor: "#FFFFFF",
          color: "#111827",
          border: "1px solid #D1D5DB",
        },
      },
      submitButton: {
        default: {
          backgroundColor: "#111827",
          color: "#FFFFFF",
        },
      },
    },
    dark: {
      input: {
        default: {
          backgroundColor: "#1F2937",
          color: "#F9FAFB",
          border: "1px solid #374151",
        },
        error: {
          border: "1px solid #FCA5A5",
          color: "#FCA5A5",
        },
      },
      sectionHeader: {
        default: {
          backgroundColor: "#111827",
          color: "#F9FAFB",
        },
      },
      section: {
        default: {
          backgroundColor: "#0F172A",
          color: "#F9FAFB",
        },
      },
    },
  },
});

Finix.PaymentForm("payment-form", "sandbox", "APgPDQrLD52TYvqazjHJJchM", {
  fonts: [
    // Font objects — see your font provider for the URL and format
    { fontFamily: "Inter", url: "https://...", format: "woff2" },
  ],
});