Styling

The components ship with their own stylesheet, payplug-elements.css. It is loaded automatically at startup by payplug-elements.js. It carries two things:

• the structural CSS: layout, isolation, component skeletons
• the default theme: every visual value, expressed as --payplug-* design tokens (light and dark).

There are two customization surfaces, in order of preference: override tokens (colors, fonts, spacing, radii…) then override structural styles (an escape hatch for anything the tokens don’t reach).

Overriding design tokens

Re-declare them on payplug-session, from your stylesheet, in light or in dark.

/* anywhere in your CSS */
payplug-session {
  --payplug-color-accent: #c026d3;
  --payplug-radius: 0;
}

If you prefer, you can also ship your overrides in a standalone theme file and declare it on the payplug-session element.

<payplug-session theme="https://example.shop/checkout-theme.css">…</payplug-session>

Dark mode

Dark tokens apply automatically from the system preference, but you can also force a scheme with the color-scheme attribute:

<payplug-session color-scheme="light">…</payplug-session>
<!-- or -->
<payplug-session color-scheme="dark">…</payplug-session>

To give a token a dark-specific value, scope your own re-declaration the same way the default theme does:

@media (prefers-color-scheme: dark) {
  payplug-session:not([color-scheme="light"]) {
    --payplug-color-accent: #8ab4ff;
  }
}
payplug-session[color-scheme="dark"] {
  --payplug-color-accent: #8ab4ff;
}

Token reference

Every knob below can be tried live in the playground’s theme panel.

Token	Default (light)	Default (dark)
--payplug-color-scheme	light dark	dark
--payplug-font-family	system-ui, -apple-system, "Segoe UI", Roboto, sans-serif	—
--payplug-font-size-sm / -md / -lg	0.85rem / 0.95rem / 1.1rem	—
--payplug-gap	0.5rem	—
--payplug-line-height	1.3	—
--payplug-radius	6px	—
--payplug-color-text	#1a1a2e	#ececf2
--payplug-color-placeholder	#6f6f80	#8f8fa0
--payplug-color-surface	#ffffff	#232334
--payplug-color-border	#c9c9d4	#44454f
--payplug-color-accent	#0555eb	#5b8cff
--payplug-color-on-accent	#ffffff	#0b0b14
--payplug-color-danger	#ff2600	#ff6b6b
--payplug-color-danger-surface	10% danger mixed into the surface (color-mix)	—
--payplug-color-success	#188038	#5dc389
--payplug-color-failure	#727272	—
--payplug-color-surface-muted	10% accent mixed into the surface (color-mix)	—
--payplug-selected-shadow	inset 0 0 0 1px var(--payplug-color-accent)	—
--payplug-reassurance-border	1px dashed var(--payplug-color-border)	—
--payplug-progress-fill	45° hatch	—
--payplug-pill-radius	999px	—
--payplug-pill-background	var(--payplug-color-surface-muted)	—
--payplug-dialog-backdrop	rgb(0 0 0 / 0.45) — the modal scrim, scheme-independent	—

Overriding structural styles

Every inner element carries a stable, documented class following payplug-<element>__<part> (e.g. payplug-outcome__recap or payplug-amount-picker__chip). These classes are part of the public surface, you can target them directly.

Two things to know about writing structural CSS

You must prefix your overrides with the element’s name for them to win:

/* override how a transaction shows on the confirmation screen */
payplug-confirmation .payplug-tx {
  border-left: none;
  border-radius: 8px;
}

Some chrome is deliberately left to you. For instance, the payplug-confirmation element imposes no background, borders or radius, so that you adapt them to your page’s style:

payplug-confirmation .payplug-outcome {
  border: 1px solid var(--payplug-color-border);
  border-radius: var(--payplug-radius);
  padding: calc(var(--payplug-gap) * 2);
}