Theme the widget

The widget renders inside a shadow root, a private Document Object Model (DOM) tree that your page’s stylesheet cannot select into. Your CSS therefore cannot restyle the form directly, which is what stops a site-wide rule from breaking a payment page. One kind of style does reach inside: a CSS custom property set on the element itself. The widget publishes its whole palette that way, and this page covers the properties, the theme attribute, and the parts that stay fixed.

Set your brand colour#

The brand colour is the accent ramp. Write the properties in a rule that selects the element itself:

leapa-customer {
  --leapa-accent-solid: #b8005c;
  --leapa-accent-emphasized: #9c004e;
  --leapa-accent-fg: #a30052;
  --leapa-accent-focus-ring: #d64c8c;
}

--leapa-accent-solid is the primary colour: the Pay button, the selected payment tile, the radio dot. --leapa-accent-fg is brand-coloured text, such as the terms link. Set the ramp and the widget follows:

The background is not part of that. In light the widget is transparent and sits on whatever your page paints behind it, so colour the container, not the element. --leapa-bg is read only when the widget paints its own surface, which today means dark.

Every property you can set#

Names follow Chakra UI’s semantic token structure under a --leapa- prefix, so a Chakra path such as bg.subtle becomes --leapa-bg-subtle.

Surfaces, text and borders#

--leapa-border-control draws the edge of anything the payer types or chooses in. It ships as an alias of --leapa-border, so changing --leapa-border moves both. Set --leapa-border-control on its own to give fields a heavier edge than the dividers around them, which is what it is there for.

Palettes#

Six palettes carry the same eight roles. Read <name> as accent, gray, blue, red, green or yellow:

Accent has one extra, --leapa-accent-fg-muted, for secondary text on an accent-tinted row.

Each palette has one job:

Sizing, shape and elevation#

These are not colours, and they are set the same way:

--leapa-size-control covers every field, every button and the consent row, so they cannot drift apart. --leapa-space-surface has a job only when the widget paints its own background, which today means dark. The one raised surface is the account list on the BurundiPay phone rail.

Light and dark#

The theme attribute takes three values, and leaving it out is a fourth behaviour:

<leapa-customer theme="light"></leapa-customer>
<leapa-customer theme="dark"></leapa-customer>
<leapa-customer theme="auto"></leapa-customer>
<leapa-customer></leapa-customer>

• light pins the light palette, even on a device set to dark
• dark pins the dark palette
• auto follows the payer’s device setting
• Unset renders light, on a transparent background

Following the device is opt-in rather than the default. The widget renders inside a checkout it does not own, so a merchant who sets nothing keeps the light card they have today. Without that rule, a version bump would turn the card dark for every customer whose device is set to dark.

In dark the widget paints its own background, because near-white text cannot sit on a page that is still white underneath. In light it stays transparent, as it always has.

If your page drives its own dark mode with a [data-theme] wrapper or a class, that marker does not reach inside the widget. Set theme on the element from the same code that sets your wrapper.

What stays fixed#

Two things do not follow your palette, and both are deliberate.

The BurundiPay QR code sits on a white field with dark modules. Scanners assume that contrast, and a dark panel there produces a code that may not scan at all. The frame around it stays white in every theme.

The Secured by Leapa badge is fixed artwork. Pick badge="light" or badge="dark" for the chip behind it; the mark itself keeps its own colours in both themes.

Size and placement#

The element sits in your layout like any other block, so size it from outside:

<div style="max-width: 400px; margin: 0 auto;">
  <leapa-customer id="leapa" api-key="your_api_key_here"></leapa-customer>
</div>

The widget lays itself out against its own width rather than the viewport’s, so it works at any width you give it. Leapa designs and reviews it at 320px, 375px and 480px.

Attributes that style nothing#

The element ignores these, so passing one has no effect:

• button-color, button-text-color and label-color
• Every label-* attribute, from label-email to label-address-zip

Use the custom properties above for colour. Use lang to change the wording, which keeps English and French consistent. button-text is the one label attribute that survives, and it changes only the card form’s submit button.