@klappay/one 1.1.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +2 -1
  2. package/dist/index.global.js +73 -28
  3. package/dist/index.js +174 -61
  4. package/dist/react/index.d.ts +2 -1
  5. package/dist/react/index.js +161 -56
  6. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -15,9 +15,10 @@ interface KlappayOneConfig {
15
15
  locale?: string;
16
16
  mode?: 'iframe' | 'popup';
17
17
  onReady?: () => void;
18
+ onPending?: () => void;
18
19
  onSuccess?: (result: PaymentResult) => void;
19
20
  onError?: (error: KlappayOneError) => void;
20
- onCancel?: () => void;
21
+ onCancel?: (reason: 'user' | 'closed') => void;
21
22
  }
22
23
  interface KlappayOne {
23
24
  open: () => void;
package/dist/index.global.js CHANGED
@@ -1,44 +1,89 @@
1
- "use strict";var KlappayOne=(()=>{var y=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var n in t)y(e,n,{get:t[n],enumerable:!0})},Q=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of w(t))!P.call(e,o)&&o!==n&&y(e,o,{get:()=>t[o],enumerable:!(a=L(t,o))||a.enumerable});return e};var D=e=>Q(y({},"__esModule",{value:!0}),e);var pe={};N(pe,{configure:()=>C,createKlappayOne:()=>d});function J(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 f(e,t,n){let a=!1,o=setTimeout(()=>{a||n.onTimeout?.()},1e4);function i(r){if(r.origin!==e||!J(r.data)||r.data.requestId!==t)return;let s=r.data;switch(s.type){case"klappay:ready":a=!0,clearTimeout(o),n.onReady?.();return;case"klappay:success":n.onSuccess?.(s.result);return;case"klappay:error":n.onError?.(s.error);return;case"klappay:cancel":n.onCancel?.();return;case"klappay:resize":n.onResize?.(s.height);return}}return window.addEventListener("message",i),()=>{clearTimeout(o),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 G=/Android|iPhone|iPad|iPod/i;function v(e){return G.test(e)}function X(){return`
1
+ "use strict";var KlappayOne=(()=>{var y=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var n in t)y(e,n,{get:t[n],enumerable:!0})},F=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of G(t))!Z.call(e,r)&&r!==n&&y(e,r,{get:()=>t[r],enumerable:!(a=Y(t,r))||a.enumerable});return e};var X=e=>F(y({},"__esModule",{value:!0}),e);var fe={};j(fe,{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,n){let a=!1,r=setTimeout(()=>{a||n.onTimeout?.()},1e4);function i(o){if(o.origin!==e||!V(o.data)||o.data.requestId!==t)return;let s=o.data;switch(s.type){case"klappay:ready":a=!0,clearTimeout(r),n.onReady?.();return;case"klappay:success":n.onSuccess?.(s.result);return;case"klappay:error":n.onError?.(s.error);return;case"klappay:cancel":n.onCancel?.("user");return;case"klappay:pending":n.onPending?.();return;case"klappay:resize":n.onResize?.(s.height);return}}return window.addEventListener("message",i),()=>{clearTimeout(r),window.removeEventListener("message",i)}}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 x(e){return q.test(e)}var b="cubic-bezier(0.16, 1, 0.3, 1)",Q=`
2
2
  .backdrop {
3
3
  position: fixed;
4
4
  inset: 0;
5
5
  background: rgba(0, 0, 0, 0.5);
6
6
  display: flex;
7
- align-items: center;
8
7
  justify-content: center;
8
+ /* "safe" keeps the top of the frame reachable by scrolling instead
9
+ of clipped off-screen \u2014 plain "center" alone can make overflowing
10
+ centered flex content unscrollable in that direction. The plain
11
+ center above is a fallback for browsers that don't understand the
12
+ safe keyword; an unsupported value is ignored, not applied. */
13
+ align-items: center;
14
+ align-items: safe center;
15
+ overflow-y: auto;
16
+ padding: 16px 0;
9
17
  z-index: 2147483647;
18
+ opacity: 0;
19
+ transition: opacity 320ms ${b};
20
+ scrollbar-width: thin;
21
+ scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
22
+ }
23
+ .backdrop.visible {
24
+ opacity: 1;
25
+ }
26
+ .backdrop::-webkit-scrollbar {
27
+ width: 8px;
28
+ }
29
+ .backdrop::-webkit-scrollbar-track {
30
+ background: transparent;
31
+ }
32
+ .backdrop::-webkit-scrollbar-thumb {
33
+ background: rgba(255, 255, 255, 0.3);
34
+ border-radius: 4px;
35
+ }
36
+ .backdrop::-webkit-scrollbar-thumb:hover {
37
+ background: rgba(255, 255, 255, 0.5);
10
38
  }
11
39
  .frame {
12
40
  width: 420px;
13
41
  max-width: calc(100vw - 32px);
14
- height: 720px;
15
- max-height: calc(100vh - 32px);
42
+ height: 360px;
43
+ min-height: min(480px, 70vh);
44
+ /* No max-height clamp \u2014 one-id measures its own content against the
45
+ height it's actually given via resize(), with no idea this box
46
+ might otherwise get cut shorter than that. Clamping here would
47
+ leave its content taller than what we then render, showing a
48
+ scrollbar inside the iframe itself that we have no way to style
49
+ (a different, cross-origin document). The backdrop above scrolls
50
+ instead when a real step genuinely doesn't fit the viewport. */
51
+ flex-shrink: 0;
16
52
  border: none;
17
53
  border-radius: 12px;
18
54
  background: #000;
19
- transition: height 0.15s ease;
55
+ opacity: 0;
56
+ transform: translateY(-32px) scale(0.96);
57
+ transition:
58
+ height 320ms ${b},
59
+ opacity 320ms ${b},
60
+ transform 320ms ${b};
61
+ }
62
+ .frame.visible {
63
+ opacity: 1;
64
+ transform: translateY(0) scale(1);
20
65
  }
21
- `}function O(e,t){let n=document.createElement("div"),a=n.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=X();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(o,i),document.body.append(n),{close:()=>n.remove(),resize:s=>{r.style.height=`${s}px`}}}var V="klappay-one";function B(e){let t=window.screenX+(window.outerWidth-420)/2,n=window.screenY+(window.outerHeight-720)/2;return window.open(e,V,`width=420,height=720,left=${t},top=${n}`)}function m(e){return e===null||e.closed}var Y={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},F={code:"FRAME_TIMEOUT",message:"The Klappay One popup did not respond in time."},q=500,x={};function C(e){x=e}function l(){return x}function H(e){return e.mode??(v(navigator.userAgent)?"popup":"iframe")}function d(e){function t(){H(e)==="popup"?n():a()}function n(){let o=crypto.randomUUID(),i=h({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:o,locale:e.locale}),r=B(i);if(m(r)){e.onError?.(Y);return}let s=f(e.origin,o,{onReady:e.onReady,onSuccess:u=>{p(),e.onSuccess?.(u)},onError:u=>{p(),e.onError?.(u)},onCancel:()=>{p(),e.onCancel?.()},onTimeout:()=>{p(),e.onError?.(F)}}),A=setInterval(()=>{m(r)&&(p(),e.onCancel?.())},q);function p(){clearInterval(A),s()}}function a(){let o=crypto.randomUUID(),i=h({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:o,locale:e.locale}),r=!1;function s(c){r||(r=!0,u(),c())}let A=O(i,()=>s(()=>e.onCancel?.())),p=f(e.origin,o,{onReady:e.onReady,onSuccess:c=>s(()=>e.onSuccess?.(c)),onError:c=>s(()=>e.onError?.(c)),onCancel:()=>s(()=>e.onCancel?.()),onResize:c=>A.resize(c),onTimeout:()=>s(n)});function u(){p(),A.close()}}return{open:t}}var g="data-klappay-one",U="data-klappay-one-origin",Z="data-klappay-one-locale",j="data-klappay-one-mode",k="data-klappay-one-wired",b="data-klappay-one-busy";function E(e){e.hasAttribute(k)||(e.setAttribute(k,""),e.addEventListener("click",()=>{if(e.hasAttribute(b))return;let t=e.getAttribute(g);if(!t)return;let n=e.getAttribute(U)??l().origin;if(!n){console.error(`[${g}] has no origin \u2014 set ${U} or call KlappayOne.configure({ origin }).`);return}let a=e.getAttribute(Z)??l().locale,o=e.getAttribute(j);e.setAttribute(b,"");let i=()=>{e.removeAttribute(b)};d({chargeId:t,origin:n,locale:a,mode:o==="iframe"||o==="popup"?o: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}]`))E(t)}function K(e=document.body){let t=new MutationObserver(n=>{for(let a of n)for(let o of a.addedNodes)if(o instanceof Element){o.hasAttribute(g)&&E(o);for(let i of o.querySelectorAll(`[${g}]`))E(i)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var T="klappay-button",S=["white","yellow","black"],z=["sm","md","lg"],W="black",_="md",$={sm:{height:"32px",fontSize:"13px",padding:"0 14px",logoSize:"14px"},md:{height:"40px",fontSize:"14px",padding:"0 18px",logoSize:"16px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px",logoSize:"18px"}},ee="data:image/png;base64,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",te="data:image/png;base64,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",ne="data:image/png;base64,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",oe={black:ee,yellow:ne,white:te},re={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function ie(e){return S.includes(e)}function ae(e){return z.includes(e)}var se=typeof HTMLElement<"u"?HTMLElement:class{},R=class e extends se{static get observedAttributes(){return["variant","size","charge-id","origin"]}#e;#t;#o=!1;constructor(){super();let t=this.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=e.#p(),this.#t=document.createElement("img"),this.#t.alt="",this.#t.setAttribute("aria-hidden","true");let a=document.createElement("span");a.textContent="Pay with Klappay",this.#e=document.createElement("button"),this.#e.type="button",this.#e.append(this.#t,a),this.#e.addEventListener("click",()=>this.#s()),t.append(n,this.#e),this.#r(),this.#i(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#r(),t==="size"&&this.#i(),(t==="charge-id"||t==="origin")&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return ie(t)?t:W}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return ae(t)?t:_}set size(t){this.setAttribute("size",t)}#r(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=oe[this.variant]}#i(){this.#e.setAttribute("data-size",this.size)}#a(){let t=this.getAttribute("charge-id"),n=this.getAttribute("origin")??l().origin;return!!(t&&n)}#n(){this.#e.disabled=this.#o||!this.#a()}#s(){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")??l().origin;if(!n){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,o=this.getAttribute("mode");this.#o=!0,this.#n();let i=()=>{this.#o=!1,this.#n()};d({chargeId:t,origin:n,locale:a,mode:o==="iframe"||o==="popup"?o: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#p(){let t=S.map(a=>{let{background:o,color:i,border:r}=re[a];return`button[data-variant="${a}"] { background: var(--klappay-background, ${o}); color: var(--klappay-color, ${i}); border: ${r}; }`}).join(`
22
- `),n=z.map(a=>{let{height:o,fontSize:i,padding:r,logoSize:s}=$[a];return`
23
- button[data-size="${a}"] { height: var(--klappay-button-height, ${o}); font-size: ${i}; padding: ${r}; }
24
- button[data-size="${a}"] img { width: ${s}; height: ${s}; }
25
- `}).join(`
66
+ `;function R(e,t){let n=document.createElement("div"),a=n.attachShadow({mode:"open"}),r=document.createElement("style");r.textContent=Q;let i=!0,o=document.createElement("div");o.className="backdrop",o.addEventListener("click",c=>{c.target===o&&i&&t()});let s=document.createElement("iframe");s.className="frame",s.src=e,o.append(s),a.append(r,o),document.body.append(n);function u(c){let f=o.scrollTop<=0,A=o.scrollTop+o.clientHeight>=o.scrollHeight;(c.deltaY<0&&f||c.deltaY>0&&A)&&c.preventDefault()}document.addEventListener("wheel",u,{passive:!1});let d=!1;function p(){d||(d=!0,o.classList.add("visible"),s.classList.add("visible"))}requestAnimationFrame(p),setTimeout(p,320);let l=!1;function N(){if(l)return;l=!0;let c=!1;function f(){c||(c=!0,document.removeEventListener("wheel",u),n.remove())}function A(D){D.target===o&&(o.removeEventListener("transitionend",A),f())}o.addEventListener("transitionend",A),setTimeout(f,370),o.classList.remove("visible"),s.classList.remove("visible")}return{close:N,resize:c=>{s.style.height=`${c}px`},setDismissable:c=>{i=c}}}var J="klappay-one";function S(e){let t=window.screenX+(window.outerWidth-420)/2,n=window.screenY+(window.outerHeight-720)/2;return window.open(e,J,`width=420,height=720,left=${t},top=${n}`)}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,C={};function O(e){C=e}function g(){return C}function ee(e){return e.mode??(x(navigator.userAgent)?"popup":"iframe")}function h(e){function t(){ee(e)==="popup"?n():a()}function n(){let r=crypto.randomUUID(),i=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:r,locale:e.locale}),o=S(i);if(w(o)){e.onError?.(W);return}let s=v(e.origin,r,{onReady:e.onReady,onPending:e.onPending,onSuccess:p=>{d(),e.onSuccess?.(p)},onError:p=>{d(),e.onError?.(p)},onCancel:p=>{d(),e.onCancel?.(p)},onTimeout:()=>{d(),e.onError?.(_)}}),u=setInterval(()=>{w(o)&&(d(),e.onCancel?.("closed"))},$);function d(){clearInterval(u),s()}}function a(){let r=crypto.randomUUID(),i=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:r,locale:e.locale}),o=!1;function s(l){o||(o=!0,p(),l())}let u=R(i,()=>s(()=>e.onCancel?.("user"))),d=v(e.origin,r,{onReady:e.onReady,onPending:()=>{u.setDismissable(!1),e.onPending?.()},onSuccess:l=>s(()=>e.onSuccess?.(l)),onError:l=>s(()=>e.onError?.(l)),onCancel:l=>s(()=>e.onCancel?.(l)),onResize:l=>u.resize(l),onTimeout:()=>s(n)});function p(){d(),u.close()}}return{open:t}}var m="data-klappay-one",k="data-klappay-one-origin",te="data-klappay-one-locale",ne="data-klappay-one-mode",P="data-klappay-one-wired",I="data-klappay-one-busy";function T(e){e.hasAttribute(P)||(e.setAttribute(P,""),e.addEventListener("click",()=>{if(e.hasAttribute(I))return;let t=e.getAttribute(m);if(!t)return;let n=e.getAttribute(k)??g().origin;if(!n){console.error(`[${m}] has no origin \u2014 set ${k} or call KlappayOne.configure({ origin }).`);return}let a=e.getAttribute(te)??g().locale,r=e.getAttribute(ne);e.setAttribute(I,"");let i=()=>{e.removeAttribute(I)};h({chargeId:t,origin:n,locale:a,mode:r==="iframe"||r==="popup"?r:void 0,onPending:()=>{e.dispatchEvent(new CustomEvent("pending"))},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 U(e=document){for(let t of e.querySelectorAll(`[${m}]`))T(t)}function M(e=document.body){let t=new MutationObserver(n=>{for(let a of n)for(let r of a.addedNodes)if(r instanceof Element){r.hasAttribute(m)&&T(r);for(let i of r.querySelectorAll(`[${m}]`))T(i)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var L="klappay-button",K=["white","yellow","black"],H=["sm","md","lg"],oe="black",re="md",ie={sm:{height:"32px",fontSize:"13px",padding:"0 14px",logoSize:"14px"},md:{height:"40px",fontSize:"14px",padding:"0 18px",logoSize:"16px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px",logoSize:"18px"}},ae="data:image/webp;base64,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",se="data:image/webp;base64,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",le="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==",ce={black:ae,yellow:le,white:se},de={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function pe(e){return K.includes(e)}function ue(e){return H.includes(e)}var ge=typeof HTMLElement<"u"?HTMLElement:class{},he=(()=>{let e=K.map(n=>{let{background:a,color:r,border:i}=de[n];return`button[data-variant="${n}"] { background: var(--klappay-background, ${a}); color: var(--klappay-color, ${r}); border: ${i}; }`}).join(`
67
+ `),t=H.map(n=>{let{height:a,fontSize:r,padding:i,logoSize:o}=ie[n];return`
68
+ button[data-size="${n}"] { height: var(--klappay-button-height, ${a}); font-size: ${r}; padding: ${i}; }
69
+ button[data-size="${n}"] img { width: ${o}; height: ${o}; }
70
+ `}).join(`
26
71
  `);return`
27
- button {
28
- display: inline-flex;
29
- align-items: center;
30
- justify-content: center;
31
- gap: 8px;
32
- border-radius: var(--klappay-radius, 8px);
33
- font-family: var(--klappay-font-family, system-ui, sans-serif);
34
- font-weight: 600;
35
- cursor: pointer;
36
- transition: opacity 0.15s ease;
37
- }
38
- button img { flex-shrink: 0; }
39
- button:hover { opacity: 0.9; }
40
- button:active { opacity: 0.8; }
41
- button:disabled { opacity: 0.6; cursor: not-allowed; }
42
- ${t}
43
- ${n}
44
- `}};function M(){typeof customElements>"u"||customElements.get(T)||customElements.define(T,R)}M();typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>I()):I(),K());return D(pe);})();
72
+ button {
73
+ display: inline-flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ gap: 8px;
77
+ border-radius: var(--klappay-radius, 8px);
78
+ font-family: var(--klappay-font-family, system-ui, sans-serif);
79
+ font-weight: 600;
80
+ cursor: pointer;
81
+ transition: opacity 0.15s ease;
82
+ }
83
+ button img { flex-shrink: 0; }
84
+ button:hover { opacity: 0.9; }
85
+ button:active { opacity: 0.8; }
86
+ button:disabled { opacity: 0.6; cursor: not-allowed; }
87
+ ${e}
88
+ ${t}
89
+ `})(),B=class extends ge{static get observedAttributes(){return["variant","size","charge-id","origin"]}#e;#t;#o=!1;constructor(){super();let t=this.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=he,this.#t=document.createElement("img"),this.#t.alt="",this.#t.setAttribute("aria-hidden","true");let a=document.createElement("span");a.textContent="Pay with Klappay",this.#e=document.createElement("button"),this.#e.type="button",this.#e.append(this.#t,a),this.#e.addEventListener("click",()=>this.#s()),t.append(n,this.#e),this.#r(),this.#i(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#r(),t==="size"&&this.#i(),(t==="charge-id"||t==="origin")&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return pe(t)?t:oe}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return ue(t)?t:re}set size(t){this.setAttribute("size",t)}#r(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=ce[this.variant]}#i(){this.#e.setAttribute("data-size",this.size)}#a(){let t=this.getAttribute("charge-id"),n=this.getAttribute("origin")??g().origin;return!!(t&&n)}#n(){this.#e.disabled=this.#o||!this.#a()}#s(){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 a=this.getAttribute("locale")??g().locale,r=this.getAttribute("mode");this.#o=!0,this.#n();let i=()=>{this.#o=!1,this.#n()};h({chargeId:t,origin:n,locale:a,mode:r==="iframe"||r==="popup"?r:void 0,onPending:()=>{this.dispatchEvent(new CustomEvent("pending"))},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 z(){typeof customElements>"u"||customElements.get(L)||customElements.define(L,B)}z();if(typeof document<"u"){let e=function(){U(),M()};me=e,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()}var me;return X(fe);})();
package/dist/index.js CHANGED
@@ -25,7 +25,10 @@ function listen(klapOneOrigin, requestId, handlers) {
25
25
  handlers.onError?.(message.error);
26
26
  return;
27
27
  case "klappay:cancel":
28
- handlers.onCancel?.();
28
+ handlers.onCancel?.("user");
29
+ return;
30
+ case "klappay:pending":
31
+ handlers.onPending?.();
29
32
  return;
30
33
  case "klappay:resize":
31
34
  handlers.onResize?.(message.height);
@@ -55,39 +58,86 @@ function isMobileUserAgent(userAgent) {
55
58
 
56
59
  // src/core/iframe.ts
57
60
  var FRAME_WIDTH = 420;
58
- var INITIAL_FRAME_HEIGHT = 720;
59
- function css() {
60
- return `
61
+ var LOADING_FRAME_HEIGHT = 360;
62
+ var MIN_FRAME_HEIGHT = 480;
63
+ var TRANSITION_MS = 320;
64
+ var TRANSITION_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
65
+ var IFRAME_CSS = `
61
66
  .backdrop {
62
67
  position: fixed;
63
68
  inset: 0;
64
69
  background: rgba(0, 0, 0, 0.5);
65
70
  display: flex;
66
- align-items: center;
67
71
  justify-content: center;
72
+ /* "safe" keeps the top of the frame reachable by scrolling instead
73
+ of clipped off-screen \u2014 plain "center" alone can make overflowing
74
+ centered flex content unscrollable in that direction. The plain
75
+ center above is a fallback for browsers that don't understand the
76
+ safe keyword; an unsupported value is ignored, not applied. */
77
+ align-items: center;
78
+ align-items: safe center;
79
+ overflow-y: auto;
80
+ padding: 16px 0;
68
81
  z-index: 2147483647;
82
+ opacity: 0;
83
+ transition: opacity ${TRANSITION_MS}ms ${TRANSITION_EASING};
84
+ scrollbar-width: thin;
85
+ scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
86
+ }
87
+ .backdrop.visible {
88
+ opacity: 1;
89
+ }
90
+ .backdrop::-webkit-scrollbar {
91
+ width: 8px;
92
+ }
93
+ .backdrop::-webkit-scrollbar-track {
94
+ background: transparent;
95
+ }
96
+ .backdrop::-webkit-scrollbar-thumb {
97
+ background: rgba(255, 255, 255, 0.3);
98
+ border-radius: 4px;
99
+ }
100
+ .backdrop::-webkit-scrollbar-thumb:hover {
101
+ background: rgba(255, 255, 255, 0.5);
69
102
  }
70
103
  .frame {
71
104
  width: ${FRAME_WIDTH}px;
72
105
  max-width: calc(100vw - 32px);
73
- height: ${INITIAL_FRAME_HEIGHT}px;
74
- max-height: calc(100vh - 32px);
106
+ height: ${LOADING_FRAME_HEIGHT}px;
107
+ min-height: min(${MIN_FRAME_HEIGHT}px, 70vh);
108
+ /* No max-height clamp \u2014 one-id measures its own content against the
109
+ height it's actually given via resize(), with no idea this box
110
+ might otherwise get cut shorter than that. Clamping here would
111
+ leave its content taller than what we then render, showing a
112
+ scrollbar inside the iframe itself that we have no way to style
113
+ (a different, cross-origin document). The backdrop above scrolls
114
+ instead when a real step genuinely doesn't fit the viewport. */
115
+ flex-shrink: 0;
75
116
  border: none;
76
117
  border-radius: 12px;
77
118
  background: #000;
78
- transition: height 0.15s ease;
119
+ opacity: 0;
120
+ transform: translateY(-32px) scale(0.96);
121
+ transition:
122
+ height ${TRANSITION_MS}ms ${TRANSITION_EASING},
123
+ opacity ${TRANSITION_MS}ms ${TRANSITION_EASING},
124
+ transform ${TRANSITION_MS}ms ${TRANSITION_EASING};
125
+ }
126
+ .frame.visible {
127
+ opacity: 1;
128
+ transform: translateY(0) scale(1);
79
129
  }
80
130
  `;
81
- }
82
131
  function openIframe(url, onDismiss) {
83
132
  const host = document.createElement("div");
84
133
  const shadow = host.attachShadow({ mode: "open" });
85
134
  const style = document.createElement("style");
86
- style.textContent = css();
135
+ style.textContent = IFRAME_CSS;
136
+ let dismissable = true;
87
137
  const backdrop = document.createElement("div");
88
138
  backdrop.className = "backdrop";
89
139
  backdrop.addEventListener("click", (event) => {
90
- if (event.target === backdrop) onDismiss();
140
+ if (event.target === backdrop && dismissable) onDismiss();
91
141
  });
92
142
  const frame = document.createElement("iframe");
93
143
  frame.className = "frame";
@@ -95,10 +145,51 @@ function openIframe(url, onDismiss) {
95
145
  backdrop.append(frame);
96
146
  shadow.append(style, backdrop);
97
147
  document.body.append(host);
148
+ function preventScrollChaining(event) {
149
+ const atTop = backdrop.scrollTop <= 0;
150
+ const atBottom = backdrop.scrollTop + backdrop.clientHeight >= backdrop.scrollHeight;
151
+ if (event.deltaY < 0 && atTop || event.deltaY > 0 && atBottom) {
152
+ event.preventDefault();
153
+ }
154
+ }
155
+ document.addEventListener("wheel", preventScrollChaining, { passive: false });
156
+ let entered = false;
157
+ function enter() {
158
+ if (entered) return;
159
+ entered = true;
160
+ backdrop.classList.add("visible");
161
+ frame.classList.add("visible");
162
+ }
163
+ requestAnimationFrame(enter);
164
+ setTimeout(enter, TRANSITION_MS);
165
+ let closed = false;
166
+ function close() {
167
+ if (closed) return;
168
+ closed = true;
169
+ let removed = false;
170
+ function remove() {
171
+ if (removed) return;
172
+ removed = true;
173
+ document.removeEventListener("wheel", preventScrollChaining);
174
+ host.remove();
175
+ }
176
+ function onTransitionEnd(event) {
177
+ if (event.target !== backdrop) return;
178
+ backdrop.removeEventListener("transitionend", onTransitionEnd);
179
+ remove();
180
+ }
181
+ backdrop.addEventListener("transitionend", onTransitionEnd);
182
+ setTimeout(remove, TRANSITION_MS + 50);
183
+ backdrop.classList.remove("visible");
184
+ frame.classList.remove("visible");
185
+ }
98
186
  return {
99
- close: () => host.remove(),
187
+ close,
100
188
  resize: (height) => {
101
189
  frame.style.height = `${height}px`;
190
+ },
191
+ setDismissable: (canDismiss) => {
192
+ dismissable = canDismiss;
102
193
  }
103
194
  };
104
195
  }
@@ -160,6 +251,7 @@ function createKlappayOne(config) {
160
251
  }
161
252
  const stopListening = listen(config.origin, requestId, {
162
253
  onReady: config.onReady,
254
+ onPending: config.onPending,
163
255
  onSuccess: (result) => {
164
256
  stop();
165
257
  config.onSuccess?.(result);
@@ -168,9 +260,9 @@ function createKlappayOne(config) {
168
260
  stop();
169
261
  config.onError?.(error);
170
262
  },
171
- onCancel: () => {
263
+ onCancel: (reason) => {
172
264
  stop();
173
- config.onCancel?.();
265
+ config.onCancel?.(reason);
174
266
  },
175
267
  onTimeout: () => {
176
268
  stop();
@@ -180,7 +272,7 @@ function createKlappayOne(config) {
180
272
  const pollClosed = setInterval(() => {
181
273
  if (isPopupClosed(popup)) {
182
274
  stop();
183
- config.onCancel?.();
275
+ config.onCancel?.("closed");
184
276
  }
185
277
  }, POPUP_CLOSED_POLL_MS);
186
278
  function stop() {
@@ -203,12 +295,19 @@ function createKlappayOne(config) {
203
295
  stop();
204
296
  run();
205
297
  }
206
- const frame = openIframe(url, () => settleOnce(() => config.onCancel?.()));
298
+ const frame = openIframe(url, () => settleOnce(() => config.onCancel?.("user")));
207
299
  const stopListening = listen(config.origin, requestId, {
208
300
  onReady: config.onReady,
301
+ // Not wrapped in settleOnce — this isn't a terminal outcome, and the
302
+ // payment is now past the point where a backdrop dismiss should be
303
+ // allowed to silently orphan it.
304
+ onPending: () => {
305
+ frame.setDismissable(false);
306
+ config.onPending?.();
307
+ },
209
308
  onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
210
309
  onError: (error) => settleOnce(() => config.onError?.(error)),
211
- onCancel: () => settleOnce(() => config.onCancel?.()),
310
+ onCancel: (reason) => settleOnce(() => config.onCancel?.(reason)),
212
311
  onResize: (height) => frame.resize(height),
213
312
  // A merchant CSP blocking frame-src/child-src for this domain would
214
313
  // otherwise leave the iframe silently blank forever — one automatic
@@ -256,6 +355,9 @@ function wire(element) {
256
355
  origin,
257
356
  locale,
258
357
  mode: mode === "iframe" || mode === "popup" ? mode : void 0,
358
+ onPending: () => {
359
+ element.dispatchEvent(new CustomEvent("pending"));
360
+ },
259
361
  onSuccess: (result) => {
260
362
  clearBusy();
261
363
  element.dispatchEvent(new CustomEvent("success", { detail: result }));
@@ -264,9 +366,9 @@ function wire(element) {
264
366
  clearBusy();
265
367
  element.dispatchEvent(new CustomEvent("error", { detail: error }));
266
368
  },
267
- onCancel: () => {
369
+ onCancel: (reason) => {
268
370
  clearBusy();
269
- element.dispatchEvent(new CustomEvent("cancel"));
371
+ element.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
270
372
  }
271
373
  }).open();
272
374
  });
@@ -299,9 +401,9 @@ var SIZE_STYLES = {
299
401
  md: { height: "40px", fontSize: "14px", padding: "0 18px", logoSize: "16px" },
300
402
  lg: { height: "48px", fontSize: "16px", padding: "0 24px", logoSize: "18px" }
301
403
  };
302
- var LOGO_NO_BLACK_INK_DATA_URI = "data:image/png;base64,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";
303
- var LOGO_BLACK_INK_DATA_URI = "data:image/png;base64,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";
304
- var LOGO_BLACK_WHITE_DATA_URI = "data:image/png;base64,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";
404
+ var LOGO_NO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
405
+ var LOGO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
406
+ var LOGO_BLACK_WHITE_DATA_URI = "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==";
305
407
  var VARIANT_LOGO_DATA_URI = {
306
408
  black: LOGO_NO_BLACK_INK_DATA_URI,
307
409
  yellow: LOGO_BLACK_WHITE_DATA_URI,
@@ -320,7 +422,39 @@ function isSize(value) {
320
422
  }
321
423
  var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
322
424
  };
323
- var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase {
425
+ var BUTTON_CSS = (() => {
426
+ const variantRules = VARIANTS.map((variant) => {
427
+ const { background, color, border } = VARIANT_STYLES[variant];
428
+ return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
429
+ }).join("\n");
430
+ const sizeRules = SIZES.map((size) => {
431
+ const { height, fontSize, padding, logoSize } = SIZE_STYLES[size];
432
+ return `
433
+ button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }
434
+ button[data-size="${size}"] img { width: ${logoSize}; height: ${logoSize}; }
435
+ `;
436
+ }).join("\n");
437
+ return `
438
+ button {
439
+ display: inline-flex;
440
+ align-items: center;
441
+ justify-content: center;
442
+ gap: 8px;
443
+ border-radius: var(--klappay-radius, 8px);
444
+ font-family: var(--klappay-font-family, system-ui, sans-serif);
445
+ font-weight: 600;
446
+ cursor: pointer;
447
+ transition: opacity 0.15s ease;
448
+ }
449
+ button img { flex-shrink: 0; }
450
+ button:hover { opacity: 0.9; }
451
+ button:active { opacity: 0.8; }
452
+ button:disabled { opacity: 0.6; cursor: not-allowed; }
453
+ ${variantRules}
454
+ ${sizeRules}
455
+ `;
456
+ })();
457
+ var KlappayButtonElement = class extends KlappayButtonBase {
324
458
  static get observedAttributes() {
325
459
  return ["variant", "size", "charge-id", "origin"];
326
460
  }
@@ -331,7 +465,7 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
331
465
  super();
332
466
  const shadow = this.attachShadow({ mode: "open" });
333
467
  const style = document.createElement("style");
334
- style.textContent = _KlappayButtonElement.#css();
468
+ style.textContent = BUTTON_CSS;
335
469
  this.#logo = document.createElement("img");
336
470
  this.#logo.alt = "";
337
471
  this.#logo.setAttribute("aria-hidden", "true");
@@ -411,6 +545,12 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
411
545
  origin,
412
546
  locale,
413
547
  mode: mode === "iframe" || mode === "popup" ? mode : void 0,
548
+ // Not a terminal outcome — the button stays busy/disabled exactly as
549
+ // it already is, this only forwards the signal for a page that wants
550
+ // to persist state before the wallet responds.
551
+ onPending: () => {
552
+ this.dispatchEvent(new CustomEvent("pending"));
553
+ },
414
554
  onSuccess: (result) => {
415
555
  reenable();
416
556
  this.dispatchEvent(new CustomEvent("success", { detail: result }));
@@ -419,44 +559,12 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
419
559
  reenable();
420
560
  this.dispatchEvent(new CustomEvent("error", { detail: error }));
421
561
  },
422
- onCancel: () => {
562
+ onCancel: (reason) => {
423
563
  reenable();
424
- this.dispatchEvent(new CustomEvent("cancel"));
564
+ this.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
425
565
  }
426
566
  }).open();
427
567
  }
428
- static #css() {
429
- const variantRules = VARIANTS.map((variant) => {
430
- const { background, color, border } = VARIANT_STYLES[variant];
431
- return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
432
- }).join("\n");
433
- const sizeRules = SIZES.map((size) => {
434
- const { height, fontSize, padding, logoSize } = SIZE_STYLES[size];
435
- return `
436
- button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }
437
- button[data-size="${size}"] img { width: ${logoSize}; height: ${logoSize}; }
438
- `;
439
- }).join("\n");
440
- return `
441
- button {
442
- display: inline-flex;
443
- align-items: center;
444
- justify-content: center;
445
- gap: 8px;
446
- border-radius: var(--klappay-radius, 8px);
447
- font-family: var(--klappay-font-family, system-ui, sans-serif);
448
- font-weight: 600;
449
- cursor: pointer;
450
- transition: opacity 0.15s ease;
451
- }
452
- button img { flex-shrink: 0; }
453
- button:hover { opacity: 0.9; }
454
- button:active { opacity: 0.8; }
455
- button:disabled { opacity: 0.6; cursor: not-allowed; }
456
- ${variantRules}
457
- ${sizeRules}
458
- `;
459
- }
460
568
  };
461
569
  function registerKlappayButton() {
462
570
  if (typeof customElements === "undefined") return;
@@ -468,13 +576,18 @@ function registerKlappayButton() {
468
576
  // src/index.ts
469
577
  registerKlappayButton();
470
578
  if (typeof document !== "undefined") {
579
+ let init = function() {
580
+ wireExisting();
581
+ observeNewElements();
582
+ };
583
+ init2 = init;
471
584
  if (document.readyState === "loading") {
472
- document.addEventListener("DOMContentLoaded", () => wireExisting());
585
+ document.addEventListener("DOMContentLoaded", init);
473
586
  } else {
474
- wireExisting();
587
+ init();
475
588
  }
476
- observeNewElements();
477
589
  }
590
+ var init2;
478
591
  export {
479
592
  configure,
480
593
  createKlappayOne
package/dist/react/index.d.ts CHANGED
@@ -17,9 +17,10 @@ interface KlappayOneConfig {
17
17
  locale?: string;
18
18
  mode?: 'iframe' | 'popup';
19
19
  onReady?: () => void;
20
+ onPending?: () => void;
20
21
  onSuccess?: (result: PaymentResult) => void;
21
22
  onError?: (error: KlappayOneError) => void;
22
- onCancel?: () => void;
23
+ onCancel?: (reason: 'user' | 'closed') => void;
23
24
  }
24
25
 
25
26
  declare function useKlappayOne(config: KlappayOneConfig): {
package/dist/react/index.js CHANGED
@@ -28,7 +28,10 @@ function listen(klapOneOrigin, requestId, handlers) {
28
28
  handlers.onError?.(message.error);
29
29
  return;
30
30
  case "klappay:cancel":
31
- handlers.onCancel?.();
31
+ handlers.onCancel?.("user");
32
+ return;
33
+ case "klappay:pending":
34
+ handlers.onPending?.();
32
35
  return;
33
36
  case "klappay:resize":
34
37
  handlers.onResize?.(message.height);
@@ -58,39 +61,86 @@ function isMobileUserAgent(userAgent) {
58
61
 
59
62
  // src/core/iframe.ts
60
63
  var FRAME_WIDTH = 420;
61
- var INITIAL_FRAME_HEIGHT = 720;
62
- function css() {
63
- return `
64
+ var LOADING_FRAME_HEIGHT = 360;
65
+ var MIN_FRAME_HEIGHT = 480;
66
+ var TRANSITION_MS = 320;
67
+ var TRANSITION_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
68
+ var IFRAME_CSS = `
64
69
  .backdrop {
65
70
  position: fixed;
66
71
  inset: 0;
67
72
  background: rgba(0, 0, 0, 0.5);
68
73
  display: flex;
69
- align-items: center;
70
74
  justify-content: center;
75
+ /* "safe" keeps the top of the frame reachable by scrolling instead
76
+ of clipped off-screen \u2014 plain "center" alone can make overflowing
77
+ centered flex content unscrollable in that direction. The plain
78
+ center above is a fallback for browsers that don't understand the
79
+ safe keyword; an unsupported value is ignored, not applied. */
80
+ align-items: center;
81
+ align-items: safe center;
82
+ overflow-y: auto;
83
+ padding: 16px 0;
71
84
  z-index: 2147483647;
85
+ opacity: 0;
86
+ transition: opacity ${TRANSITION_MS}ms ${TRANSITION_EASING};
87
+ scrollbar-width: thin;
88
+ scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
89
+ }
90
+ .backdrop.visible {
91
+ opacity: 1;
92
+ }
93
+ .backdrop::-webkit-scrollbar {
94
+ width: 8px;
95
+ }
96
+ .backdrop::-webkit-scrollbar-track {
97
+ background: transparent;
98
+ }
99
+ .backdrop::-webkit-scrollbar-thumb {
100
+ background: rgba(255, 255, 255, 0.3);
101
+ border-radius: 4px;
102
+ }
103
+ .backdrop::-webkit-scrollbar-thumb:hover {
104
+ background: rgba(255, 255, 255, 0.5);
72
105
  }
73
106
  .frame {
74
107
  width: ${FRAME_WIDTH}px;
75
108
  max-width: calc(100vw - 32px);
76
- height: ${INITIAL_FRAME_HEIGHT}px;
77
- max-height: calc(100vh - 32px);
109
+ height: ${LOADING_FRAME_HEIGHT}px;
110
+ min-height: min(${MIN_FRAME_HEIGHT}px, 70vh);
111
+ /* No max-height clamp \u2014 one-id measures its own content against the
112
+ height it's actually given via resize(), with no idea this box
113
+ might otherwise get cut shorter than that. Clamping here would
114
+ leave its content taller than what we then render, showing a
115
+ scrollbar inside the iframe itself that we have no way to style
116
+ (a different, cross-origin document). The backdrop above scrolls
117
+ instead when a real step genuinely doesn't fit the viewport. */
118
+ flex-shrink: 0;
78
119
  border: none;
79
120
  border-radius: 12px;
80
121
  background: #000;
81
- transition: height 0.15s ease;
122
+ opacity: 0;
123
+ transform: translateY(-32px) scale(0.96);
124
+ transition:
125
+ height ${TRANSITION_MS}ms ${TRANSITION_EASING},
126
+ opacity ${TRANSITION_MS}ms ${TRANSITION_EASING},
127
+ transform ${TRANSITION_MS}ms ${TRANSITION_EASING};
128
+ }
129
+ .frame.visible {
130
+ opacity: 1;
131
+ transform: translateY(0) scale(1);
82
132
  }
83
133
  `;
84
- }
85
134
  function openIframe(url, onDismiss) {
86
135
  const host = document.createElement("div");
87
136
  const shadow = host.attachShadow({ mode: "open" });
88
137
  const style = document.createElement("style");
89
- style.textContent = css();
138
+ style.textContent = IFRAME_CSS;
139
+ let dismissable = true;
90
140
  const backdrop = document.createElement("div");
91
141
  backdrop.className = "backdrop";
92
142
  backdrop.addEventListener("click", (event) => {
93
- if (event.target === backdrop) onDismiss();
143
+ if (event.target === backdrop && dismissable) onDismiss();
94
144
  });
95
145
  const frame = document.createElement("iframe");
96
146
  frame.className = "frame";
@@ -98,10 +148,51 @@ function openIframe(url, onDismiss) {
98
148
  backdrop.append(frame);
99
149
  shadow.append(style, backdrop);
100
150
  document.body.append(host);
151
+ function preventScrollChaining(event) {
152
+ const atTop = backdrop.scrollTop <= 0;
153
+ const atBottom = backdrop.scrollTop + backdrop.clientHeight >= backdrop.scrollHeight;
154
+ if (event.deltaY < 0 && atTop || event.deltaY > 0 && atBottom) {
155
+ event.preventDefault();
156
+ }
157
+ }
158
+ document.addEventListener("wheel", preventScrollChaining, { passive: false });
159
+ let entered = false;
160
+ function enter() {
161
+ if (entered) return;
162
+ entered = true;
163
+ backdrop.classList.add("visible");
164
+ frame.classList.add("visible");
165
+ }
166
+ requestAnimationFrame(enter);
167
+ setTimeout(enter, TRANSITION_MS);
168
+ let closed = false;
169
+ function close() {
170
+ if (closed) return;
171
+ closed = true;
172
+ let removed = false;
173
+ function remove() {
174
+ if (removed) return;
175
+ removed = true;
176
+ document.removeEventListener("wheel", preventScrollChaining);
177
+ host.remove();
178
+ }
179
+ function onTransitionEnd(event) {
180
+ if (event.target !== backdrop) return;
181
+ backdrop.removeEventListener("transitionend", onTransitionEnd);
182
+ remove();
183
+ }
184
+ backdrop.addEventListener("transitionend", onTransitionEnd);
185
+ setTimeout(remove, TRANSITION_MS + 50);
186
+ backdrop.classList.remove("visible");
187
+ frame.classList.remove("visible");
188
+ }
101
189
  return {
102
- close: () => host.remove(),
190
+ close,
103
191
  resize: (height) => {
104
192
  frame.style.height = `${height}px`;
193
+ },
194
+ setDismissable: (canDismiss) => {
195
+ dismissable = canDismiss;
105
196
  }
106
197
  };
107
198
  }
@@ -160,6 +251,7 @@ function createKlappayOne(config) {
160
251
  }
161
252
  const stopListening = listen(config.origin, requestId, {
162
253
  onReady: config.onReady,
254
+ onPending: config.onPending,
163
255
  onSuccess: (result) => {
164
256
  stop();
165
257
  config.onSuccess?.(result);
@@ -168,9 +260,9 @@ function createKlappayOne(config) {
168
260
  stop();
169
261
  config.onError?.(error);
170
262
  },
171
- onCancel: () => {
263
+ onCancel: (reason) => {
172
264
  stop();
173
- config.onCancel?.();
265
+ config.onCancel?.(reason);
174
266
  },
175
267
  onTimeout: () => {
176
268
  stop();
@@ -180,7 +272,7 @@ function createKlappayOne(config) {
180
272
  const pollClosed = setInterval(() => {
181
273
  if (isPopupClosed(popup)) {
182
274
  stop();
183
- config.onCancel?.();
275
+ config.onCancel?.("closed");
184
276
  }
185
277
  }, POPUP_CLOSED_POLL_MS);
186
278
  function stop() {
@@ -203,12 +295,19 @@ function createKlappayOne(config) {
203
295
  stop();
204
296
  run();
205
297
  }
206
- const frame = openIframe(url, () => settleOnce(() => config.onCancel?.()));
298
+ const frame = openIframe(url, () => settleOnce(() => config.onCancel?.("user")));
207
299
  const stopListening = listen(config.origin, requestId, {
208
300
  onReady: config.onReady,
301
+ // Not wrapped in settleOnce — this isn't a terminal outcome, and the
302
+ // payment is now past the point where a backdrop dismiss should be
303
+ // allowed to silently orphan it.
304
+ onPending: () => {
305
+ frame.setDismissable(false);
306
+ config.onPending?.();
307
+ },
209
308
  onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
210
309
  onError: (error) => settleOnce(() => config.onError?.(error)),
211
- onCancel: () => settleOnce(() => config.onCancel?.()),
310
+ onCancel: (reason) => settleOnce(() => config.onCancel?.(reason)),
212
311
  onResize: (height) => frame.resize(height),
213
312
  // A merchant CSP blocking frame-src/child-src for this domain would
214
313
  // otherwise leave the iframe silently blank forever — one automatic
@@ -235,9 +334,9 @@ var SIZE_STYLES = {
235
334
  md: { height: "40px", fontSize: "14px", padding: "0 18px", logoSize: "16px" },
236
335
  lg: { height: "48px", fontSize: "16px", padding: "0 24px", logoSize: "18px" }
237
336
  };
238
- var LOGO_NO_BLACK_INK_DATA_URI = "data:image/png;base64,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";
239
- var LOGO_BLACK_INK_DATA_URI = "data:image/png;base64,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";
240
- var LOGO_BLACK_WHITE_DATA_URI = "data:image/png;base64,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";
337
+ var LOGO_NO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
338
+ var LOGO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
339
+ var LOGO_BLACK_WHITE_DATA_URI = "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==";
241
340
  var VARIANT_LOGO_DATA_URI = {
242
341
  black: LOGO_NO_BLACK_INK_DATA_URI,
243
342
  yellow: LOGO_BLACK_WHITE_DATA_URI,
@@ -256,7 +355,39 @@ function isSize(value) {
256
355
  }
257
356
  var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
258
357
  };
259
- var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase {
358
+ var BUTTON_CSS = (() => {
359
+ const variantRules = VARIANTS.map((variant) => {
360
+ const { background, color, border } = VARIANT_STYLES[variant];
361
+ return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
362
+ }).join("\n");
363
+ const sizeRules = SIZES.map((size) => {
364
+ const { height, fontSize, padding, logoSize } = SIZE_STYLES[size];
365
+ return `
366
+ button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }
367
+ button[data-size="${size}"] img { width: ${logoSize}; height: ${logoSize}; }
368
+ `;
369
+ }).join("\n");
370
+ return `
371
+ button {
372
+ display: inline-flex;
373
+ align-items: center;
374
+ justify-content: center;
375
+ gap: 8px;
376
+ border-radius: var(--klappay-radius, 8px);
377
+ font-family: var(--klappay-font-family, system-ui, sans-serif);
378
+ font-weight: 600;
379
+ cursor: pointer;
380
+ transition: opacity 0.15s ease;
381
+ }
382
+ button img { flex-shrink: 0; }
383
+ button:hover { opacity: 0.9; }
384
+ button:active { opacity: 0.8; }
385
+ button:disabled { opacity: 0.6; cursor: not-allowed; }
386
+ ${variantRules}
387
+ ${sizeRules}
388
+ `;
389
+ })();
390
+ var KlappayButtonElement = class extends KlappayButtonBase {
260
391
  static get observedAttributes() {
261
392
  return ["variant", "size", "charge-id", "origin"];
262
393
  }
@@ -267,7 +398,7 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
267
398
  super();
268
399
  const shadow = this.attachShadow({ mode: "open" });
269
400
  const style = document.createElement("style");
270
- style.textContent = _KlappayButtonElement.#css();
401
+ style.textContent = BUTTON_CSS;
271
402
  this.#logo = document.createElement("img");
272
403
  this.#logo.alt = "";
273
404
  this.#logo.setAttribute("aria-hidden", "true");
@@ -347,6 +478,12 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
347
478
  origin,
348
479
  locale,
349
480
  mode: mode === "iframe" || mode === "popup" ? mode : void 0,
481
+ // Not a terminal outcome — the button stays busy/disabled exactly as
482
+ // it already is, this only forwards the signal for a page that wants
483
+ // to persist state before the wallet responds.
484
+ onPending: () => {
485
+ this.dispatchEvent(new CustomEvent("pending"));
486
+ },
350
487
  onSuccess: (result) => {
351
488
  reenable();
352
489
  this.dispatchEvent(new CustomEvent("success", { detail: result }));
@@ -355,44 +492,12 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
355
492
  reenable();
356
493
  this.dispatchEvent(new CustomEvent("error", { detail: error }));
357
494
  },
358
- onCancel: () => {
495
+ onCancel: (reason) => {
359
496
  reenable();
360
- this.dispatchEvent(new CustomEvent("cancel"));
497
+ this.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
361
498
  }
362
499
  }).open();
363
500
  }
364
- static #css() {
365
- const variantRules = VARIANTS.map((variant) => {
366
- const { background, color, border } = VARIANT_STYLES[variant];
367
- return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
368
- }).join("\n");
369
- const sizeRules = SIZES.map((size) => {
370
- const { height, fontSize, padding, logoSize } = SIZE_STYLES[size];
371
- return `
372
- button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }
373
- button[data-size="${size}"] img { width: ${logoSize}; height: ${logoSize}; }
374
- `;
375
- }).join("\n");
376
- return `
377
- button {
378
- display: inline-flex;
379
- align-items: center;
380
- justify-content: center;
381
- gap: 8px;
382
- border-radius: var(--klappay-radius, 8px);
383
- font-family: var(--klappay-font-family, system-ui, sans-serif);
384
- font-weight: 600;
385
- cursor: pointer;
386
- transition: opacity 0.15s ease;
387
- }
388
- button img { flex-shrink: 0; }
389
- button:hover { opacity: 0.9; }
390
- button:active { opacity: 0.8; }
391
- button:disabled { opacity: 0.6; cursor: not-allowed; }
392
- ${variantRules}
393
- ${sizeRules}
394
- `;
395
- }
396
501
  };
397
502
  function registerKlappayButton() {
398
503
  if (typeof customElements === "undefined") return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@klappay/one",
3
- "version": "1.1.1",
3
+ "version": "1.2.0",
4
4
  "license": "MIT",
5
5
  "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.",
6
6
  "keywords": [