@klappay/one 1.1.1 → 1.1.2
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.
- package/dist/index.global.js +73 -28
- package/dist/index.js +139 -50
- package/dist/react/index.js +131 -47
- package/package.json +1 -1
package/dist/index.global.js
CHANGED
|
@@ -1,44 +1,89 @@
|
|
|
1
|
-
"use strict";var KlappayOne=(()=>{var y=Object.defineProperty;var
|
|
1
|
+
"use strict";var KlappayOne=(()=>{var y=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var G=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var n in t)y(e,n,{get:t[n],enumerable:!0})},j=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of D(t))!G.call(e,r)&&r!==n&&y(e,r,{get:()=>t[r],enumerable:!(a=Y(t,r))||a.enumerable});return e};var F=e=>j(y({},"__esModule",{value:!0}),e);var fe={};Z(fe,{configure:()=>O,createKlappayOne:()=>h});function X(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 o(i){if(i.origin!==e||!X(i.data)||i.data.requestId!==t)return;let s=i.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?.();return;case"klappay:resize":n.onResize?.(s.height);return}}return window.addEventListener("message",o),()=>{clearTimeout(r),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 V=/Android|iPhone|iPad|iPod/i;function x(e){return V.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:
|
|
15
|
-
|
|
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
|
-
|
|
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
|
-
`),
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
66
|
+
`;function R(e,t){let n=document.createElement("div"),a=n.attachShadow({mode:"open"}),r=document.createElement("style");r.textContent=q;let o=document.createElement("div");o.className="backdrop",o.addEventListener("click",c=>{c.target===o&&t()});let i=document.createElement("iframe");i.className="frame",i.src=e,o.append(i),a.append(r,o),document.body.append(n);function s(c){let m=o.scrollTop<=0,A=o.scrollTop+o.clientHeight>=o.scrollHeight;(c.deltaY<0&&m||c.deltaY>0&&A)&&c.preventDefault()}document.addEventListener("wheel",s,{passive:!1});let d=!1;function l(){d||(d=!0,o.classList.add("visible"),i.classList.add("visible"))}requestAnimationFrame(l),setTimeout(l,320);let u=!1;function p(){if(u)return;u=!0;let c=!1;function m(){c||(c=!0,document.removeEventListener("wheel",s),n.remove())}function A(N){N.target===o&&(o.removeEventListener("transitionend",A),m())}o.addEventListener("transitionend",A),setTimeout(m,370),o.classList.remove("visible"),i.classList.remove("visible")}return{close:p,resize:c=>{i.style.height=`${c}px`}}}var Q="klappay-one";function S(e){let t=window.screenX+(window.outerWidth-420)/2,n=window.screenY+(window.outerHeight-720)/2;return window.open(e,Q,`width=420,height=720,left=${t},top=${n}`)}function w(e){return e===null||e.closed}var J={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},W={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 $(e){return e.mode??(x(navigator.userAgent)?"popup":"iframe")}function h(e){function t(){$(e)==="popup"?n():a()}function n(){let r=crypto.randomUUID(),o=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:r,locale:e.locale}),i=S(o);if(w(i)){e.onError?.(J);return}let s=v(e.origin,r,{onReady:e.onReady,onSuccess:u=>{l(),e.onSuccess?.(u)},onError:u=>{l(),e.onError?.(u)},onCancel:()=>{l(),e.onCancel?.()},onTimeout:()=>{l(),e.onError?.(W)}}),d=setInterval(()=>{w(i)&&(l(),e.onCancel?.())},_);function l(){clearInterval(d),s()}}function a(){let r=crypto.randomUUID(),o=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:r,locale:e.locale}),i=!1;function s(p){i||(i=!0,u(),p())}let d=R(o,()=>s(()=>e.onCancel?.())),l=v(e.origin,r,{onReady:e.onReady,onSuccess:p=>s(()=>e.onSuccess?.(p)),onError:p=>s(()=>e.onError?.(p)),onCancel:()=>s(()=>e.onCancel?.()),onResize:p=>d.resize(p),onTimeout:()=>s(n)});function u(){l(),d.close()}}return{open:t}}var f="data-klappay-one",k="data-klappay-one-origin",ee="data-klappay-one-locale",te="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(f);if(!t)return;let n=e.getAttribute(k)??g().origin;if(!n){console.error(`[${f}] has no origin \u2014 set ${k} or call KlappayOne.configure({ origin }).`);return}let a=e.getAttribute(ee)??g().locale,r=e.getAttribute(te);e.setAttribute(I,"");let o=()=>{e.removeAttribute(I)};h({chargeId:t,origin:n,locale:a,mode:r==="iframe"||r==="popup"?r:void 0,onSuccess:i=>{o(),e.dispatchEvent(new CustomEvent("success",{detail:i}))},onError:i=>{o(),e.dispatchEvent(new CustomEvent("error",{detail:i}))},onCancel:()=>{o(),e.dispatchEvent(new CustomEvent("cancel"))}}).open()}))}function U(e=document){for(let t of e.querySelectorAll(`[${f}]`))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(f)&&T(r);for(let o of r.querySelectorAll(`[${f}]`))T(o)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var L="klappay-button",K=["white","yellow","black"],H=["sm","md","lg"],ne="black",oe="md",re={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"}},ie="data:image/webp;base64,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",ae="data:image/webp;base64,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",se="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==",le={black:ie,yellow:se,white:ae},ce={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 de=typeof HTMLElement<"u"?HTMLElement:class{},ge=(()=>{let e=K.map(n=>{let{background:a,color:r,border:o}=ce[n];return`button[data-variant="${n}"] { background: var(--klappay-background, ${a}); color: var(--klappay-color, ${r}); border: ${o}; }`}).join(`
|
|
67
|
+
`),t=H.map(n=>{let{height:a,fontSize:r,padding:o,logoSize:i}=re[n];return`
|
|
68
|
+
button[data-size="${n}"] { height: var(--klappay-button-height, ${a}); font-size: ${r}; padding: ${o}; }
|
|
69
|
+
button[data-size="${n}"] img { width: ${i}; height: ${i}; }
|
|
70
|
+
`}).join(`
|
|
26
71
|
`);return`
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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 de{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=ge,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:ne}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return ue(t)?t:oe}set size(t){this.setAttribute("size",t)}#r(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=le[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 o=()=>{this.#o=!1,this.#n()};h({chargeId:t,origin:n,locale:a,mode:r==="iframe"||r==="popup"?r:void 0,onSuccess:i=>{o(),this.dispatchEvent(new CustomEvent("success",{detail:i}))},onError:i=>{o(),this.dispatchEvent(new CustomEvent("error",{detail:i}))},onCancel:()=>{o(),this.dispatchEvent(new CustomEvent("cancel"))}}).open()}};function z(){typeof customElements>"u"||customElements.get(L)||customElements.define(L,B)}z();if(typeof document<"u"){let e=function(){U(),M()};he=e,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()}var he;return F(fe);})();
|
package/dist/index.js
CHANGED
|
@@ -55,35 +55,81 @@ function isMobileUserAgent(userAgent) {
|
|
|
55
55
|
|
|
56
56
|
// src/core/iframe.ts
|
|
57
57
|
var FRAME_WIDTH = 420;
|
|
58
|
-
var
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
var LOADING_FRAME_HEIGHT = 360;
|
|
59
|
+
var MIN_FRAME_HEIGHT = 480;
|
|
60
|
+
var TRANSITION_MS = 320;
|
|
61
|
+
var TRANSITION_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
|
|
62
|
+
var IFRAME_CSS = `
|
|
61
63
|
.backdrop {
|
|
62
64
|
position: fixed;
|
|
63
65
|
inset: 0;
|
|
64
66
|
background: rgba(0, 0, 0, 0.5);
|
|
65
67
|
display: flex;
|
|
66
|
-
align-items: center;
|
|
67
68
|
justify-content: center;
|
|
69
|
+
/* "safe" keeps the top of the frame reachable by scrolling instead
|
|
70
|
+
of clipped off-screen \u2014 plain "center" alone can make overflowing
|
|
71
|
+
centered flex content unscrollable in that direction. The plain
|
|
72
|
+
center above is a fallback for browsers that don't understand the
|
|
73
|
+
safe keyword; an unsupported value is ignored, not applied. */
|
|
74
|
+
align-items: center;
|
|
75
|
+
align-items: safe center;
|
|
76
|
+
overflow-y: auto;
|
|
77
|
+
padding: 16px 0;
|
|
68
78
|
z-index: 2147483647;
|
|
79
|
+
opacity: 0;
|
|
80
|
+
transition: opacity ${TRANSITION_MS}ms ${TRANSITION_EASING};
|
|
81
|
+
scrollbar-width: thin;
|
|
82
|
+
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
|
83
|
+
}
|
|
84
|
+
.backdrop.visible {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
}
|
|
87
|
+
.backdrop::-webkit-scrollbar {
|
|
88
|
+
width: 8px;
|
|
89
|
+
}
|
|
90
|
+
.backdrop::-webkit-scrollbar-track {
|
|
91
|
+
background: transparent;
|
|
92
|
+
}
|
|
93
|
+
.backdrop::-webkit-scrollbar-thumb {
|
|
94
|
+
background: rgba(255, 255, 255, 0.3);
|
|
95
|
+
border-radius: 4px;
|
|
96
|
+
}
|
|
97
|
+
.backdrop::-webkit-scrollbar-thumb:hover {
|
|
98
|
+
background: rgba(255, 255, 255, 0.5);
|
|
69
99
|
}
|
|
70
100
|
.frame {
|
|
71
101
|
width: ${FRAME_WIDTH}px;
|
|
72
102
|
max-width: calc(100vw - 32px);
|
|
73
|
-
height: ${
|
|
74
|
-
|
|
103
|
+
height: ${LOADING_FRAME_HEIGHT}px;
|
|
104
|
+
min-height: min(${MIN_FRAME_HEIGHT}px, 70vh);
|
|
105
|
+
/* No max-height clamp \u2014 one-id measures its own content against the
|
|
106
|
+
height it's actually given via resize(), with no idea this box
|
|
107
|
+
might otherwise get cut shorter than that. Clamping here would
|
|
108
|
+
leave its content taller than what we then render, showing a
|
|
109
|
+
scrollbar inside the iframe itself that we have no way to style
|
|
110
|
+
(a different, cross-origin document). The backdrop above scrolls
|
|
111
|
+
instead when a real step genuinely doesn't fit the viewport. */
|
|
112
|
+
flex-shrink: 0;
|
|
75
113
|
border: none;
|
|
76
114
|
border-radius: 12px;
|
|
77
115
|
background: #000;
|
|
78
|
-
|
|
116
|
+
opacity: 0;
|
|
117
|
+
transform: translateY(-32px) scale(0.96);
|
|
118
|
+
transition:
|
|
119
|
+
height ${TRANSITION_MS}ms ${TRANSITION_EASING},
|
|
120
|
+
opacity ${TRANSITION_MS}ms ${TRANSITION_EASING},
|
|
121
|
+
transform ${TRANSITION_MS}ms ${TRANSITION_EASING};
|
|
122
|
+
}
|
|
123
|
+
.frame.visible {
|
|
124
|
+
opacity: 1;
|
|
125
|
+
transform: translateY(0) scale(1);
|
|
79
126
|
}
|
|
80
127
|
`;
|
|
81
|
-
}
|
|
82
128
|
function openIframe(url, onDismiss) {
|
|
83
129
|
const host = document.createElement("div");
|
|
84
130
|
const shadow = host.attachShadow({ mode: "open" });
|
|
85
131
|
const style = document.createElement("style");
|
|
86
|
-
style.textContent =
|
|
132
|
+
style.textContent = IFRAME_CSS;
|
|
87
133
|
const backdrop = document.createElement("div");
|
|
88
134
|
backdrop.className = "backdrop";
|
|
89
135
|
backdrop.addEventListener("click", (event) => {
|
|
@@ -95,8 +141,46 @@ function openIframe(url, onDismiss) {
|
|
|
95
141
|
backdrop.append(frame);
|
|
96
142
|
shadow.append(style, backdrop);
|
|
97
143
|
document.body.append(host);
|
|
144
|
+
function preventScrollChaining(event) {
|
|
145
|
+
const atTop = backdrop.scrollTop <= 0;
|
|
146
|
+
const atBottom = backdrop.scrollTop + backdrop.clientHeight >= backdrop.scrollHeight;
|
|
147
|
+
if (event.deltaY < 0 && atTop || event.deltaY > 0 && atBottom) {
|
|
148
|
+
event.preventDefault();
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
document.addEventListener("wheel", preventScrollChaining, { passive: false });
|
|
152
|
+
let entered = false;
|
|
153
|
+
function enter() {
|
|
154
|
+
if (entered) return;
|
|
155
|
+
entered = true;
|
|
156
|
+
backdrop.classList.add("visible");
|
|
157
|
+
frame.classList.add("visible");
|
|
158
|
+
}
|
|
159
|
+
requestAnimationFrame(enter);
|
|
160
|
+
setTimeout(enter, TRANSITION_MS);
|
|
161
|
+
let closed = false;
|
|
162
|
+
function close() {
|
|
163
|
+
if (closed) return;
|
|
164
|
+
closed = true;
|
|
165
|
+
let removed = false;
|
|
166
|
+
function remove() {
|
|
167
|
+
if (removed) return;
|
|
168
|
+
removed = true;
|
|
169
|
+
document.removeEventListener("wheel", preventScrollChaining);
|
|
170
|
+
host.remove();
|
|
171
|
+
}
|
|
172
|
+
function onTransitionEnd(event) {
|
|
173
|
+
if (event.target !== backdrop) return;
|
|
174
|
+
backdrop.removeEventListener("transitionend", onTransitionEnd);
|
|
175
|
+
remove();
|
|
176
|
+
}
|
|
177
|
+
backdrop.addEventListener("transitionend", onTransitionEnd);
|
|
178
|
+
setTimeout(remove, TRANSITION_MS + 50);
|
|
179
|
+
backdrop.classList.remove("visible");
|
|
180
|
+
frame.classList.remove("visible");
|
|
181
|
+
}
|
|
98
182
|
return {
|
|
99
|
-
close
|
|
183
|
+
close,
|
|
100
184
|
resize: (height) => {
|
|
101
185
|
frame.style.height = `${height}px`;
|
|
102
186
|
}
|
|
@@ -299,9 +383,9 @@ var SIZE_STYLES = {
|
|
|
299
383
|
md: { height: "40px", fontSize: "14px", padding: "0 18px", logoSize: "16px" },
|
|
300
384
|
lg: { height: "48px", fontSize: "16px", padding: "0 24px", logoSize: "18px" }
|
|
301
385
|
};
|
|
302
|
-
var LOGO_NO_BLACK_INK_DATA_URI = "data:image/
|
|
303
|
-
var LOGO_BLACK_INK_DATA_URI = "data:image/
|
|
304
|
-
var LOGO_BLACK_WHITE_DATA_URI = "data:image/
|
|
386
|
+
var LOGO_NO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
|
|
387
|
+
var LOGO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
|
|
388
|
+
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
389
|
var VARIANT_LOGO_DATA_URI = {
|
|
306
390
|
black: LOGO_NO_BLACK_INK_DATA_URI,
|
|
307
391
|
yellow: LOGO_BLACK_WHITE_DATA_URI,
|
|
@@ -320,7 +404,39 @@ function isSize(value) {
|
|
|
320
404
|
}
|
|
321
405
|
var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
|
|
322
406
|
};
|
|
323
|
-
var
|
|
407
|
+
var BUTTON_CSS = (() => {
|
|
408
|
+
const variantRules = VARIANTS.map((variant) => {
|
|
409
|
+
const { background, color, border } = VARIANT_STYLES[variant];
|
|
410
|
+
return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
|
|
411
|
+
}).join("\n");
|
|
412
|
+
const sizeRules = SIZES.map((size) => {
|
|
413
|
+
const { height, fontSize, padding, logoSize } = SIZE_STYLES[size];
|
|
414
|
+
return `
|
|
415
|
+
button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }
|
|
416
|
+
button[data-size="${size}"] img { width: ${logoSize}; height: ${logoSize}; }
|
|
417
|
+
`;
|
|
418
|
+
}).join("\n");
|
|
419
|
+
return `
|
|
420
|
+
button {
|
|
421
|
+
display: inline-flex;
|
|
422
|
+
align-items: center;
|
|
423
|
+
justify-content: center;
|
|
424
|
+
gap: 8px;
|
|
425
|
+
border-radius: var(--klappay-radius, 8px);
|
|
426
|
+
font-family: var(--klappay-font-family, system-ui, sans-serif);
|
|
427
|
+
font-weight: 600;
|
|
428
|
+
cursor: pointer;
|
|
429
|
+
transition: opacity 0.15s ease;
|
|
430
|
+
}
|
|
431
|
+
button img { flex-shrink: 0; }
|
|
432
|
+
button:hover { opacity: 0.9; }
|
|
433
|
+
button:active { opacity: 0.8; }
|
|
434
|
+
button:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
435
|
+
${variantRules}
|
|
436
|
+
${sizeRules}
|
|
437
|
+
`;
|
|
438
|
+
})();
|
|
439
|
+
var KlappayButtonElement = class extends KlappayButtonBase {
|
|
324
440
|
static get observedAttributes() {
|
|
325
441
|
return ["variant", "size", "charge-id", "origin"];
|
|
326
442
|
}
|
|
@@ -331,7 +447,7 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
|
|
|
331
447
|
super();
|
|
332
448
|
const shadow = this.attachShadow({ mode: "open" });
|
|
333
449
|
const style = document.createElement("style");
|
|
334
|
-
style.textContent =
|
|
450
|
+
style.textContent = BUTTON_CSS;
|
|
335
451
|
this.#logo = document.createElement("img");
|
|
336
452
|
this.#logo.alt = "";
|
|
337
453
|
this.#logo.setAttribute("aria-hidden", "true");
|
|
@@ -425,38 +541,6 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
|
|
|
425
541
|
}
|
|
426
542
|
}).open();
|
|
427
543
|
}
|
|
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
544
|
};
|
|
461
545
|
function registerKlappayButton() {
|
|
462
546
|
if (typeof customElements === "undefined") return;
|
|
@@ -468,13 +552,18 @@ function registerKlappayButton() {
|
|
|
468
552
|
// src/index.ts
|
|
469
553
|
registerKlappayButton();
|
|
470
554
|
if (typeof document !== "undefined") {
|
|
555
|
+
let init = function() {
|
|
556
|
+
wireExisting();
|
|
557
|
+
observeNewElements();
|
|
558
|
+
};
|
|
559
|
+
init2 = init;
|
|
471
560
|
if (document.readyState === "loading") {
|
|
472
|
-
document.addEventListener("DOMContentLoaded",
|
|
561
|
+
document.addEventListener("DOMContentLoaded", init);
|
|
473
562
|
} else {
|
|
474
|
-
|
|
563
|
+
init();
|
|
475
564
|
}
|
|
476
|
-
observeNewElements();
|
|
477
565
|
}
|
|
566
|
+
var init2;
|
|
478
567
|
export {
|
|
479
568
|
configure,
|
|
480
569
|
createKlappayOne
|
package/dist/react/index.js
CHANGED
|
@@ -58,35 +58,81 @@ function isMobileUserAgent(userAgent) {
|
|
|
58
58
|
|
|
59
59
|
// src/core/iframe.ts
|
|
60
60
|
var FRAME_WIDTH = 420;
|
|
61
|
-
var
|
|
62
|
-
|
|
63
|
-
|
|
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 = `
|
|
64
66
|
.backdrop {
|
|
65
67
|
position: fixed;
|
|
66
68
|
inset: 0;
|
|
67
69
|
background: rgba(0, 0, 0, 0.5);
|
|
68
70
|
display: flex;
|
|
69
|
-
align-items: center;
|
|
70
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;
|
|
71
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);
|
|
72
102
|
}
|
|
73
103
|
.frame {
|
|
74
104
|
width: ${FRAME_WIDTH}px;
|
|
75
105
|
max-width: calc(100vw - 32px);
|
|
76
|
-
height: ${
|
|
77
|
-
|
|
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;
|
|
78
116
|
border: none;
|
|
79
117
|
border-radius: 12px;
|
|
80
118
|
background: #000;
|
|
81
|
-
|
|
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);
|
|
82
129
|
}
|
|
83
130
|
`;
|
|
84
|
-
}
|
|
85
131
|
function openIframe(url, onDismiss) {
|
|
86
132
|
const host = document.createElement("div");
|
|
87
133
|
const shadow = host.attachShadow({ mode: "open" });
|
|
88
134
|
const style = document.createElement("style");
|
|
89
|
-
style.textContent =
|
|
135
|
+
style.textContent = IFRAME_CSS;
|
|
90
136
|
const backdrop = document.createElement("div");
|
|
91
137
|
backdrop.className = "backdrop";
|
|
92
138
|
backdrop.addEventListener("click", (event) => {
|
|
@@ -98,8 +144,46 @@ function openIframe(url, onDismiss) {
|
|
|
98
144
|
backdrop.append(frame);
|
|
99
145
|
shadow.append(style, backdrop);
|
|
100
146
|
document.body.append(host);
|
|
147
|
+
function preventScrollChaining(event) {
|
|
148
|
+
const atTop = backdrop.scrollTop <= 0;
|
|
149
|
+
const atBottom = backdrop.scrollTop + backdrop.clientHeight >= backdrop.scrollHeight;
|
|
150
|
+
if (event.deltaY < 0 && atTop || event.deltaY > 0 && atBottom) {
|
|
151
|
+
event.preventDefault();
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
document.addEventListener("wheel", preventScrollChaining, { passive: false });
|
|
155
|
+
let entered = false;
|
|
156
|
+
function enter() {
|
|
157
|
+
if (entered) return;
|
|
158
|
+
entered = true;
|
|
159
|
+
backdrop.classList.add("visible");
|
|
160
|
+
frame.classList.add("visible");
|
|
161
|
+
}
|
|
162
|
+
requestAnimationFrame(enter);
|
|
163
|
+
setTimeout(enter, TRANSITION_MS);
|
|
164
|
+
let closed = false;
|
|
165
|
+
function close() {
|
|
166
|
+
if (closed) return;
|
|
167
|
+
closed = true;
|
|
168
|
+
let removed = false;
|
|
169
|
+
function remove() {
|
|
170
|
+
if (removed) return;
|
|
171
|
+
removed = true;
|
|
172
|
+
document.removeEventListener("wheel", preventScrollChaining);
|
|
173
|
+
host.remove();
|
|
174
|
+
}
|
|
175
|
+
function onTransitionEnd(event) {
|
|
176
|
+
if (event.target !== backdrop) return;
|
|
177
|
+
backdrop.removeEventListener("transitionend", onTransitionEnd);
|
|
178
|
+
remove();
|
|
179
|
+
}
|
|
180
|
+
backdrop.addEventListener("transitionend", onTransitionEnd);
|
|
181
|
+
setTimeout(remove, TRANSITION_MS + 50);
|
|
182
|
+
backdrop.classList.remove("visible");
|
|
183
|
+
frame.classList.remove("visible");
|
|
184
|
+
}
|
|
101
185
|
return {
|
|
102
|
-
close
|
|
186
|
+
close,
|
|
103
187
|
resize: (height) => {
|
|
104
188
|
frame.style.height = `${height}px`;
|
|
105
189
|
}
|
|
@@ -235,9 +319,9 @@ var SIZE_STYLES = {
|
|
|
235
319
|
md: { height: "40px", fontSize: "14px", padding: "0 18px", logoSize: "16px" },
|
|
236
320
|
lg: { height: "48px", fontSize: "16px", padding: "0 24px", logoSize: "18px" }
|
|
237
321
|
};
|
|
238
|
-
var LOGO_NO_BLACK_INK_DATA_URI = "data:image/
|
|
239
|
-
var LOGO_BLACK_INK_DATA_URI = "data:image/
|
|
240
|
-
var LOGO_BLACK_WHITE_DATA_URI = "data:image/
|
|
322
|
+
var LOGO_NO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
|
|
323
|
+
var LOGO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
|
|
324
|
+
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
325
|
var VARIANT_LOGO_DATA_URI = {
|
|
242
326
|
black: LOGO_NO_BLACK_INK_DATA_URI,
|
|
243
327
|
yellow: LOGO_BLACK_WHITE_DATA_URI,
|
|
@@ -256,7 +340,39 @@ function isSize(value) {
|
|
|
256
340
|
}
|
|
257
341
|
var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
|
|
258
342
|
};
|
|
259
|
-
var
|
|
343
|
+
var BUTTON_CSS = (() => {
|
|
344
|
+
const variantRules = VARIANTS.map((variant) => {
|
|
345
|
+
const { background, color, border } = VARIANT_STYLES[variant];
|
|
346
|
+
return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
|
|
347
|
+
}).join("\n");
|
|
348
|
+
const sizeRules = SIZES.map((size) => {
|
|
349
|
+
const { height, fontSize, padding, logoSize } = SIZE_STYLES[size];
|
|
350
|
+
return `
|
|
351
|
+
button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }
|
|
352
|
+
button[data-size="${size}"] img { width: ${logoSize}; height: ${logoSize}; }
|
|
353
|
+
`;
|
|
354
|
+
}).join("\n");
|
|
355
|
+
return `
|
|
356
|
+
button {
|
|
357
|
+
display: inline-flex;
|
|
358
|
+
align-items: center;
|
|
359
|
+
justify-content: center;
|
|
360
|
+
gap: 8px;
|
|
361
|
+
border-radius: var(--klappay-radius, 8px);
|
|
362
|
+
font-family: var(--klappay-font-family, system-ui, sans-serif);
|
|
363
|
+
font-weight: 600;
|
|
364
|
+
cursor: pointer;
|
|
365
|
+
transition: opacity 0.15s ease;
|
|
366
|
+
}
|
|
367
|
+
button img { flex-shrink: 0; }
|
|
368
|
+
button:hover { opacity: 0.9; }
|
|
369
|
+
button:active { opacity: 0.8; }
|
|
370
|
+
button:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
371
|
+
${variantRules}
|
|
372
|
+
${sizeRules}
|
|
373
|
+
`;
|
|
374
|
+
})();
|
|
375
|
+
var KlappayButtonElement = class extends KlappayButtonBase {
|
|
260
376
|
static get observedAttributes() {
|
|
261
377
|
return ["variant", "size", "charge-id", "origin"];
|
|
262
378
|
}
|
|
@@ -267,7 +383,7 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
|
|
|
267
383
|
super();
|
|
268
384
|
const shadow = this.attachShadow({ mode: "open" });
|
|
269
385
|
const style = document.createElement("style");
|
|
270
|
-
style.textContent =
|
|
386
|
+
style.textContent = BUTTON_CSS;
|
|
271
387
|
this.#logo = document.createElement("img");
|
|
272
388
|
this.#logo.alt = "";
|
|
273
389
|
this.#logo.setAttribute("aria-hidden", "true");
|
|
@@ -361,38 +477,6 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
|
|
|
361
477
|
}
|
|
362
478
|
}).open();
|
|
363
479
|
}
|
|
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
480
|
};
|
|
397
481
|
function registerKlappayButton() {
|
|
398
482
|
if (typeof customElements === "undefined") return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@klappay/one",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
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": [
|