@klappay/one 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Klappay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# @klappay/one
+
+The embeddable payment button for Klappay One. Drop it on any page — it
+opens a modal (an iframe, on desktop) or a popup (mobile) that handles
+identity, wallet connection, and payment approval entirely on Klappay's
+own origin, then reports the result back to you.
+
+## Install
+
+```sh
+npm install @klappay/one
+```
+
+Or via `<script>`, no build step required:
+
+```html
+<script src="https://js.klappay.com/one@1.js"></script>
+```
+
+Pin to a specific version instead of the `@1` major alias if you need a
+frozen build — an exact version is also required if you want to add
+`integrity`/`crossorigin` for Subresource Integrity, since the `@1` alias
+is a moving target and can't carry a fixed hash.
+
+## Quick start
+
+### Drop-in button
+
+```html
+<klappay-button charge-id="ch_123" variant="black" size="md"></klappay-button>
+```
+
+### Your own button
+
+```html
+<button data-klappay-one="ch_123">Pay with Klappay</button>
+```
+
+Both are wired up automatically once the script loads — no JavaScript
+required for either. Both also accept `mode="iframe"` / `mode="popup"`
+(`data-klappay-one-mode` for the plain button) to force a mode instead of
+the mobile/desktop default.
+
+### Programmatic
+
+```ts
+import { createKlappayOne } from '@klappay/one'
+
+const klappayOne = createKlappayOne({
+  chargeId: 'ch_123',
+  onSuccess: (result) => {
+    // UX signal only — confirm fulfillment via Klappay Core's webhook,
+    // never from this callback alone.
+  },
+  onError: (error) => console.error(error),
+  onCancel: () => console.log('payer closed the checkout'),
+})
+
+klappayOne.open()
+```
+
+Defaults to an iframe/modal on desktop and a popup on mobile — pass
+`mode: 'iframe' | 'popup'` to force one or the other.
+
+### React
+
+```tsx
+import { KlappayButton } from '@klappay/one/react'
+
+function Checkout() {
+  return <KlappayButton chargeId="ch_123" variant="black" size="md" />
+}
+```
+
+## Documentation
+
+See `ONE_JS_SDK.md` and `ONE_ID.md` in the `klap-one` repository for the
+full protocol and security model this package implements against.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+interface KlappayOneError {
+    code: string;
+    message: string;
+}
+interface PaymentResult {
+    txHash: string;
+    walletAddress: string;
+    network: string;
+    amount: string;
+    confirmedAt: string;
+}
+interface KlappayOneConfig {
+    chargeId: string;
+    origin: string;
+    locale?: string;
+    mode?: 'iframe' | 'popup';
+    onReady?: () => void;
+    onSuccess?: (result: PaymentResult) => void;
+    onError?: (error: KlappayOneError) => void;
+    onCancel?: () => void;
+}
+interface KlappayOne {
+    open: () => void;
+}
+
+interface GlobalConfig {
+    origin?: string;
+    locale?: string;
+}
+declare function configure(config: GlobalConfig): void;
+declare function createKlappayOne(config: KlappayOneConfig): KlappayOne;
+
+export { type KlappayOne, type KlappayOneConfig, type KlappayOneError, type PaymentResult, configure, createKlappayOne };

package/dist/index.global.js

@@ -0,0 +1,39 @@
+"use strict";var KlappayOne=(()=>{var f=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)f(e,o,{get:t[o],enumerable:!0})},H=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of M(t))!B.call(e,n)&&n!==o&&f(e,n,{get:()=>t[n],enumerable:!(a=z(t,n))||a.enumerable});return e};var $=e=>H(f({},"__esModule",{value:!0}),e);var oe={};L(oe,{configure:()=>P,createKlappayOne:()=>u});function q(e){return typeof e=="object"&&e!==null&&"type"in e&&typeof e.type=="string"&&e.type.startsWith("klappay:")&&"requestId"in e&&typeof e.requestId=="string"}function m(e,t,o){let a=!1,n=setTimeout(()=>{a||o.onTimeout?.()},1e4);function i(r){if(r.origin!==e||!q(r.data)||r.data.requestId!==t)return;let s=r.data;switch(s.type){case"klappay:ready":a=!0,clearTimeout(n),o.onReady?.();return;case"klappay:success":o.onSuccess?.(s.result);return;case"klappay:error":o.onError?.(s.error);return;case"klappay:cancel":o.onCancel?.();return;case"klappay:resize":o.onResize?.(s.height);return}}return window.addEventListener("message",i),()=>{clearTimeout(n),window.removeEventListener("message",i)}}function h(e){let t=new URL("/id/",e.klapOneOrigin);return t.searchParams.set("chargeId",e.chargeId),t.searchParams.set("requestId",e.requestId),t.searchParams.set("returnOrigin",window.location.origin),e.locale&&t.searchParams.set("locale",e.locale),t.toString()}var D=/Android|iPhone|iPad|iPod/i;function T(e){return D.test(e)}function N(){return`
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483647;
+    }
+    .frame {
+      width: 420px;
+      max-width: calc(100vw - 32px);
+      height: 720px;
+      max-height: calc(100vh - 32px);
+      border: none;
+      border-radius: 12px;
+      background: #000;
+      transition: height 0.15s ease;
+    }
+  `}function O(e,t){let o=document.createElement("div"),a=o.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=N();let i=document.createElement("div");i.className="backdrop",i.addEventListener("click",s=>{s.target===i&&t()});let r=document.createElement("iframe");return r.className="frame",r.src=e,i.append(r),a.append(n,i),document.body.append(o),{close:()=>o.remove(),resize:s=>{r.style.height=`${s}px`}}}var G="klappay-one";function k(e){let t=window.screenX+(window.outerWidth-420)/2,o=window.screenY+(window.outerHeight-720)/2;return window.open(e,G,`width=420,height=720,left=${t},top=${o}`)}function b(e){return e===null||e.closed}var W={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},V={code:"FRAME_TIMEOUT",message:"The Klappay One popup did not respond in time."},F=500,x={};function P(e){x=e}function l(){return x}function Y(e){return e.mode??(T(navigator.userAgent)?"popup":"iframe")}function u(e){function t(){Y(e)==="popup"?o():a()}function o(){let n=crypto.randomUUID(),i=h({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:n,locale:e.locale}),r=k(i);if(b(r)){e.onError?.(W);return}let s=m(e.origin,n,{onReady:e.onReady,onSuccess:d=>{p(),e.onSuccess?.(d)},onError:d=>{p(),e.onError?.(d)},onCancel:()=>{p(),e.onCancel?.()},onTimeout:()=>{p(),e.onError?.(V)}}),y=setInterval(()=>{b(r)&&(p(),e.onCancel?.())},F);function p(){clearInterval(y),s()}}function a(){let n=crypto.randomUUID(),i=h({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:n,locale:e.locale}),r=!1;function s(c){r||(r=!0,d(),c())}let y=O(i,()=>s(()=>e.onCancel?.())),p=m(e.origin,n,{onReady:e.onReady,onSuccess:c=>s(()=>e.onSuccess?.(c)),onError:c=>s(()=>e.onError?.(c)),onCancel:()=>s(()=>e.onCancel?.()),onResize:c=>y.resize(c),onTimeout:()=>s(o)});function d(){p(),y.close()}}return{open:t}}var g="data-klappay-one",w="data-klappay-one-origin",j="data-klappay-one-locale",Z="data-klappay-one-mode",_="data-klappay-one-wired",E="data-klappay-one-busy";function v(e){e.hasAttribute(_)||(e.setAttribute(_,""),e.addEventListener("click",()=>{if(e.hasAttribute(E))return;let t=e.getAttribute(g);if(!t)return;let o=e.getAttribute(w)??l().origin;if(!o){console.error(`[${g}] has no origin \u2014 set ${w} or call KlappayOne.configure({ origin }).`);return}let a=e.getAttribute(j)??l().locale,n=e.getAttribute(Z);e.setAttribute(E,"");let i=()=>{e.removeAttribute(E)};u({chargeId:t,origin:o,locale:a,mode:n==="iframe"||n==="popup"?n:void 0,onSuccess:r=>{i(),e.dispatchEvent(new CustomEvent("success",{detail:r}))},onError:r=>{i(),e.dispatchEvent(new CustomEvent("error",{detail:r}))},onCancel:()=>{i(),e.dispatchEvent(new CustomEvent("cancel"))}}).open()}))}function I(e=document){for(let t of e.querySelectorAll(`[${g}]`))v(t)}function R(e=document.body){let t=new MutationObserver(o=>{for(let a of o)for(let n of a.addedNodes)if(n instanceof Element){n.hasAttribute(g)&&v(n);for(let i of n.querySelectorAll(`[${g}]`))v(i)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var C="klappay-button",S=["white","yellow","black"],K=["sm","md","lg"],X="black",J="md",Q={sm:{height:"32px",fontSize:"13px",padding:"0 14px"},md:{height:"40px",fontSize:"14px",padding:"0 18px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px"}},ee={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function te(e){return S.includes(e)}function ne(e){return K.includes(e)}var A=class e extends HTMLElement{static get observedAttributes(){return["variant","size"]}#e;constructor(){super();let t=this.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=e.#r(),this.#e=document.createElement("button"),this.#e.type="button",this.#e.textContent="Pay with Klappay",this.#e.addEventListener("click",()=>this.#o()),t.append(o,this.#e),this.#t(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#t(),t==="size"&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return te(t)?t:X}get size(){let t=this.getAttribute("size")??"";return ne(t)?t:J}#t(){this.#e.setAttribute("data-variant",this.variant)}#n(){this.#e.setAttribute("data-size",this.size)}#o(){if(this.#e.disabled)return;let t=this.getAttribute("charge-id");if(!t){console.error("<klappay-button> is missing a required charge-id attribute.");return}let o=this.getAttribute("origin")??l().origin;if(!o){console.error("<klappay-button> has no origin \u2014 set the origin attribute or call KlappayOne.configure({ origin }).");return}let a=this.getAttribute("locale")??l().locale,n=this.getAttribute("mode");this.#e.disabled=!0;let i=()=>{this.#e.disabled=!1};u({chargeId:t,origin:o,locale:a,mode:n==="iframe"||n==="popup"?n:void 0,onSuccess:r=>{i(),this.dispatchEvent(new CustomEvent("success",{detail:r}))},onError:r=>{i(),this.dispatchEvent(new CustomEvent("error",{detail:r}))},onCancel:()=>{i(),this.dispatchEvent(new CustomEvent("cancel"))}}).open()}static#r(){let t=S.map(a=>{let{background:n,color:i,border:r}=ee[a];return`button[data-variant="${a}"] { background: var(--klappay-background, ${n}); color: var(--klappay-color, ${i}); border: ${r}; }`}).join(`
+`),o=K.map(a=>{let{height:n,fontSize:i,padding:r}=Q[a];return`button[data-size="${a}"] { height: var(--klappay-button-height, ${n}); font-size: ${i}; padding: ${r}; }`}).join(`
+`);return`
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--klappay-radius, 8px);
+        font-family: var(--klappay-font-family, system-ui, sans-serif);
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.15s ease;
+      }
+      button:hover { opacity: 0.9; }
+      button:active { opacity: 0.8; }
+      button:disabled { opacity: 0.6; cursor: not-allowed; }
+      ${t}
+      ${o}
+    `}};function U(){customElements.get(C)||customElements.define(C,A)}U();document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>I()):I();R();return $(oe);})();

package/dist/index.js

@@ -0,0 +1,433 @@
+// src/core/bridge.ts
+var READY_TIMEOUT_MS = 1e4;
+function isBridgeMessage(data) {
+  return typeof data === "object" && data !== null && "type" in data && typeof data.type === "string" && data.type.startsWith("klappay:") && "requestId" in data && typeof data.requestId === "string";
+}
+function listen(klapOneOrigin, requestId, handlers) {
+  let ready = false;
+  const timeout = setTimeout(() => {
+    if (!ready) handlers.onTimeout?.();
+  }, READY_TIMEOUT_MS);
+  function onMessage(event) {
+    if (event.origin !== klapOneOrigin) return;
+    if (!isBridgeMessage(event.data) || event.data.requestId !== requestId) return;
+    const message = event.data;
+    switch (message.type) {
+      case "klappay:ready":
+        ready = true;
+        clearTimeout(timeout);
+        handlers.onReady?.();
+        return;
+      case "klappay:success":
+        handlers.onSuccess?.(message.result);
+        return;
+      case "klappay:error":
+        handlers.onError?.(message.error);
+        return;
+      case "klappay:cancel":
+        handlers.onCancel?.();
+        return;
+      case "klappay:resize":
+        handlers.onResize?.(message.height);
+        return;
+    }
+  }
+  window.addEventListener("message", onMessage);
+  return () => {
+    clearTimeout(timeout);
+    window.removeEventListener("message", onMessage);
+  };
+}
+function buildFrameUrl(params) {
+  const url = new URL("/id/", params.klapOneOrigin);
+  url.searchParams.set("chargeId", params.chargeId);
+  url.searchParams.set("requestId", params.requestId);
+  url.searchParams.set("returnOrigin", window.location.origin);
+  if (params.locale) url.searchParams.set("locale", params.locale);
+  return url.toString();
+}
+
+// src/core/device.ts
+var MOBILE_USER_AGENT_PATTERN = /Android|iPhone|iPad|iPod/i;
+function isMobileUserAgent(userAgent) {
+  return MOBILE_USER_AGENT_PATTERN.test(userAgent);
+}
+
+// src/core/iframe.ts
+var FRAME_WIDTH = 420;
+var INITIAL_FRAME_HEIGHT = 720;
+function css() {
+  return `
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483647;
+    }
+    .frame {
+      width: ${FRAME_WIDTH}px;
+      max-width: calc(100vw - 32px);
+      height: ${INITIAL_FRAME_HEIGHT}px;
+      max-height: calc(100vh - 32px);
+      border: none;
+      border-radius: 12px;
+      background: #000;
+      transition: height 0.15s ease;
+    }
+  `;
+}
+function openIframe(url, onDismiss) {
+  const host = document.createElement("div");
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = css();
+  const backdrop = document.createElement("div");
+  backdrop.className = "backdrop";
+  backdrop.addEventListener("click", (event) => {
+    if (event.target === backdrop) onDismiss();
+  });
+  const frame = document.createElement("iframe");
+  frame.className = "frame";
+  frame.src = url;
+  backdrop.append(frame);
+  shadow.append(style, backdrop);
+  document.body.append(host);
+  return {
+    close: () => host.remove(),
+    resize: (height) => {
+      frame.style.height = `${height}px`;
+    }
+  };
+}
+
+// src/core/popup.ts
+var POPUP_WIDTH = 420;
+var POPUP_HEIGHT = 720;
+var POPUP_NAME = "klappay-one";
+function openPopup(url) {
+  const left = window.screenX + (window.outerWidth - POPUP_WIDTH) / 2;
+  const top = window.screenY + (window.outerHeight - POPUP_HEIGHT) / 2;
+  return window.open(
+    url,
+    POPUP_NAME,
+    `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top}`
+  );
+}
+function isPopupClosed(popup) {
+  return popup === null || popup.closed;
+}
+
+// src/core/klappay-one.ts
+var POPUP_BLOCKED = { code: "POPUP_BLOCKED", message: "The Klappay One popup was blocked." };
+var FRAME_TIMEOUT = {
+  code: "FRAME_TIMEOUT",
+  message: "The Klappay One popup did not respond in time."
+};
+var POPUP_CLOSED_POLL_MS = 500;
+var globalConfig = {};
+function configure(config) {
+  globalConfig = config;
+}
+function getGlobalConfig() {
+  return globalConfig;
+}
+function resolveMode(config) {
+  return config.mode ?? (isMobileUserAgent(navigator.userAgent) ? "popup" : "iframe");
+}
+function createKlappayOne(config) {
+  function open() {
+    if (resolveMode(config) === "popup") {
+      openViaPopup();
+    } else {
+      openViaIframe();
+    }
+  }
+  function openViaPopup() {
+    const requestId = crypto.randomUUID();
+    const url = buildFrameUrl({
+      klapOneOrigin: config.origin,
+      chargeId: config.chargeId,
+      requestId,
+      locale: config.locale
+    });
+    const popup = openPopup(url);
+    if (isPopupClosed(popup)) {
+      config.onError?.(POPUP_BLOCKED);
+      return;
+    }
+    const stopListening = listen(config.origin, requestId, {
+      onReady: config.onReady,
+      onSuccess: (result) => {
+        stop();
+        config.onSuccess?.(result);
+      },
+      onError: (error) => {
+        stop();
+        config.onError?.(error);
+      },
+      onCancel: () => {
+        stop();
+        config.onCancel?.();
+      },
+      onTimeout: () => {
+        stop();
+        config.onError?.(FRAME_TIMEOUT);
+      }
+    });
+    const pollClosed = setInterval(() => {
+      if (isPopupClosed(popup)) {
+        stop();
+        config.onCancel?.();
+      }
+    }, POPUP_CLOSED_POLL_MS);
+    function stop() {
+      clearInterval(pollClosed);
+      stopListening();
+    }
+  }
+  function openViaIframe() {
+    const requestId = crypto.randomUUID();
+    const url = buildFrameUrl({
+      klapOneOrigin: config.origin,
+      chargeId: config.chargeId,
+      requestId,
+      locale: config.locale
+    });
+    let settled = false;
+    function settleOnce(run) {
+      if (settled) return;
+      settled = true;
+      stop();
+      run();
+    }
+    const frame = openIframe(url, () => settleOnce(() => config.onCancel?.()));
+    const stopListening = listen(config.origin, requestId, {
+      onReady: config.onReady,
+      onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
+      onError: (error) => settleOnce(() => config.onError?.(error)),
+      onCancel: () => settleOnce(() => config.onCancel?.()),
+      onResize: (height) => frame.resize(height),
+      // A merchant CSP blocking frame-src/child-src for this domain would
+      // otherwise leave the iframe silently blank forever — one automatic
+      // fallback to the popup renderer before giving up and reporting
+      // FRAME_TIMEOUT (which openViaPopup does on its own if it also fails).
+      onTimeout: () => settleOnce(openViaPopup)
+    });
+    function stop() {
+      stopListening();
+      frame.close();
+    }
+  }
+  return { open };
+}
+
+// src/ui/auto-wire.ts
+var AUTO_WIRE_ATTRIBUTE = "data-klappay-one";
+var AUTO_WIRE_ORIGIN_ATTRIBUTE = "data-klappay-one-origin";
+var AUTO_WIRE_LOCALE_ATTRIBUTE = "data-klappay-one-locale";
+var AUTO_WIRE_MODE_ATTRIBUTE = "data-klappay-one-mode";
+var WIRED_MARKER = "data-klappay-one-wired";
+var BUSY_MARKER = "data-klappay-one-busy";
+function wire(element) {
+  if (element.hasAttribute(WIRED_MARKER)) return;
+  element.setAttribute(WIRED_MARKER, "");
+  element.addEventListener("click", () => {
+    if (element.hasAttribute(BUSY_MARKER)) return;
+    const chargeId = element.getAttribute(AUTO_WIRE_ATTRIBUTE);
+    if (!chargeId) return;
+    const origin = element.getAttribute(AUTO_WIRE_ORIGIN_ATTRIBUTE) ?? getGlobalConfig().origin;
+    if (!origin) {
+      console.error(
+        `[${AUTO_WIRE_ATTRIBUTE}] has no origin \u2014 set ${AUTO_WIRE_ORIGIN_ATTRIBUTE} or call KlappayOne.configure({ origin }).`
+      );
+      return;
+    }
+    const locale = element.getAttribute(AUTO_WIRE_LOCALE_ATTRIBUTE) ?? getGlobalConfig().locale;
+    const mode = element.getAttribute(AUTO_WIRE_MODE_ATTRIBUTE);
+    element.setAttribute(BUSY_MARKER, "");
+    const clearBusy = () => {
+      element.removeAttribute(BUSY_MARKER);
+    };
+    createKlappayOne({
+      chargeId,
+      origin,
+      locale,
+      mode: mode === "iframe" || mode === "popup" ? mode : void 0,
+      onSuccess: (result) => {
+        clearBusy();
+        element.dispatchEvent(new CustomEvent("success", { detail: result }));
+      },
+      onError: (error) => {
+        clearBusy();
+        element.dispatchEvent(new CustomEvent("error", { detail: error }));
+      },
+      onCancel: () => {
+        clearBusy();
+        element.dispatchEvent(new CustomEvent("cancel"));
+      }
+    }).open();
+  });
+}
+function wireExisting(root = document) {
+  for (const element of root.querySelectorAll(`[${AUTO_WIRE_ATTRIBUTE}]`)) wire(element);
+}
+function observeNewElements(root = document.body) {
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (!(node instanceof Element)) continue;
+        if (node.hasAttribute(AUTO_WIRE_ATTRIBUTE)) wire(node);
+        for (const element of node.querySelectorAll(`[${AUTO_WIRE_ATTRIBUTE}]`)) wire(element);
+      }
+    }
+  });
+  observer.observe(root, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+
+// src/ui/klappay-button.ts
+var KLAPPAY_BUTTON_TAG = "klappay-button";
+var VARIANTS = ["white", "yellow", "black"];
+var SIZES = ["sm", "md", "lg"];
+var DEFAULT_VARIANT = "black";
+var DEFAULT_SIZE = "md";
+var SIZE_STYLES = {
+  sm: { height: "32px", fontSize: "13px", padding: "0 14px" },
+  md: { height: "40px", fontSize: "14px", padding: "0 18px" },
+  lg: { height: "48px", fontSize: "16px", padding: "0 24px" }
+};
+var VARIANT_STYLES = {
+  white: { background: "#ffffff", color: "#111111", border: "1px solid #e5e5e5" },
+  yellow: { background: "#f2b90c", color: "#111111", border: "none" },
+  black: { background: "#111111", color: "#ffffff", border: "none" }
+};
+function isVariant(value) {
+  return VARIANTS.includes(value);
+}
+function isSize(value) {
+  return SIZES.includes(value);
+}
+var KlappayButtonElement = class _KlappayButtonElement extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "size"];
+  }
+  #button;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = _KlappayButtonElement.#css();
+    this.#button = document.createElement("button");
+    this.#button.type = "button";
+    this.#button.textContent = "Pay with Klappay";
+    this.#button.addEventListener("click", () => this.#handleClick());
+    shadow.append(style, this.#button);
+    this.#applyVariant();
+    this.#applySize();
+  }
+  attributeChangedCallback(name) {
+    if (name === "variant") this.#applyVariant();
+    if (name === "size") this.#applySize();
+  }
+  get variant() {
+    const value = this.getAttribute("variant") ?? "";
+    return isVariant(value) ? value : DEFAULT_VARIANT;
+  }
+  get size() {
+    const value = this.getAttribute("size") ?? "";
+    return isSize(value) ? value : DEFAULT_SIZE;
+  }
+  #applyVariant() {
+    this.#button.setAttribute("data-variant", this.variant);
+  }
+  #applySize() {
+    this.#button.setAttribute("data-size", this.size);
+  }
+  #handleClick() {
+    if (this.#button.disabled) return;
+    const chargeId = this.getAttribute("charge-id");
+    if (!chargeId) {
+      console.error("<klappay-button> is missing a required charge-id attribute.");
+      return;
+    }
+    const origin = this.getAttribute("origin") ?? getGlobalConfig().origin;
+    if (!origin) {
+      console.error(
+        "<klappay-button> has no origin \u2014 set the origin attribute or call KlappayOne.configure({ origin })."
+      );
+      return;
+    }
+    const locale = this.getAttribute("locale") ?? getGlobalConfig().locale;
+    const mode = this.getAttribute("mode");
+    this.#button.disabled = true;
+    const reenable = () => {
+      this.#button.disabled = false;
+    };
+    createKlappayOne({
+      chargeId,
+      origin,
+      locale,
+      mode: mode === "iframe" || mode === "popup" ? mode : void 0,
+      onSuccess: (result) => {
+        reenable();
+        this.dispatchEvent(new CustomEvent("success", { detail: result }));
+      },
+      onError: (error) => {
+        reenable();
+        this.dispatchEvent(new CustomEvent("error", { detail: error }));
+      },
+      onCancel: () => {
+        reenable();
+        this.dispatchEvent(new CustomEvent("cancel"));
+      }
+    }).open();
+  }
+  static #css() {
+    const variantRules = VARIANTS.map((variant) => {
+      const { background, color, border } = VARIANT_STYLES[variant];
+      return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
+    }).join("\n");
+    const sizeRules = SIZES.map((size) => {
+      const { height, fontSize, padding } = SIZE_STYLES[size];
+      return `button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }`;
+    }).join("\n");
+    return `
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--klappay-radius, 8px);
+        font-family: var(--klappay-font-family, system-ui, sans-serif);
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.15s ease;
+      }
+      button:hover { opacity: 0.9; }
+      button:active { opacity: 0.8; }
+      button:disabled { opacity: 0.6; cursor: not-allowed; }
+      ${variantRules}
+      ${sizeRules}
+    `;
+  }
+};
+function registerKlappayButton() {
+  if (!customElements.get(KLAPPAY_BUTTON_TAG)) {
+    customElements.define(KLAPPAY_BUTTON_TAG, KlappayButtonElement);
+  }
+}
+
+// src/index.ts
+registerKlappayButton();
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => wireExisting());
+} else {
+  wireExisting();
+}
+observeNewElements();
+export {
+  configure,
+  createKlappayOne
+};

package/dist/react/index.d.ts

@@ -0,0 +1,53 @@
+type KlappayButtonVariant = 'white' | 'yellow' | 'black';
+type KlappayButtonSize = 'sm' | 'md' | 'lg';
+interface KlappayOneError {
+    code: string;
+    message: string;
+}
+interface PaymentResult {
+    txHash: string;
+    walletAddress: string;
+    network: string;
+    amount: string;
+    confirmedAt: string;
+}
+interface KlappayOneConfig {
+    chargeId: string;
+    origin: string;
+    locale?: string;
+    mode?: 'iframe' | 'popup';
+    onReady?: () => void;
+    onSuccess?: (result: PaymentResult) => void;
+    onError?: (error: KlappayOneError) => void;
+    onCancel?: () => void;
+}
+
+declare function useKlappayOne(config: KlappayOneConfig): {
+    open: () => void;
+};
+interface KlappayButtonProps {
+    chargeId: string;
+    origin?: string;
+    locale?: string;
+    variant?: KlappayButtonVariant;
+    size?: KlappayButtonSize;
+    onSuccess?: (result: PaymentResult) => void;
+    onError?: (error: KlappayOneError) => void;
+    onCancel?: () => void;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'klappay-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'charge-id'?: string;
+                origin?: string;
+                locale?: string;
+                variant?: KlappayButtonVariant;
+                size?: KlappayButtonSize;
+            };
+        }
+    }
+}
+declare function KlappayButton(props: KlappayButtonProps): JSX.Element;
+
+export { KlappayButton, type KlappayButtonProps, useKlappayOne };

package/dist/react/index.js

@@ -0,0 +1,406 @@
+// src/react/index.tsx
+import { useEffect, useRef } from "react";
+
+// src/core/bridge.ts
+var READY_TIMEOUT_MS = 1e4;
+function isBridgeMessage(data) {
+  return typeof data === "object" && data !== null && "type" in data && typeof data.type === "string" && data.type.startsWith("klappay:") && "requestId" in data && typeof data.requestId === "string";
+}
+function listen(klapOneOrigin, requestId, handlers) {
+  let ready = false;
+  const timeout = setTimeout(() => {
+    if (!ready) handlers.onTimeout?.();
+  }, READY_TIMEOUT_MS);
+  function onMessage(event) {
+    if (event.origin !== klapOneOrigin) return;
+    if (!isBridgeMessage(event.data) || event.data.requestId !== requestId) return;
+    const message = event.data;
+    switch (message.type) {
+      case "klappay:ready":
+        ready = true;
+        clearTimeout(timeout);
+        handlers.onReady?.();
+        return;
+      case "klappay:success":
+        handlers.onSuccess?.(message.result);
+        return;
+      case "klappay:error":
+        handlers.onError?.(message.error);
+        return;
+      case "klappay:cancel":
+        handlers.onCancel?.();
+        return;
+      case "klappay:resize":
+        handlers.onResize?.(message.height);
+        return;
+    }
+  }
+  window.addEventListener("message", onMessage);
+  return () => {
+    clearTimeout(timeout);
+    window.removeEventListener("message", onMessage);
+  };
+}
+function buildFrameUrl(params) {
+  const url = new URL("/id/", params.klapOneOrigin);
+  url.searchParams.set("chargeId", params.chargeId);
+  url.searchParams.set("requestId", params.requestId);
+  url.searchParams.set("returnOrigin", window.location.origin);
+  if (params.locale) url.searchParams.set("locale", params.locale);
+  return url.toString();
+}
+
+// src/core/device.ts
+var MOBILE_USER_AGENT_PATTERN = /Android|iPhone|iPad|iPod/i;
+function isMobileUserAgent(userAgent) {
+  return MOBILE_USER_AGENT_PATTERN.test(userAgent);
+}
+
+// src/core/iframe.ts
+var FRAME_WIDTH = 420;
+var INITIAL_FRAME_HEIGHT = 720;
+function css() {
+  return `
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483647;
+    }
+    .frame {
+      width: ${FRAME_WIDTH}px;
+      max-width: calc(100vw - 32px);
+      height: ${INITIAL_FRAME_HEIGHT}px;
+      max-height: calc(100vh - 32px);
+      border: none;
+      border-radius: 12px;
+      background: #000;
+      transition: height 0.15s ease;
+    }
+  `;
+}
+function openIframe(url, onDismiss) {
+  const host = document.createElement("div");
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = css();
+  const backdrop = document.createElement("div");
+  backdrop.className = "backdrop";
+  backdrop.addEventListener("click", (event) => {
+    if (event.target === backdrop) onDismiss();
+  });
+  const frame = document.createElement("iframe");
+  frame.className = "frame";
+  frame.src = url;
+  backdrop.append(frame);
+  shadow.append(style, backdrop);
+  document.body.append(host);
+  return {
+    close: () => host.remove(),
+    resize: (height) => {
+      frame.style.height = `${height}px`;
+    }
+  };
+}
+
+// src/core/popup.ts
+var POPUP_WIDTH = 420;
+var POPUP_HEIGHT = 720;
+var POPUP_NAME = "klappay-one";
+function openPopup(url) {
+  const left = window.screenX + (window.outerWidth - POPUP_WIDTH) / 2;
+  const top = window.screenY + (window.outerHeight - POPUP_HEIGHT) / 2;
+  return window.open(
+    url,
+    POPUP_NAME,
+    `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top}`
+  );
+}
+function isPopupClosed(popup) {
+  return popup === null || popup.closed;
+}
+
+// src/core/klappay-one.ts
+var POPUP_BLOCKED = { code: "POPUP_BLOCKED", message: "The Klappay One popup was blocked." };
+var FRAME_TIMEOUT = {
+  code: "FRAME_TIMEOUT",
+  message: "The Klappay One popup did not respond in time."
+};
+var POPUP_CLOSED_POLL_MS = 500;
+var globalConfig = {};
+function getGlobalConfig() {
+  return globalConfig;
+}
+function resolveMode(config) {
+  return config.mode ?? (isMobileUserAgent(navigator.userAgent) ? "popup" : "iframe");
+}
+function createKlappayOne(config) {
+  function open() {
+    if (resolveMode(config) === "popup") {
+      openViaPopup();
+    } else {
+      openViaIframe();
+    }
+  }
+  function openViaPopup() {
+    const requestId = crypto.randomUUID();
+    const url = buildFrameUrl({
+      klapOneOrigin: config.origin,
+      chargeId: config.chargeId,
+      requestId,
+      locale: config.locale
+    });
+    const popup = openPopup(url);
+    if (isPopupClosed(popup)) {
+      config.onError?.(POPUP_BLOCKED);
+      return;
+    }
+    const stopListening = listen(config.origin, requestId, {
+      onReady: config.onReady,
+      onSuccess: (result) => {
+        stop();
+        config.onSuccess?.(result);
+      },
+      onError: (error) => {
+        stop();
+        config.onError?.(error);
+      },
+      onCancel: () => {
+        stop();
+        config.onCancel?.();
+      },
+      onTimeout: () => {
+        stop();
+        config.onError?.(FRAME_TIMEOUT);
+      }
+    });
+    const pollClosed = setInterval(() => {
+      if (isPopupClosed(popup)) {
+        stop();
+        config.onCancel?.();
+      }
+    }, POPUP_CLOSED_POLL_MS);
+    function stop() {
+      clearInterval(pollClosed);
+      stopListening();
+    }
+  }
+  function openViaIframe() {
+    const requestId = crypto.randomUUID();
+    const url = buildFrameUrl({
+      klapOneOrigin: config.origin,
+      chargeId: config.chargeId,
+      requestId,
+      locale: config.locale
+    });
+    let settled = false;
+    function settleOnce(run) {
+      if (settled) return;
+      settled = true;
+      stop();
+      run();
+    }
+    const frame = openIframe(url, () => settleOnce(() => config.onCancel?.()));
+    const stopListening = listen(config.origin, requestId, {
+      onReady: config.onReady,
+      onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
+      onError: (error) => settleOnce(() => config.onError?.(error)),
+      onCancel: () => settleOnce(() => config.onCancel?.()),
+      onResize: (height) => frame.resize(height),
+      // A merchant CSP blocking frame-src/child-src for this domain would
+      // otherwise leave the iframe silently blank forever — one automatic
+      // fallback to the popup renderer before giving up and reporting
+      // FRAME_TIMEOUT (which openViaPopup does on its own if it also fails).
+      onTimeout: () => settleOnce(openViaPopup)
+    });
+    function stop() {
+      stopListening();
+      frame.close();
+    }
+  }
+  return { open };
+}
+
+// src/ui/klappay-button.ts
+var KLAPPAY_BUTTON_TAG = "klappay-button";
+var VARIANTS = ["white", "yellow", "black"];
+var SIZES = ["sm", "md", "lg"];
+var DEFAULT_VARIANT = "black";
+var DEFAULT_SIZE = "md";
+var SIZE_STYLES = {
+  sm: { height: "32px", fontSize: "13px", padding: "0 14px" },
+  md: { height: "40px", fontSize: "14px", padding: "0 18px" },
+  lg: { height: "48px", fontSize: "16px", padding: "0 24px" }
+};
+var VARIANT_STYLES = {
+  white: { background: "#ffffff", color: "#111111", border: "1px solid #e5e5e5" },
+  yellow: { background: "#f2b90c", color: "#111111", border: "none" },
+  black: { background: "#111111", color: "#ffffff", border: "none" }
+};
+function isVariant(value) {
+  return VARIANTS.includes(value);
+}
+function isSize(value) {
+  return SIZES.includes(value);
+}
+var KlappayButtonElement = class _KlappayButtonElement extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "size"];
+  }
+  #button;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = _KlappayButtonElement.#css();
+    this.#button = document.createElement("button");
+    this.#button.type = "button";
+    this.#button.textContent = "Pay with Klappay";
+    this.#button.addEventListener("click", () => this.#handleClick());
+    shadow.append(style, this.#button);
+    this.#applyVariant();
+    this.#applySize();
+  }
+  attributeChangedCallback(name) {
+    if (name === "variant") this.#applyVariant();
+    if (name === "size") this.#applySize();
+  }
+  get variant() {
+    const value = this.getAttribute("variant") ?? "";
+    return isVariant(value) ? value : DEFAULT_VARIANT;
+  }
+  get size() {
+    const value = this.getAttribute("size") ?? "";
+    return isSize(value) ? value : DEFAULT_SIZE;
+  }
+  #applyVariant() {
+    this.#button.setAttribute("data-variant", this.variant);
+  }
+  #applySize() {
+    this.#button.setAttribute("data-size", this.size);
+  }
+  #handleClick() {
+    if (this.#button.disabled) return;
+    const chargeId = this.getAttribute("charge-id");
+    if (!chargeId) {
+      console.error("<klappay-button> is missing a required charge-id attribute.");
+      return;
+    }
+    const origin = this.getAttribute("origin") ?? getGlobalConfig().origin;
+    if (!origin) {
+      console.error(
+        "<klappay-button> has no origin \u2014 set the origin attribute or call KlappayOne.configure({ origin })."
+      );
+      return;
+    }
+    const locale = this.getAttribute("locale") ?? getGlobalConfig().locale;
+    const mode = this.getAttribute("mode");
+    this.#button.disabled = true;
+    const reenable = () => {
+      this.#button.disabled = false;
+    };
+    createKlappayOne({
+      chargeId,
+      origin,
+      locale,
+      mode: mode === "iframe" || mode === "popup" ? mode : void 0,
+      onSuccess: (result) => {
+        reenable();
+        this.dispatchEvent(new CustomEvent("success", { detail: result }));
+      },
+      onError: (error) => {
+        reenable();
+        this.dispatchEvent(new CustomEvent("error", { detail: error }));
+      },
+      onCancel: () => {
+        reenable();
+        this.dispatchEvent(new CustomEvent("cancel"));
+      }
+    }).open();
+  }
+  static #css() {
+    const variantRules = VARIANTS.map((variant) => {
+      const { background, color, border } = VARIANT_STYLES[variant];
+      return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
+    }).join("\n");
+    const sizeRules = SIZES.map((size) => {
+      const { height, fontSize, padding } = SIZE_STYLES[size];
+      return `button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }`;
+    }).join("\n");
+    return `
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--klappay-radius, 8px);
+        font-family: var(--klappay-font-family, system-ui, sans-serif);
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.15s ease;
+      }
+      button:hover { opacity: 0.9; }
+      button:active { opacity: 0.8; }
+      button:disabled { opacity: 0.6; cursor: not-allowed; }
+      ${variantRules}
+      ${sizeRules}
+    `;
+  }
+};
+function registerKlappayButton() {
+  if (!customElements.get(KLAPPAY_BUTTON_TAG)) {
+    customElements.define(KLAPPAY_BUTTON_TAG, KlappayButtonElement);
+  }
+}
+
+// src/react/index.tsx
+import { jsx } from "react/jsx-runtime";
+registerKlappayButton();
+function useKlappayOne(config) {
+  const configRef = useRef(config);
+  configRef.current = config;
+  return {
+    open: () => createKlappayOne(configRef.current).open()
+  };
+}
+function KlappayButton(props) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    function onSuccess(event) {
+      props.onSuccess?.(event.detail);
+    }
+    function onError(event) {
+      props.onError?.(event.detail);
+    }
+    function onCancel() {
+      props.onCancel?.();
+    }
+    el.addEventListener("success", onSuccess);
+    el.addEventListener("error", onError);
+    el.addEventListener("cancel", onCancel);
+    return () => {
+      el.removeEventListener("success", onSuccess);
+      el.removeEventListener("error", onError);
+      el.removeEventListener("cancel", onCancel);
+    };
+  }, [props.onSuccess, props.onError, props.onCancel]);
+  return /* @__PURE__ */ jsx(
+    "klappay-button",
+    {
+      ref,
+      "charge-id": props.chargeId,
+      origin: props.origin,
+      locale: props.locale,
+      variant: props.variant,
+      size: props.size
+    }
+  );
+}
+export {
+  KlappayButton,
+  useKlappayOne
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@klappay/one",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "Klappay One's embeddable payment button — opens the hosted identity/wallet popup (one-id) and relays the result via postMessage. Never touches a private key or a session token; framework-agnostic core with a thin React wrapper.",
+  "keywords": ["klap", "klappay", "payments", "crypto", "web3", "widget"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/klappay/klap-one-js.git"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "packageManager": "pnpm@10.33.0",
+  "type": "module",
+  "sideEffects": ["./dist/index.js", "./dist/index.global.js", "./dist/react/index.js"],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    }
+  },
+  "files": ["dist", "LICENSE", "README.md"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write .",
+    "test": "vitest run",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.0",
+    "@changesets/cli": "^2.31.1",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^18.3.0",
+    "husky": "^9.1.0",
+    "jsdom": "^30.0.1",
+    "lint-staged": "^15.2.0",
+    "react": "^18.3.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vitest": "^3.2.6"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": ["@biomejs/biome", "esbuild"]
+  }
+}