Apex Embedded Components - Enterprise Payment Solutions

Customize the appearance of embedded components with presets, tokens, and runtime updates.

Theme Presets

The SDK includes 7 built-in presets. Pass a preset in the theme config object:

VisaAcceptance.init({
  theme: { preset: 'anet' },
});

Preset	Description
`anet`	Visa ANET branding (default)
`shadcn`	Neutral/minimal — shadcn/ui defaults
`corporate`	Conservative enterprise palette
`perplexity`	Clean, modern with teal accents
`amethyst`	Purple/violet tones
`bubblegum`	Pink/magenta playful palette
`shopify`	Shopify-inspired green commerce palette

Dark Mode

Set the mode property to control light/dark:

VisaAcceptance.init({
  theme: {
    preset: 'anet',
    mode: 'dark', // 'light' | 'dark' | 'system'
  },
});

'system' follows the user's OS preference via prefers-color-scheme.

Custom Colors

Override semantic color tokens using OKLCH values. Colors are merged on top of the preset — only override what you need.

VisaAcceptance.init({
  theme: {
    preset: 'anet',
    colors: {
      primary: 'oklch(0.55 0.2 250)',
      primaryForeground: 'oklch(0.99 0 0)',
      background: 'oklch(0.99 0 0)',
      foreground: 'oklch(0.15 0 0)',
      muted: 'oklch(0.95 0.01 250)',
      mutedForeground: 'oklch(0.45 0.01 250)',
      border: 'oklch(0.9 0.01 250)',
      card: 'oklch(0.99 0 0)',
      cardForeground: 'oklch(0.15 0 0)',
    },
  },
});

All 30+ semantic color tokens are available — including sidebar*, chart1–chart5, accent, destructive, popover, input, and ring. See the ColorTokens type in the Configuration reference for the full list.

Typography

Override font family, weight, and size tokens:

VisaAcceptance.init({
  theme: {
    typography: {
      fontFamily: {
        sans: '"Inter", system-ui, sans-serif',
        mono: '"JetBrains Mono", monospace',
      },
      fontWeight: {
        normal: 400,
        medium: 500,
        semibold: 600,
        bold: 700,
      },
      fontSize: {
        sm: '0.875rem',
        base: '1rem',
        lg: '1.125rem',
      },
    },
  },
});

Shape (Border Radius)

Control corner rounding at multiple scales:

VisaAcceptance.init({
  theme: {
    shape: {
      radius: '0.5rem',     // Base radius (cards, inputs)
      radiusSm: '0.25rem',  // Small elements (chips, tags, badges)
      radiusLg: '0.75rem',  // Large surfaces (modals, dialogs)
      radiusFull: '9999px', // Pills, avatars
    },
  },
});

Spacing

Override the base spacing unit that scales all internal layout utilities:

VisaAcceptance.init({
  theme: {
    spacing: {
      unit: '0.25rem', // Default. Polaris-style: '0.2222rem'
    },
  },
});

Shadows

Define elevation levels for surfaces:

VisaAcceptance.init({
  theme: {
    shadow: {
      sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
      md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1)',
    },
  },
});

CSS Variables (Escape Hatch)

For advanced overrides not covered by the token system, inject arbitrary CSS custom properties:

VisaAcceptance.init({
  theme: {
    variables: {
      '--custom-header-height': '64px',
      '--custom-sidebar-width': '280px',
    },
  },
});

CSS variables are injected directly into the iframe's :root. Use sparingly — prefer semantic tokens for colors and spacing.

Runtime Updates

Update the theme after initialization without a page reload:

Updates all mounted components simultaneously:

VisaAcceptance.updateConfig({
  theme: { preset: 'corporate', mode: 'dark' },
});

Update a single component's appearance:

instance.updateTheme({ mode: 'light', colors: { primary: 'oklch(0.6 0.2 150)' } });

Iframe Styles

For layout-level overrides on the iframe element itself (not the component content), use iframeStyles in the render config:

VisaAcceptance.render('transactions', '#container', {
  iframeStyles: {
    borderRadius: '12px',
    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
    minHeight: '600px',
  },
});

Theming