@klappay/one 1.0.0 → 1.0.2

package/README.md

@@ -74,8 +74,11 @@ function Checkout() {
 
 ## 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.
+Full docs, guides, and framework examples: **https://js-one.klappay.com**
+(built from `docs/` in this repository — `docs/getting-started.md` for a
+full walkthrough and `docs/protocol.md` for the popup/iframe embed and
+`postMessage` contract this package implements against). Runnable example
+apps live in [`examples/`](./examples).
 
 ## License
 

package/dist/index.global.js

@@ -1,4 +1,4 @@
-"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`
+"use strict";var KlappayOne=(()=>{var f=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var M=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 B(t))!M.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 re={};L(re,{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 A(e){return D.test(e)}function N(){return`
     .backdrop {
       position: fixed;
       inset: 0;
@@ -18,7 +18,7 @@
       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(`
+  `}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 V={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},W={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??(A(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?.(V);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?.(W)}}),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 S="klappay-button",C=["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 C.includes(e)}function ne(e){return K.includes(e)}var oe=typeof HTMLElement<"u"?HTMLElement:class{},T=class e extends oe{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}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return ne(t)?t:J}set size(t){this.setAttribute("size",t)}#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=C.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 {
@@ -36,4 +36,4 @@
       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);})();
+    `}};function U(){typeof customElements>"u"||customElements.get(S)||customElements.define(S,T)}U();typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>I()):I(),R());return $(re);})();

package/dist/index.js

@@ -310,7 +310,9 @@ function isVariant(value) {
 function isSize(value) {
   return SIZES.includes(value);
 }
-var KlappayButtonElement = class _KlappayButtonElement extends HTMLElement {
+var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase {
   static get observedAttributes() {
     return ["variant", "size"];
   }
@@ -336,10 +338,16 @@ var KlappayButtonElement = class _KlappayButtonElement extends HTMLElement {
     const value = this.getAttribute("variant") ?? "";
     return isVariant(value) ? value : DEFAULT_VARIANT;
   }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
   get size() {
     const value = this.getAttribute("size") ?? "";
     return isSize(value) ? value : DEFAULT_SIZE;
   }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
   #applyVariant() {
     this.#button.setAttribute("data-variant", this.variant);
   }
@@ -414,6 +422,7 @@ var KlappayButtonElement = class _KlappayButtonElement extends HTMLElement {
   }
 };
 function registerKlappayButton() {
+  if (typeof customElements === "undefined") return;
   if (!customElements.get(KLAPPAY_BUTTON_TAG)) {
     customElements.define(KLAPPAY_BUTTON_TAG, KlappayButtonElement);
   }
@@ -421,12 +430,14 @@ function registerKlappayButton() {
 
 // src/index.ts
 registerKlappayButton();
-if (document.readyState === "loading") {
-  document.addEventListener("DOMContentLoaded", () => wireExisting());
-} else {
-  wireExisting();
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => wireExisting());
+  } else {
+    wireExisting();
+  }
+  observeNewElements();
 }
-observeNewElements();
 export {
   configure,
   createKlappayOne

package/dist/react/index.js

@@ -246,7 +246,9 @@ function isVariant(value) {
 function isSize(value) {
   return SIZES.includes(value);
 }
-var KlappayButtonElement = class _KlappayButtonElement extends HTMLElement {
+var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase {
   static get observedAttributes() {
     return ["variant", "size"];
   }
@@ -272,10 +274,16 @@ var KlappayButtonElement = class _KlappayButtonElement extends HTMLElement {
     const value = this.getAttribute("variant") ?? "";
     return isVariant(value) ? value : DEFAULT_VARIANT;
   }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
   get size() {
     const value = this.getAttribute("size") ?? "";
     return isSize(value) ? value : DEFAULT_SIZE;
   }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
   #applyVariant() {
     this.#button.setAttribute("data-variant", this.variant);
   }
@@ -350,6 +358,7 @@ var KlappayButtonElement = class _KlappayButtonElement extends HTMLElement {
   }
 };
 function registerKlappayButton() {
+  if (typeof customElements === "undefined") return;
   if (!customElements.get(KLAPPAY_BUTTON_TAG)) {
     customElements.define(KLAPPAY_BUTTON_TAG, KlappayButtonElement);
   }

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@klappay/one",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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"],
+  "keywords": [
+    "klap",
+    "klappay",
+    "payments",
+    "crypto",
+    "web3",
+    "widget"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/klappay/klap-one-js.git"
@@ -11,9 +18,12 @@
   "engines": {
     "node": ">=24"
   },
-  "packageManager": "pnpm@10.33.0",
   "type": "module",
-  "sideEffects": ["./dist/index.js", "./dist/index.global.js", "./dist/react/index.js"],
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/index.global.js",
+    "./dist/react/index.js"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -26,23 +36,15 @@
       "import": "./dist/react/index.js"
     }
   },
-  "files": ["dist", "LICENSE", "README.md"],
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "logo.png"
+  ],
   "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"
   },
@@ -64,9 +66,23 @@
     "react": "^18.3.0",
     "tsup": "^8.3.0",
     "typescript": "^5.6.0",
+    "vitepress": "^1.6.4",
+    "vitepress-plugin-llms": "^1.13.4",
     "vitest": "^3.2.6"
   },
-  "pnpm": {
-    "onlyBuiltDependencies": ["@biomejs/biome", "esbuild"]
+  "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",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish"
   }
-}
+}