@klappay/oneThe embeddable Klap payment button

Drop it on any page — it opens a modal or popup that handles identity, wallet connection, and payment approval entirely on Klap's own origin, then reports the result back to you.

Getting started

GitHub

Zero-JS drop-in

<klappay-button charge-id="ch_123"> or a plain <button data-klappay-one="ch_123"> — both wire up automatically once the script loads.

Programmatic API

createKlappayOne(config).open() for full control over when the checkout opens and how results are handled.

React

A thin <KlappayButton /> wrapper and a useKlappayOne() hook — no separate implementation, both call straight into the same core.

Any other framework

The core is a framework-agnostic Web Component — Vue, Svelte, Angular, or plain HTML all use the exact same element.

iframe by default, popup on request

An automatic iframe-to-popup fallback if a merchant CSP blocks the frame, plus onReconnecting if the payer backgrounds the tab to approve in their wallet app and comes back.

Never a proof of payment

onSuccess is a UX signal only — real fulfillment comes from Klap Core's charge.confirmed webhook. The docs explain exactly why.

Runnable examples

Four full, clone-and-run apps — vanilla/no-bundler, Next.js, Nuxt, and SvelteKit — each rendering the button live against a charge ID you supply, backed by a real charge-creation API route.