Appearance Customization#

Every SDK element accepts an optional appearance property that controls the look and feel of the rendered UI. You can apply a built-in theme, override individual design tokens, restyle specific components, or adjust behavioural settings — all without touching any internal markup.

Structure#

The appearance object has four top-level keys:

adumoClient.initPayments({
  ref: document.getElementById("payments-element-container"),
  sessionToken: "...",
  appearance: {
    theme: "light",
    variables: { colorPrimary: "#1834cc" },
    styles: {
      ButtonPrimary: { backgroundColor: "#1834cc" },
    },
    settings: {
      inputLabelType: "float-in",
    },
  },
});

When a theme is specified alongside variables, styles, or settings, the explicit values override the corresponding theme defaults.

Themes#

A theme provides sensible defaults for every variable, style, and setting. The SDK includes the following themes:

Apply a theme by setting the theme key:

appearance: {
  theme: "light",
}

You can then override any individual variable, style selector, or setting on top of the theme.

Variables#

Variables are global design tokens injected as CSS custom properties on the element container. They cascade to all child components, making them the most effective way to apply broad visual changes.

Available Variables#

Example#

appearance: {
  theme: "light",
  variables: {
    colorPrimary: "#0066ff",
    fontFamily: "'Inter', sans-serif",
    borderRadius: 12,
  },
}

Styles#

Styles let you target individual UI components with standard CSS properties. Each component is identified by a selector key — a descriptive name that maps to an internal CSS class.

How It Works#

Provide an object keyed by selector name, where each value is an object of CSS properties:

appearance: {
  styles: {
    ButtonPrimary: {
      backgroundColor: "#0066ff",
      borderRadius: "8px",
      fontSize: "14px",
    },
    Input: {
      color: "#333333",
    },
  },
}

CSS property names use camelCase (e.g. backgroundColor, borderRadius). Numeric values for dimensional properties are automatically converted to pixel strings.

Selector Reference#

Below is the full list of available selector keys, grouped by element and component.

AdumoClient#

Selectors that may appear in multiple Elements.

Button

Input

Label

Dropdown

Dialog

Toggle

SVG / Icons

Other

PaymentsElement#

Includes the following AdumoClient selectors: Button, Input, Label, Dropdown, Dialog, Toggle, SVG / Icons.

Transaction Amount Input

Card Number Input

Card Payment Form

Other

PaymentMethodElement#

Payment Method

PaymentMethodsElement#

Payment Method

BillingDetailsElement#

Billing Details

Settings#

Settings control component-level behaviour that is not expressible through CSS. Each element type has its own set of available settings.

PaymentsElement Settings#

adumoClient.initPayments({
  ref: document.getElementById("payments-element-container"),
  sessionToken: "...",
  appearance: {
    theme: "light",
    settings: {
      inputLabelType: "float-over",
    },
  },
});

PaymentMethodsElement Settings#

adumoClient.initPaymentMethods({
  ref: document.getElementById("payment-methods-container"),
  appearance: {
    settings: {
      order: {
        ApplePay: 0,
        GooglePay: 1,
        Card: 2,
        Ozow: 3,
      },
    },
  },
});

PaymentMethodElement Settings#

adumoClient.initPaymentMethod({
  ref: document.getElementById("payment-method-container"),
  type: "Card",
  appearance: {
    settings: {
      hideDetailedInfo: true,
      hideSummary: true,
    },
  },
});

BillingDetailsElement Settings#

No settings available for this element.

Full Example#

The following example applies the light theme with custom brand colours, adjusted input labels, and payment method ordering:

adumoClient.initPayments({
  ref: document.getElementById("payments-element-container"),
  sessionToken: "...",
  appearance: {
    theme: "light",
    variables: {
      colorPrimary: "#0066ff",
      colorFocused: "#0044cc",
      fontFamily: "'Inter', sans-serif",
      borderRadius: 8,
    },
    styles: {
      ButtonPrimary: {
        backgroundColor: "#0066ff",
        color: "#ffffff",
      },
      InputContainerFocusedWithin: {
        borderColor: "#0066ff",
      },
    },
    settings: {
      inputLabelType: "float-over",
    },
  },
});

adumoClient.initPaymentMethods({
  ref: document.getElementById("payment-methods-container"),
  appearance: {
    theme: "light",
    variables: {
      colorPrimary: "#0066ff",
    },
    styles: {
      PaymentMethodContainer: {
        backgroundColor: "#f8f9fa",
        borderRadius: "12px",
      },
    },
    settings: {
      order: { Card: 0, ApplePay: 1, GooglePay: 2, Ozow: 3 },
    },
  },
});

Interactive Playground#

Try out all of the above options in real time using the Storybook Playground .