Customization of your payment component integration is managed via the NMI Appearance API. The Appearance API provides an NMI theming standard for styling any component in our component library.

Component Studio

Visit the component studio to easily style the appearance of your component.

After you are done customizing the look and feel of your component, selecting the code tab will show you your Appearance object. This object is then passed to your payment component as a prop to apply your theme.

Appearence Configuration

Theme Customization

The Appearance object contains comprehensive theming options including colors, typography, spacing, borders, and effects. You can customize every aspect of your payment component's visual appearance.

Integration

Simply pass your customized appearance object to the NmiPayments component as the appearance prop to apply your theme.

Built-in Themes & Modifiers

Choose from pre-built themes like 'light' and 'dark' for quick setup. You can also use modifier properties to make rapid adjustments to the overall look and feel without needing to customize individual values.

This approach allows you to start with a solid foundation and make targeted tweaks rather than building everything from scratch.

Component Specific Options

The payment component exposes additional properties aside from the appearance object that drive the appearance. These properties are also configurable in the component studio, but are passed to the component separately from 'appearance'.

📘

Tip: You can use the appearance object generated by the component studio with any NMI component.