Styling

Only the button this package renders is customizable — the popup/ iframe content (one-id) never is. Klap One isn't a white-label product: a payer needs to recognize "this is Klap asking me for approval," the same way Apple Pay/Google Pay buttons only ever vary color/size, never the branding behind them. See Protocol & security for why that boundary is a non-negotiable invariant, not just a current limitation.

variant and size

Two color presets, black and white, and three sizes — deliberately not an arbitrary color system (no primaryColor: '#ff00ff'):

<klappay-button charge-id="ch_123" variant="black" size="md"></klappay-button>

variant	Background	Text	Logo
black (default)	#09090b	brand #d9d4cb	Klap "K", brand #d9d4cb
white	#ffffff, #d4d4d8 border	#09090b	Klap "K", ink #09090b

The logo and label share one color per variant (brand on black, ink on white), so both always contrast with the button behind them. Pick the variant that contrasts with your checkout page: black on a light page, white on a dark one.

size	Height
sm	32px
md (default)	40px
lg	48px

Both attributes are reactive — changing them after the element is mounted updates the rendered button immediately, no re-render/remount needed.

Try it live (every combination is on the Playground) — this is the real <klappay-button>, rendered by the actual package, not a screenshot:

(origin/charge-id above point at a placeholder domain, not a real Klap origin — clicking opens nothing real, this is purely a rendering demo.)

CSS custom properties across the Shadow DOM boundary

<klappay-button> renders inside a Shadow DOM, isolating your page's CSS from leaking into the button (and vice versa) — a generic button { ... } rule on your page can't accidentally break Klap's button just by existing. A handful of CSS custom properties are the one thing deliberately exposed to cross that boundary, enough to fit the button into your page's design without opening the door to reimplementing the whole component:

klappay-button {
  --klappay-radius: 4px;
  --klappay-font-family: 'Inter', sans-serif;
  --klappay-button-height: 44px;
  --klappay-background: #2563eb;
  --klappay-color: #ffffff;
}

Property	Affects
--klappay-radius	Corner radius (default 8px).
--klappay-font-family	Font stack (default Inter, system-ui, sans-serif).
--klappay-button-height	Overrides the size preset's height.
--klappay-background	Overrides the variant preset's background.
--klappay-color	Overrides the variant preset's text color.

--klappay-background/--klappay-color still key off whichever variant you set — they override that variant's colors specifically, they don't replace the variant system with an unbounded one. If you need a color outside the two presets entirely, set variant="black" (or any) and override both properties together, as in the example above.

Try it live — the CSS custom properties from the snippet above, applied to a real button:

Your own button (data-klappay-one)

The data-klappay-one path renders nothing of its own — it only adds a click handler to markup you already control. There's no Shadow DOM, no variant/size, and no CSS custom properties to reach for: style the element with your own CSS the same way you'd style any other button on your page.

[data-klappay-one] {
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
}
[data-klappay-one][data-klappay-one-busy] {
  opacity: 0.6;
  pointer-events: none;
}

See it running

The vanilla example renders both a plain <button> you own and style entirely yourself, wired up with createKlappayOne(), and a <klappay-button> with the default variant/size, rendered disabled until you type an origin/charge ID and click "Generate button" to enable it — right below it; every framework example in Examples renders <klappay-button>/<KlappayButton /> the same way — a good starting point to try overriding the CSS custom properties above against a real, running app.