@klappay/one 1.4.0 → 1.5.0

package/README.md

@@ -1,9 +1,9 @@
 # @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.
+opens a modal (an iframe, by default) or a popup that handles identity,
+wallet connection, and payment approval entirely on Klappay's own origin,
+then reports the result back to you.
 
 ## Install
 
@@ -39,7 +39,7 @@ is a moving target and can't carry a fixed hash.
 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.
+the iframe default.
 
 ### Programmatic
 
@@ -59,7 +59,7 @@ const klappayOne = createKlappayOne({
 klappayOne.open()
 ```
 
-Defaults to an iframe/modal on desktop and a popup on mobile — pass
+Defaults to an iframe/modal on every device — pass
 `mode: 'iframe' | 'popup'` to force one or the other.
 
 ### React

package/dist/index.d.ts

@@ -23,11 +23,14 @@ interface KlappayOneConfig {
     onSuccess?: (result: PaymentResult) => void;
     onError?: (error: KlappayOneError) => void;
     onCancel?: (reason: 'user' | 'closed') => void;
+    onReconnecting?: (state: ReconnectState) => void;
 }
 interface KlappayOne {
     open: () => void;
 }
 
+type ReconnectState = 'started' | 'recovered' | 'failed';
+
 interface GlobalConfig {
     origin?: string;
     locale?: string;
@@ -35,4 +38,4 @@ interface GlobalConfig {
 declare function configure(config: GlobalConfig): void;
 declare function createKlappayOne(config: KlappayOneConfig): KlappayOne;
 
-export { type KlappayOne, type KlappayOneConfig, type KlappayOneError, type PaymentResult, configure, createKlappayOne };
+export { type KlappayOne, type KlappayOneConfig, type KlappayOneError, type PaymentResult, type ReconnectState, configure, createKlappayOne };

package/dist/index.global.js

@@ -1,4 +1,4 @@
-"use strict";var KlappayOne=(()=>{var y=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var o in t)y(e,o,{get:t[o],enumerable:!0})},j=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of G(t))!Z.call(e,i)&&i!==o&&y(e,i,{get:()=>t[i],enumerable:!(s=Y(t,i))||s.enumerable});return e};var X=e=>j(y({},"__esModule",{value:!0}),e);var ve={};F(ve,{configure:()=>O,createKlappayOne:()=>h});function V(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 v(e,t,o){let s=!1,i=setTimeout(()=>{s||o.onTimeout?.()},1e4);function r(n){if(n.origin!==e||!V(n.data)||n.data.requestId!==t)return;let a=n.data;switch(a.type){case"klappay:ready":s=!0,clearTimeout(i),o.onReady?.();return;case"klappay:success":o.onSuccess?.(a.result);return;case"klappay:error":o.onError?.(a.error);return;case"klappay:cancel":o.onCancel?.("user");return;case"klappay:pending":o.onPending?.();return;case"klappay:confirming":o.onConfirming?.({txHash:a.txHash,network:a.network});return;case"klappay:resize":o.onResize?.(a.height);return}}return window.addEventListener("message",r),()=>{clearTimeout(i),window.removeEventListener("message",r)}}function E(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 q=/Android|iPhone|iPad|iPod/i;function C(e){return q.test(e)}var A="cubic-bezier(0.16, 1, 0.3, 1)",Q=`
+"use strict";var KlappayOne=(()=>{var A=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var G=(e,t)=>{for(var n in t)A(e,n,{get:t[n],enumerable:!0})},j=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Y(t))!Z.call(e,r)&&r!==n&&A(e,r,{get:()=>t[r],enumerable:!(s=D(t,r))||s.enumerable});return e};var F=e=>j(A({},"__esModule",{value:!0}),e);var Ee={};G(Ee,{configure:()=>k,createKlappayOne:()=>f});var X=["started","recovered","failed"];function V(e){if(typeof e!="object"||e===null)return!1;let t=e;return typeof t.txHash=="string"&&typeof t.walletAddress=="string"&&typeof t.network=="string"&&typeof t.amount=="string"&&typeof t.confirmedAt=="string"}function q(e){if(typeof e!="object"||e===null)return!1;let t=e;return typeof t.code=="string"&&typeof t.message=="string"}function Q(e){if(typeof e!="object"||e===null)return!1;let t=e;if(typeof t.type!="string"||typeof t.requestId!="string")return!1;switch(t.type){case"klappay:ready":case"klappay:pending":case"klappay:cancel":return!0;case"klappay:resize":return typeof t.height=="number";case"klappay:confirming":return typeof t.txHash=="string"&&typeof t.network=="string";case"klappay:success":return V(t.result);case"klappay:error":return q(t.error);case"klappay:reconnecting":return typeof t.state=="string"&&X.includes(t.state);default:return!1}}function v(e,t,n){let s=!1,r,i=setTimeout(()=>{s||n.onTimeout?.()},1e4);function o(a){if(a.origin!==e||!Q(a.data)||a.data.requestId!==t)return;let l=a.data;switch(l.type){case"klappay:ready":s=!0,clearTimeout(i),n.onReady?.();return;case"klappay:success":n.onSuccess?.(l.result);return;case"klappay:error":n.onError?.(l.error);return;case"klappay:cancel":n.onCancel?.("user");return;case"klappay:pending":n.onPending?.();return;case"klappay:confirming":n.onConfirming?.({txHash:l.txHash,network:l.network});return;case"klappay:resize":n.onResize?.(l.height);return;case"klappay:reconnecting":if(l.state===r)return;r=l.state,n.onReconnecting?.(l.state);return}}return window.addEventListener("message",o),()=>{clearTimeout(i),window.removeEventListener("message",o)}}function E(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 b="cubic-bezier(0.16, 1, 0.3, 1)",J=`
     .backdrop {
       position: fixed;
       inset: 0;
@@ -16,7 +16,7 @@
       padding: 16px 0;
       z-index: 2147483647;
       opacity: 0;
-      transition: opacity 320ms ${A};
+      transition: opacity 320ms ${b};
       scrollbar-width: thin;
       scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
     }
@@ -55,18 +55,18 @@
       opacity: 0;
       transform: translateY(-32px) scale(0.96);
       transition:
-        height 320ms ${A},
-        opacity 320ms ${A},
-        transform 320ms ${A};
+        height 320ms ${b},
+        opacity 320ms ${b},
+        transform 320ms ${b};
     }
     .frame.visible {
       opacity: 1;
       transform: translateY(0) scale(1);
     }
-  `;function x(e,t){let o=document.createElement("div"),s=o.attachShadow({mode:"open"}),i=document.createElement("style");i.textContent=Q;let r=!0,n=document.createElement("div");n.className="backdrop",n.addEventListener("click",c=>{c.target===n&&r&&t()});let a=document.createElement("iframe");a.className="frame",a.src=e,n.append(a),s.append(i,n),document.body.append(o);function u(c){let m=n.scrollTop<=0,b=n.scrollTop+n.clientHeight>=n.scrollHeight;(c.deltaY<0&&m||c.deltaY>0&&b)&&c.preventDefault()}document.addEventListener("wheel",u,{passive:!1});let p=!1;function d(){p||(p=!0,n.classList.add("visible"),a.classList.add("visible"))}requestAnimationFrame(d),setTimeout(d,320);let l=!1;function N(){if(l)return;l=!0;let c=!1;function m(){c||(c=!0,document.removeEventListener("wheel",u),o.remove())}function b(D){D.target===n&&(n.removeEventListener("transitionend",b),m())}n.addEventListener("transitionend",b),setTimeout(m,370),n.classList.remove("visible"),a.classList.remove("visible")}return{close:N,resize:c=>{a.style.height=`${c}px`},setDismissable:c=>{r=c}}}var J="klappay-one";function S(e){let t=window.screenX+(window.outerWidth-420)/2,o=window.screenY+(window.outerHeight-720)/2;return window.open(e,J,`width=420,height=720,left=${t},top=${o}`)}function w(e){return e===null||e.closed}var W={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},_={code:"FRAME_TIMEOUT",message:"The Klappay One popup did not respond in time."},$=500,R={};function O(e){R=e}function g(){return R}function ee(e){return e.mode??(C(navigator.userAgent)?"popup":"iframe")}function h(e){function t(){ee(e)==="popup"?o():s()}function o(){let i=crypto.randomUUID(),r=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:i,locale:e.locale}),n=S(r);if(w(n)){e.onError?.(W);return}let a=v(e.origin,i,{onReady:e.onReady,onPending:e.onPending,onConfirming:e.onConfirming,onSuccess:d=>{p(),e.onSuccess?.(d)},onError:d=>{p(),e.onError?.(d)},onCancel:d=>{p(),e.onCancel?.(d)},onTimeout:()=>{p(),e.onError?.(_)}}),u=setInterval(()=>{w(n)&&(p(),e.onCancel?.("closed"))},$);function p(){clearInterval(u),a()}}function s(){let i=crypto.randomUUID(),r=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:i,locale:e.locale}),n=!1;function a(l){n||(n=!0,d(),l())}let u=x(r,()=>a(()=>e.onCancel?.("user"))),p=v(e.origin,i,{onReady:e.onReady,onPending:()=>{u.setDismissable(!1),e.onPending?.()},onConfirming:e.onConfirming,onSuccess:l=>a(()=>e.onSuccess?.(l)),onError:l=>a(()=>e.onError?.(l)),onCancel:l=>a(()=>e.onCancel?.(l)),onResize:l=>u.resize(l),onTimeout:()=>a(o)});function d(){p(),u.close()}}return{open:t}}var f="data-klappay-one",k="data-klappay-one-origin",te="data-klappay-one-locale",ne="data-klappay-one-mode",L="data-klappay-one-wired",I="data-klappay-one-busy";function T(e){e.hasAttribute(L)||(e.setAttribute(L,""),e.addEventListener("click",()=>{if(e.hasAttribute(I))return;let t=e.getAttribute(f);if(!t)return;let o=e.getAttribute(k)??g().origin;if(!o){console.error(`[${f}] has no origin \u2014 set ${k} or call KlappayOne.configure({ origin }).`);return}let s=e.getAttribute(te)??g().locale,i=e.getAttribute(ne);e.setAttribute(I,"");let r=()=>{e.removeAttribute(I)};h({chargeId:t,origin:o,locale:s,mode:i==="iframe"||i==="popup"?i:void 0,onPending:()=>{e.dispatchEvent(new CustomEvent("pending"))},onConfirming:n=>{e.dispatchEvent(new CustomEvent("confirming",{detail:n}))},onSuccess:n=>{r(),e.dispatchEvent(new CustomEvent("success",{detail:n}))},onError:n=>{r(),e.dispatchEvent(new CustomEvent("error",{detail:n}))},onCancel:n=>{r(),e.dispatchEvent(new CustomEvent("cancel",{detail:{reason:n}}))}}).open()}))}function P(e=document){for(let t of e.querySelectorAll(`[${f}]`))T(t)}function U(e=document.body){let t=new MutationObserver(o=>{for(let s of o)for(let i of s.addedNodes)if(i instanceof Element){i.hasAttribute(f)&&T(i);for(let r of i.querySelectorAll(`[${f}]`))T(r)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var K="klappay-button",M=["white","yellow","black"],H=["sm","md","lg"],oe=["full","short"],ie="black",re="md",ae="full",se={full:"Pay with Klappay One",short:"Klappay One"},le={sm:{height:"32px",fontSize:"13px",padding:"0 14px",logoSize:"18px"},md:{height:"40px",fontSize:"14px",padding:"0 18px",logoSize:"21px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px",logoSize:"23px"}},ce="data:image/webp;base64,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",pe="data:image/webp;base64,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",de="data:image/webp;base64,UklGRmwFAABXRUJQVlA4TGAFAAAvJ8AJEDXRjbZ/ld2ImZmZmZnhMjMzMzMcMzO3oCZ/wR4wx7/oKjO2wf6bamCMaJ3hFiEqwnA0J1YFvrljj0OHLuBmvw48ys6MI5egMgxNbPybcagKVtSBIvXgSKFLuNm/hQ23EAcEghDxfzMG0rYJ9y952yVBkm3aVti2bdu2jZGNmW2/923bto1n27Z58O7GBODD6B4wxcKSB5sCM5bCn0RwLHl5SCmwI+KjZj0C0SQG8SYFawVOrIEnSTxiqMlHW4HbSB7cBdjk4tuAkAJrLD4jAP3AO+iuQ9Z89ON07MuQzyR2GLAveBvLJ0vhiMZiOqS9go0GFI0EYT8VeiRwN/dORpA6BNQTPAhcS56rI5xzYwErWUzi3kBwH7A/SwqCRUiuYakXmMYCL8fcyDbSB4BpOKiQkhp0l/Z2iWZCfF8JVzDfbDuVlyv++/3BbSS6Yjhjs8jkzz1wG4nDZgoM4onQBXjcRdxIUG+w8GNEQfImfAaB5HL2rtConaxfB08xxtOhWC6EvhHzMtRK8alFzdTlquXCUJAU69m8FKMQemweBsql5lb4d/kV2xPBl1ZsKpDaxJzFnnw+taC2hYkxgJ3M3giXjtMKvK5fIhj0sMefboXgKQDBw4HVBJaRcYBHgqrwT6LyAFlLIBX0g/juEVMBtyGtIwXjXTyIJuSf69CdBkOQL4VnZVwcDCaxmcVL0ZnDIVvhW0cmn17nJyu4kE5WF7+exY97YNMCuDawY48HJnP6dC2pEwHMIw5FUbOcLUFWvH2O4t/r/HoqtXOgPGsgcvGaDdkbLBZBXYuhqQVwbPVbtjyRwvEmJEL520k8BdjAraeIR4HaODYKSLyCg99ncFRBwpb/rODRoGYK9sGC2gDTBzMBQn4aQc2lGOxlzSK5kAM/+gXxTI5GA4h8CTwtISucq53siab3KoRcCpymBt4KRwrnv2Y+nsfJbCIfYRLzISxSf7KQxi0sWXIe9CW41aBUzOVqKhUEtfBwer22ibriqb3czltMxERMTEQfFhA+F+pAE0lXobyOWevrWiJ0mDnIhjApSU4CZlO3gzFBesVSiFROJ9Nah9Zuxmw5H7oNFx14QUH8V4vE35nWJHWRHU/b/5uY9smuUs6d14M7YC3FfQJAENtMxETswMRd2ZRMgiEGgdN4d9jUhWYV6eMBvcFkWG5jLYz/g0Fnr0beRIN3U1LAi042xF83E+3H5E9o9Fwtd0MYDuCrxxDJbJ7XoZUHmwPADLADnIAQwKtRxb3jkTQtZ1kYolXsX4skIiLABvgAH4FJYBHoBlgR8cLh6xDPwiuRpi1QJZStZEeqsBaPASmYOwBywDSwC2wCn4A0L+I+WNLRyeb3QojZ0JtYy6K1Il7F8s1S0XuggTgHgAWQBmQAvj+8iHgnQn7seKSUlu1jItb3ehHHHNDr9ToREa9EZC+7PklELJmMLoYqxUjF0enu9naUoJRP0QbGpkF2SiajPAZYSawCt5YbEARKgKYf0DxSjEgYRpFUfeaRxESsxZ5U7uxHzR8BB+AnsAd0AJLoeL4evfC5s5gtwaT3QAwPr4HP1AL8gNVXgfOAqFvl3LECitO321VcnQhhExE7yDHBKCY7FO5zqA0YAHcAI4Db7VRB81g4oQlMJjKwtS5s5/diyBO2ENY40B7+hOKcBZ+JOruf6XYi4kUgElD2IpqnM1AM4d5S1vxYruZbA2+S+R9E6y7+RHKjHLdGxDrwXvS+9jNQ6UZENPf/Fkfl2cUc+rFQg7MCv+s/vFefAZoAEtBQQXS6LwLiR914bwP2wBZwD2BDnU6894H8d/716rkvATUg/Kjz/nGfAw==",ue={black:ce,yellow:de,white:pe},ge={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function he(e){return M.includes(e)}function fe(e){return H.includes(e)}function me(e){return oe.includes(e)}var be=typeof HTMLElement<"u"?HTMLElement:class{},Ae=(()=>{let e=M.map(o=>{let{background:s,color:i,border:r}=ge[o];return`button[data-variant="${o}"] { background: var(--klappay-background, ${s}); color: var(--klappay-color, ${i}); border: ${r}; }`}).join(`
-`),t=H.map(o=>{let{height:s,fontSize:i,padding:r,logoSize:n}=le[o];return`
-      button[data-size="${o}"] { height: var(--klappay-button-height, ${s}); font-size: ${i}; padding: ${r}; }
-      button[data-size="${o}"] img { width: ${n}; height: ${n}; }
+  `;function R(e,t){let n=document.createElement("div"),s=n.attachShadow({mode:"open"}),r=document.createElement("style");r.textContent=J;let i=!0,o=document.createElement("div");o.className="backdrop",o.addEventListener("click",p=>{p.target===o&&i&&t()});let a=document.createElement("iframe");a.className="frame",a.src=e,a.allow="storage-access",o.append(a),s.append(r,o),document.body.append(n);function l(p){let m=o.scrollTop<=0,y=o.scrollTop+o.clientHeight>=o.scrollHeight;(p.deltaY<0&&m||p.deltaY>0&&y)&&p.preventDefault()}document.addEventListener("wheel",l,{passive:!1});let u=!1;function d(){u||(u=!0,o.classList.add("visible"),a.classList.add("visible"))}requestAnimationFrame(d),setTimeout(d,320);let c=!1;function z(){if(c)return;c=!0;let p=!1;function m(){p||(p=!0,document.removeEventListener("wheel",l),n.remove())}function y(N){N.target===o&&(o.removeEventListener("transitionend",y),m())}o.addEventListener("transitionend",y),setTimeout(m,370),o.classList.remove("visible"),a.classList.remove("visible")}return{close:z,resize:p=>{a.style.height=`${p}px`},setDismissable:p=>{i=p}}}var W="klappay-one";function C(e){let t=window.screenX+(window.outerWidth-420)/2,n=window.screenY+(window.outerHeight-720)/2;return window.open(e,W,`width=420,height=720,left=${t},top=${n}`)}function w(e){return e===null||e.closed}var _={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},$={code:"FRAME_TIMEOUT",message:"The Klappay One popup did not respond in time."},ee=500,S={};function k(e){S=e}function g(){return S}function te(e){return e.mode??"iframe"}function f(e){function t(){te(e)==="popup"?n():s()}function n(){let r=crypto.randomUUID(),i=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:r,locale:e.locale}),o=C(i);if(w(o)){e.onError?.(_);return}let a=v(e.origin,r,{onReady:e.onReady,onPending:e.onPending,onConfirming:e.onConfirming,onSuccess:d=>{u(),e.onSuccess?.(d)},onError:d=>{u(),e.onError?.(d)},onCancel:d=>{u(),e.onCancel?.(d)},onTimeout:()=>{u(),e.onError?.($)},onReconnecting:e.onReconnecting}),l=setInterval(()=>{w(o)&&(u(),e.onCancel?.("closed"))},ee);function u(){clearInterval(l),a()}}function s(){let r=crypto.randomUUID(),i=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:r,locale:e.locale}),o=!1;function a(c){o||(o=!0,d(),c())}let l=R(i,()=>a(()=>e.onCancel?.("user"))),u=v(e.origin,r,{onReady:e.onReady,onPending:()=>{l.setDismissable(!1),e.onPending?.()},onConfirming:e.onConfirming,onSuccess:c=>a(()=>e.onSuccess?.(c)),onError:c=>a(()=>e.onError?.(c)),onCancel:c=>a(()=>e.onCancel?.(c)),onResize:c=>l.resize(c),onTimeout:()=>a(n),onReconnecting:e.onReconnecting});function d(){u(),l.close()}}return{open:t}}var h="data-klappay-one",x="data-klappay-one-origin",ne="data-klappay-one-locale",oe="data-klappay-one-mode",O="data-klappay-one-wired",I="data-klappay-one-busy";function T(e){e.hasAttribute(O)||(e.setAttribute(O,""),e.addEventListener("click",()=>{if(e.hasAttribute(I))return;let t=e.getAttribute(h);if(!t)return;let n=e.getAttribute(x)??g().origin;if(!n){console.error(`[${h}] has no origin \u2014 set ${x} or call KlappayOne.configure({ origin }).`);return}let s=e.getAttribute(ne)??g().locale,r=e.getAttribute(oe);e.setAttribute(I,"");let i=()=>{e.removeAttribute(I)};f({chargeId:t,origin:n,locale:s,mode:r==="iframe"||r==="popup"?r:void 0,onPending:()=>{e.dispatchEvent(new CustomEvent("pending"))},onConfirming:o=>{e.dispatchEvent(new CustomEvent("confirming",{detail:o}))},onSuccess:o=>{i(),e.dispatchEvent(new CustomEvent("success",{detail:o}))},onError:o=>{i(),e.dispatchEvent(new CustomEvent("error",{detail:o}))},onCancel:o=>{i(),e.dispatchEvent(new CustomEvent("cancel",{detail:{reason:o}}))}}).open()}))}function L(e=document){for(let t of e.querySelectorAll(`[${h}]`))T(t)}function P(e=document.body){let t=new MutationObserver(n=>{for(let s of n)for(let r of s.addedNodes)if(r instanceof Element){r.hasAttribute(h)&&T(r);for(let i of r.querySelectorAll(`[${h}]`))T(i)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var K="klappay-button",U=["white","yellow","black"],H=["sm","md","lg"],re=["full","short"],ie="black",ae="md",se="full",le={full:"Pay with Klappay One",short:"Klappay One"},ce={sm:{height:"32px",fontSize:"13px",padding:"0 14px",logoSize:"18px"},md:{height:"40px",fontSize:"14px",padding:"0 18px",logoSize:"21px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px",logoSize:"23px"}},pe="data:image/webp;base64,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",ue="data:image/webp;base64,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",de="data:image/webp;base64,UklGRmwFAABXRUJQVlA4TGAFAAAvJ8AJEDXRjbZ/ld2ImZmZmZnhMjMzMzMcMzO3oCZ/wR4wx7/oKjO2wf6bamCMaJ3hFiEqwnA0J1YFvrljj0OHLuBmvw48ys6MI5egMgxNbPybcagKVtSBIvXgSKFLuNm/hQ23EAcEghDxfzMG0rYJ9y952yVBkm3aVti2bdu2jZGNmW2/923bto1n27Z58O7GBODD6B4wxcKSB5sCM5bCn0RwLHl5SCmwI+KjZj0C0SQG8SYFawVOrIEnSTxiqMlHW4HbSB7cBdjk4tuAkAJrLD4jAP3AO+iuQ9Z89ON07MuQzyR2GLAveBvLJ0vhiMZiOqS9go0GFI0EYT8VeiRwN/dORpA6BNQTPAhcS56rI5xzYwErWUzi3kBwH7A/SwqCRUiuYakXmMYCL8fcyDbSB4BpOKiQkhp0l/Z2iWZCfF8JVzDfbDuVlyv++/3BbSS6Yjhjs8jkzz1wG4nDZgoM4onQBXjcRdxIUG+w8GNEQfImfAaB5HL2rtConaxfB08xxtOhWC6EvhHzMtRK8alFzdTlquXCUJAU69m8FKMQemweBsql5lb4d/kV2xPBl1ZsKpDaxJzFnnw+taC2hYkxgJ3M3giXjtMKvK5fIhj0sMefboXgKQDBw4HVBJaRcYBHgqrwT6LyAFlLIBX0g/juEVMBtyGtIwXjXTyIJuSf69CdBkOQL4VnZVwcDCaxmcVL0ZnDIVvhW0cmn17nJyu4kE5WF7+exY97YNMCuDawY48HJnP6dC2pEwHMIw5FUbOcLUFWvH2O4t/r/HoqtXOgPGsgcvGaDdkbLBZBXYuhqQVwbPVbtjyRwvEmJEL520k8BdjAraeIR4HaODYKSLyCg99ncFRBwpb/rODRoGYK9sGC2gDTBzMBQn4aQc2lGOxlzSK5kAM/+gXxTI5GA4h8CTwtISucq53siab3KoRcCpymBt4KRwrnv2Y+nsfJbCIfYRLzISxSf7KQxi0sWXIe9CW41aBUzOVqKhUEtfBwer22ibriqb3czltMxERMTEQfFhA+F+pAE0lXobyOWevrWiJ0mDnIhjApSU4CZlO3gzFBesVSiFROJ9Nah9Zuxmw5H7oNFx14QUH8V4vE35nWJHWRHU/b/5uY9smuUs6d14M7YC3FfQJAENtMxETswMRd2ZRMgiEGgdN4d9jUhWYV6eMBvcFkWG5jLYz/g0Fnr0beRIN3U1LAi042xF83E+3H5E9o9Fwtd0MYDuCrxxDJbJ7XoZUHmwPADLADnIAQwKtRxb3jkTQtZ1kYolXsX4skIiLABvgAH4FJYBHoBlgR8cLh6xDPwiuRpi1QJZStZEeqsBaPASmYOwBywDSwC2wCn4A0L+I+WNLRyeb3QojZ0JtYy6K1Il7F8s1S0XuggTgHgAWQBmQAvj+8iHgnQn7seKSUlu1jItb3ehHHHNDr9ToREa9EZC+7PklELJmMLoYqxUjF0enu9naUoJRP0QbGpkF2SiajPAZYSawCt5YbEARKgKYf0DxSjEgYRpFUfeaRxESsxZ5U7uxHzR8BB+AnsAd0AJLoeL4evfC5s5gtwaT3QAwPr4HP1AL8gNVXgfOAqFvl3LECitO321VcnQhhExE7yDHBKCY7FO5zqA0YAHcAI4Db7VRB81g4oQlMJjKwtS5s5/diyBO2ENY40B7+hOKcBZ+JOruf6XYi4kUgElD2IpqnM1AM4d5S1vxYruZbA2+S+R9E6y7+RHKjHLdGxDrwXvS+9jNQ6UZENPf/Fkfl2cUc+rFQg7MCv+s/vFefAZoAEtBQQXS6LwLiR914bwP2wBZwD2BDnU6894H8d/716rkvATUg/Kjz/nGfAw==",ge={black:pe,yellow:de,white:ue},fe={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function he(e){return U.includes(e)}function me(e){return H.includes(e)}function ye(e){return re.includes(e)}var be=typeof HTMLElement<"u"?HTMLElement:class{},Ae=(()=>{let e=U.map(n=>{let{background:s,color:r,border:i}=fe[n];return`button[data-variant="${n}"] { background: var(--klappay-background, ${s}); color: var(--klappay-color, ${r}); border: ${i}; }`}).join(`
+`),t=H.map(n=>{let{height:s,fontSize:r,padding:i,logoSize:o}=ce[n];return`
+      button[data-size="${n}"] { height: var(--klappay-button-height, ${s}); font-size: ${r}; padding: ${i}; }
+      button[data-size="${n}"] img { width: ${o}; height: ${o}; }
     `}).join(`
 `);return`
     button {
@@ -86,4 +86,4 @@
     button:disabled { opacity: 0.6; cursor: not-allowed; }
     ${e}
     ${t}
-  `})(),B=class extends be{static get observedAttributes(){return["variant","size","label","charge-id","origin"]}#e;#t;#o;#i=!1;constructor(){super();let t=this.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=Ae,this.#t=document.createElement("img"),this.#t.alt="",this.#t.setAttribute("aria-hidden","true"),this.#o=document.createElement("span"),this.#e=document.createElement("button"),this.#e.type="button",this.#e.append(this.#t,this.#o),this.#e.addEventListener("click",()=>this.#c()),t.append(o,this.#e),this.#r(),this.#a(),this.#s(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#r(),t==="size"&&this.#a(),t==="label"&&this.#s(),(t==="charge-id"||t==="origin")&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return he(t)?t:ie}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return fe(t)?t:re}set size(t){this.setAttribute("size",t)}get label(){let t=this.getAttribute("label")??"";return me(t)?t:ae}set label(t){this.setAttribute("label",t)}#r(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=ue[this.variant]}#a(){this.#e.setAttribute("data-size",this.size)}#s(){this.#o.textContent=se[this.label]}#l(){let t=this.getAttribute("charge-id"),o=this.getAttribute("origin")??g().origin;return!!(t&&o)}#n(){this.#e.disabled=this.#i||!this.#l()}#c(){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")??g().origin;if(!o){console.error("<klappay-button> has no origin \u2014 set the origin attribute or call KlappayOne.configure({ origin }).");return}let s=this.getAttribute("locale")??g().locale,i=this.getAttribute("mode");this.#i=!0,this.#n();let r=()=>{this.#i=!1,this.#n()};h({chargeId:t,origin:o,locale:s,mode:i==="iframe"||i==="popup"?i:void 0,onPending:()=>{this.dispatchEvent(new CustomEvent("pending"))},onConfirming:n=>{this.dispatchEvent(new CustomEvent("confirming",{detail:n}))},onSuccess:n=>{r(),this.dispatchEvent(new CustomEvent("success",{detail:n}))},onError:n=>{r(),this.dispatchEvent(new CustomEvent("error",{detail:n}))},onCancel:n=>{r(),this.dispatchEvent(new CustomEvent("cancel",{detail:{reason:n}}))}}).open()}};function z(){typeof customElements>"u"||customElements.get(K)||customElements.define(K,B)}z();if(typeof document<"u"){let e=function(){P(),U()};ye=e,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()}var ye;return X(ve);})();
+  `})(),B=class extends be{static get observedAttributes(){return["variant","size","label","charge-id","origin"]}#e;#t;#o;#r=!1;constructor(){super();let t=this.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=Ae,this.#t=document.createElement("img"),this.#t.alt="",this.#t.setAttribute("aria-hidden","true"),this.#o=document.createElement("span"),this.#e=document.createElement("button"),this.#e.type="button",this.#e.append(this.#t,this.#o),this.#e.addEventListener("click",()=>this.#c()),t.append(n,this.#e),this.#i(),this.#a(),this.#s(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#i(),t==="size"&&this.#a(),t==="label"&&this.#s(),(t==="charge-id"||t==="origin")&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return he(t)?t:ie}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return me(t)?t:ae}set size(t){this.setAttribute("size",t)}get label(){let t=this.getAttribute("label")??"";return ye(t)?t:se}set label(t){this.setAttribute("label",t)}#i(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=ge[this.variant]}#a(){this.#e.setAttribute("data-size",this.size)}#s(){this.#o.textContent=le[this.label]}#l(){let t=this.getAttribute("charge-id"),n=this.getAttribute("origin")??g().origin;return!!(t&&n)}#n(){this.#e.disabled=this.#r||!this.#l()}#c(){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 n=this.getAttribute("origin")??g().origin;if(!n){console.error("<klappay-button> has no origin \u2014 set the origin attribute or call KlappayOne.configure({ origin }).");return}let s=this.getAttribute("locale")??g().locale,r=this.getAttribute("mode");this.#r=!0,this.#n();let i=()=>{this.#r=!1,this.#n()};f({chargeId:t,origin:n,locale:s,mode:r==="iframe"||r==="popup"?r:void 0,onPending:()=>{this.dispatchEvent(new CustomEvent("pending"))},onConfirming:o=>{this.dispatchEvent(new CustomEvent("confirming",{detail:o}))},onSuccess:o=>{i(),this.dispatchEvent(new CustomEvent("success",{detail:o}))},onError:o=>{i(),this.dispatchEvent(new CustomEvent("error",{detail:o}))},onCancel:o=>{i(),this.dispatchEvent(new CustomEvent("cancel",{detail:{reason:o}}))}}).open()}};function M(){typeof customElements>"u"||customElements.get(K)||customElements.define(K,B)}M();if(typeof document<"u"){let e=function(){L(),P()};ve=e,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()}var ve;return F(Ee);})();

package/dist/index.js

@@ -1,10 +1,42 @@
 // src/core/bridge.ts
 var READY_TIMEOUT_MS = 1e4;
+var RECONNECT_STATES = ["started", "recovered", "failed"];
+function isPaymentResult(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const result = value;
+  return typeof result.txHash === "string" && typeof result.walletAddress === "string" && typeof result.network === "string" && typeof result.amount === "string" && typeof result.confirmedAt === "string";
+}
+function isKlappayOneError(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const error = value;
+  return typeof error.code === "string" && typeof error.message === "string";
+}
 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";
+  if (typeof data !== "object" || data === null) return false;
+  const envelope = data;
+  if (typeof envelope.type !== "string" || typeof envelope.requestId !== "string") return false;
+  switch (envelope.type) {
+    case "klappay:ready":
+    case "klappay:pending":
+    case "klappay:cancel":
+      return true;
+    case "klappay:resize":
+      return typeof envelope.height === "number";
+    case "klappay:confirming":
+      return typeof envelope.txHash === "string" && typeof envelope.network === "string";
+    case "klappay:success":
+      return isPaymentResult(envelope.result);
+    case "klappay:error":
+      return isKlappayOneError(envelope.error);
+    case "klappay:reconnecting":
+      return typeof envelope.state === "string" && RECONNECT_STATES.includes(envelope.state);
+    default:
+      return false;
+  }
 }
 function listen(klapOneOrigin, requestId, handlers) {
   let ready = false;
+  let lastReconnectState;
   const timeout = setTimeout(() => {
     if (!ready) handlers.onTimeout?.();
   }, READY_TIMEOUT_MS);
@@ -36,6 +68,11 @@ function listen(klapOneOrigin, requestId, handlers) {
       case "klappay:resize":
         handlers.onResize?.(message.height);
         return;
+      case "klappay:reconnecting":
+        if (message.state === lastReconnectState) return;
+        lastReconnectState = message.state;
+        handlers.onReconnecting?.(message.state);
+        return;
     }
   }
   window.addEventListener("message", onMessage);
@@ -53,12 +90,6 @@ function buildFrameUrl(params) {
   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 LOADING_FRAME_HEIGHT = 360;
@@ -145,6 +176,7 @@ function openIframe(url, onDismiss) {
   const frame = document.createElement("iframe");
   frame.className = "frame";
   frame.src = url;
+  frame.allow = "storage-access";
   backdrop.append(frame);
   shadow.append(style, backdrop);
   document.body.append(host);
@@ -229,7 +261,7 @@ function getGlobalConfig() {
   return globalConfig;
 }
 function resolveMode(config) {
-  return config.mode ?? (isMobileUserAgent(navigator.userAgent) ? "popup" : "iframe");
+  return config.mode ?? "iframe";
 }
 function createKlappayOne(config) {
   function open() {
@@ -271,7 +303,11 @@ function createKlappayOne(config) {
       onTimeout: () => {
         stop();
         config.onError?.(FRAME_TIMEOUT);
-      }
+      },
+      // A popup tab is exactly as exposed to backgrounding as an iframe
+      // is (see resolveMode's comment above) — never gated to the iframe
+      // path only.
+      onReconnecting: config.onReconnecting
     });
     const pollClosed = setInterval(() => {
       if (isPopupClosed(popup)) {
@@ -318,7 +354,13 @@ function createKlappayOne(config) {
       // 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)
+      onTimeout: () => settleOnce(openViaPopup),
+      // Not wrapped in settleOnce — like onPending/onConfirming, this is
+      // informational, never terminal. one-id drives this autonomously
+      // once it detects its own WalletConnect relay coming back from a
+      // background/foreground cycle; nothing here needs to send anything
+      // back into the iframe for it to act on.
+      onReconnecting: config.onReconnecting
     });
     function stop() {
       stopListening();

package/dist/react/index.d.ts

@@ -1,3 +1,5 @@
+type ReconnectState = 'started' | 'recovered' | 'failed';
+
 type KlappayButtonVariant = 'white' | 'yellow' | 'black';
 type KlappayButtonSize = 'sm' | 'md' | 'lg';
 type KlappayButtonLabel = 'full' | 'short';
@@ -26,6 +28,7 @@ interface KlappayOneConfig {
     onSuccess?: (result: PaymentResult) => void;
     onError?: (error: KlappayOneError) => void;
     onCancel?: (reason: 'user' | 'closed') => void;
+    onReconnecting?: (state: ReconnectState) => void;
 }
 
 declare function useKlappayOne(config: KlappayOneConfig): {

package/dist/react/index.js

@@ -3,11 +3,43 @@ import { useEffect, useRef } from "react";
 
 // src/core/bridge.ts
 var READY_TIMEOUT_MS = 1e4;
+var RECONNECT_STATES = ["started", "recovered", "failed"];
+function isPaymentResult(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const result = value;
+  return typeof result.txHash === "string" && typeof result.walletAddress === "string" && typeof result.network === "string" && typeof result.amount === "string" && typeof result.confirmedAt === "string";
+}
+function isKlappayOneError(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const error = value;
+  return typeof error.code === "string" && typeof error.message === "string";
+}
 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";
+  if (typeof data !== "object" || data === null) return false;
+  const envelope = data;
+  if (typeof envelope.type !== "string" || typeof envelope.requestId !== "string") return false;
+  switch (envelope.type) {
+    case "klappay:ready":
+    case "klappay:pending":
+    case "klappay:cancel":
+      return true;
+    case "klappay:resize":
+      return typeof envelope.height === "number";
+    case "klappay:confirming":
+      return typeof envelope.txHash === "string" && typeof envelope.network === "string";
+    case "klappay:success":
+      return isPaymentResult(envelope.result);
+    case "klappay:error":
+      return isKlappayOneError(envelope.error);
+    case "klappay:reconnecting":
+      return typeof envelope.state === "string" && RECONNECT_STATES.includes(envelope.state);
+    default:
+      return false;
+  }
 }
 function listen(klapOneOrigin, requestId, handlers) {
   let ready = false;
+  let lastReconnectState;
   const timeout = setTimeout(() => {
     if (!ready) handlers.onTimeout?.();
   }, READY_TIMEOUT_MS);
@@ -39,6 +71,11 @@ function listen(klapOneOrigin, requestId, handlers) {
       case "klappay:resize":
         handlers.onResize?.(message.height);
         return;
+      case "klappay:reconnecting":
+        if (message.state === lastReconnectState) return;
+        lastReconnectState = message.state;
+        handlers.onReconnecting?.(message.state);
+        return;
     }
   }
   window.addEventListener("message", onMessage);
@@ -56,12 +93,6 @@ function buildFrameUrl(params) {
   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 LOADING_FRAME_HEIGHT = 360;
@@ -148,6 +179,7 @@ function openIframe(url, onDismiss) {
   const frame = document.createElement("iframe");
   frame.className = "frame";
   frame.src = url;
+  frame.allow = "storage-access";
   backdrop.append(frame);
   shadow.append(style, backdrop);
   document.body.append(host);
@@ -229,7 +261,7 @@ function getGlobalConfig() {
   return globalConfig;
 }
 function resolveMode(config) {
-  return config.mode ?? (isMobileUserAgent(navigator.userAgent) ? "popup" : "iframe");
+  return config.mode ?? "iframe";
 }
 function createKlappayOne(config) {
   function open() {
@@ -271,7 +303,11 @@ function createKlappayOne(config) {
       onTimeout: () => {
         stop();
         config.onError?.(FRAME_TIMEOUT);
-      }
+      },
+      // A popup tab is exactly as exposed to backgrounding as an iframe
+      // is (see resolveMode's comment above) — never gated to the iframe
+      // path only.
+      onReconnecting: config.onReconnecting
     });
     const pollClosed = setInterval(() => {
       if (isPopupClosed(popup)) {
@@ -318,7 +354,13 @@ function createKlappayOne(config) {
       // 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)
+      onTimeout: () => settleOnce(openViaPopup),
+      // Not wrapped in settleOnce — like onPending/onConfirming, this is
+      // informational, never terminal. one-id drives this autonomously
+      // once it detects its own WalletConnect relay coming back from a
+      // background/foreground cycle; nothing here needs to send anything
+      // back into the iframe for it to act on.
+      onReconnecting: config.onReconnecting
     });
     function stop() {
       stopListening();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klappay/one",
-  "version": "1.4.0",
+  "version": "1.5.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": [