Playground
Every <klappay-button> combination on the page backgrounds a merchant's checkout is likely to have — each one is the real element, rendered by the package, not a screenshot. Use it to pick the variant that contrasts with your page: black on a light page, white on a dark one.
The last button in each row has no charge-id, so it renders in its disabled state. origin points at a placeholder domain, so clicking opens nothing real.
White page #ffffff
black
white
Paper page #f4f4f5
black
white
Ink page #09090b
black
white
Mid-gray page #71717a
black
white
CSS custom properties
radius 0 pill height 56px serif