Theming

Three layers of control, from simplest to most specific:

1. Attributes

<govifi-payment theme="dark" accent="#D97757" font="system"></govifi-payment>

• theme — light, dark, or auto (follows prefers-color-scheme)
• accent — buttons, focus rings, and selection states; tints are derived automatically
• font — inter (default), system, or roboto

2. Account branding

Set defaults once on your payment account so every session inherits them — display name, logo, accent color, and the payment-page message:

PUT /api/paymentaccounts/{accountUid}/checkout-config

Per-session branding overrides win over account defaults; the accent attribute wins over both.

3. CSS custom properties

govifi-payment {
  --gv-accent: #0b5fff;
  --gv-accent-50: #e8f1ff;
  --gv-radius: 10px;
  --gv-font-display: 'Inter', system-ui;
  --gv-font-mono: 'JetBrains Mono', ui-monospace;
}

The card-number and CVV inputs render in the secure iframe and inherit the component’s theme tokens — they cannot be styled with arbitrary host CSS (a PCI isolation boundary, not a limitation we can lift).

Preview every combination in the interactive designer.