{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-js/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["code-walkthrough","step"]},"type":"markdown"},"seo":{"title":"Styles & Fonts | Finix.js Reference","description":"API reference for Finix.js styles and fonts — customize the visual appearance of the embedded payment form.","siteUrl":"https://docs.finix.com/","llmstxt":{"hide":false,"sections":[{"title":"Getting Started","includeFiles":["guides/getting-started/**/*.md"],"excludeFiles":[]},{"title":"Online Payments","includeFiles":["guides/online-payments/**/*.md"],"excludeFiles":["guides/online-payments/payment-features/fsa-hsa-non-healthcare-mcc.md"]},{"title":"In-Person Payments","includeFiles":["guides/in-person-payments/**/*.md"],"excludeFiles":[]},{"title":"Subscriptions","includeFiles":["guides/subscriptions/**/*.md"],"excludeFiles":[]},{"title":"After the Payment","includeFiles":["guides/subscriptions/after-the-payment/**/*.md"],"excludeFiles":[]},{"title":"Managing Operations","includeFiles":["guides/managing-operations/**/*.md"],"excludeFiles":[]},{"title":"Platform Payments","includeFiles":["guides/platform-payments/**/*.md"],"excludeFiles":[]},{"title":"Payouts","includeFiles":["guides/payouts/**/*.md"],"excludeFiles":[]},{"title":"Developers","includeFiles":["additional-resources/developers/**/*.md"],"excludeFiles":[]},{"title":"Plugins","includeFiles":["additional-resources/plugins/**/*.md"],"excludeFiles":[]},{"title":"Industry Considerations","includeFiles":["guides/industry-considerations/**/*.md"],"excludeFiles":[]},{"title":"Regional Considerations","includeFiles":["guides/regional-considerations/**/*.md"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeWalkthrough","attributes":{"__idx":1,"filters":{},"filesets":[{"files":[{"path":"js/_filesets/styles-and-fonts.js","content":[{"start":0,"condition":{"steps":["styles-structure"]},"children":["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\",","        },","      },","    },","  },","});"]},"",{"start":108,"condition":{"steps":["input-styles"]},"children":["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\",","        },","      },","    },","  },","});"]},"",{"start":128,"condition":{"steps":["dark-mode-styles"]},"children":["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\",","        },","      },","    },","  },","});"]},"",{"start":176,"condition":{"steps":["fonts-usage"]},"children":["Finix.PaymentForm(\"payment-form\", \"sandbox\", \"APgPDQrLD52TYvqazjHJJchM\", {","  fonts: [","    // Font objects — see your font provider for the URL and format","    { fontFamily: \"Inter\", url: \"https://...\", format: \"woff2\" },","  ],","});"]},""],"metadata":{"steps":["styles-structure","input-styles","dark-mode-styles","fonts-usage"]},"basename":"styles-and-fonts.js","language":"javascript"}],"downloadAssociatedFiles":[]}],"steps":[{"id":"styles-structure","heading":"Style structure"},{"id":"input-styles","heading":"Input styles"},{"id":"dark-mode-styles","heading":"Dark mode"},{"id":"fonts-usage","heading":"fonts"}],"inputs":{},"toggles":{}},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"styles--fonts","__idx":0},"children":["Styles & Fonts"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize the visual appearance of the embedded payment form using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fonts"]}," options passed to ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/js/payment-form"},"children":["Finix.PaymentForm()"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To adjust the overall theme, see the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enableDarkMode"]}," options in the Appearance section on the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/js/options"},"children":["Options API Reference"]}," page."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styles","__idx":1},"children":["Styles"]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"styles-structure","heading":"Style structure"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]}," option to match the payment form to your brand. Styles are organized by ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["theme"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dark"]},"), then by ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["element"]},", then by ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["state"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"styles: {\n  default: { /* base (light) theme */ },\n  dark:    { /* optional dark mode overrides */ }\n}\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}," — your baseline styles, applied in all conditions."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dark"]}," — overrides applied on top of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}," when dark mode is active."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You only need to include the properties you want to customize."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Available targets and states:"]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Target"},"children":["Target"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Supported states"},"children":["Supported states"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["form"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["success"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focused"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["input"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["success"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focused"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sectionHeader"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focused"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["section"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitButton"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Style values are plain CSS-in-JS objects. For example, to change the input error color in light mode:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"styles.default.input.error.color = \"red\"\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Or to change the submit button background in dark mode:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"styles.dark.submitButton.default.backgroundColor = \"green\"\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["How theming and state styling works:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The form starts with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.default"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If dark mode is active, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.dark"]}," is layered on top."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["State styles (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focused"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]},") layer on top of the element's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}," style."]}]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"input-styles","heading":"Input styles"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.default.input"]}," to style the payment input fields. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["input"]}," target supports ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["success"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focused"]}," states."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Prioritize these states for the best buyer experience:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["input.error"]}," — highlight invalid fields."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["input.focused"]}," — highlight the active field."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitButton.disabled"]}," — style the button when submission is unavailable."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sectionHeader.focused"]}," — highlight the selected payment method."]}]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"dark-mode-styles","heading":"Dark mode"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enableDarkMode: true"]}," to enable dark mode. When active, the user's system preference (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["prefers-color-scheme: dark"]},") determines which theme is applied."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Define your complete brand look in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.default"]},", then add only the differences in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.dark"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"fonts","__idx":2},"children":["Fonts"]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"fonts-usage","heading":"fonts"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Load custom fonts inside the form iframe using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fonts"]}," option. Pass an array of font objects to register fonts that can then be applied via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["array[object]"]}]}]}]}]},"headings":[{"value":"Styles & Fonts","id":"styles--fonts","depth":1},{"value":"Styles","id":"styles","depth":2},{"value":"Fonts","id":"fonts","depth":2}],"frontmatter":{"seo":{"title":"Styles & Fonts | Finix.js Reference","description":"API reference for Finix.js styles and fonts — customize the visual appearance of the embedded payment form."},"markdown":{"toc":{"hide":true}},"footer":{"hide":true}},"lastModified":"2026-04-14T20:26:18.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/js/styles-and-fonts","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}