@klappay/one 1.2.0 → 1.4.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.
- package/dist/index.d.ts +4 -0
- package/dist/index.global.js +10 -10
- package/dist/index.js +39 -7
- package/dist/react/index.d.ts +7 -0
- package/dist/react/index.js +38 -8
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -16,6 +16,10 @@ interface KlappayOneConfig {
|
|
|
16
16
|
mode?: 'iframe' | 'popup';
|
|
17
17
|
onReady?: () => void;
|
|
18
18
|
onPending?: () => void;
|
|
19
|
+
onConfirming?: (data: {
|
|
20
|
+
txHash: string;
|
|
21
|
+
network: string;
|
|
22
|
+
}) => void;
|
|
19
23
|
onSuccess?: (result: PaymentResult) => void;
|
|
20
24
|
onError?: (error: KlappayOneError) => void;
|
|
21
25
|
onCancel?: (reason: 'user' | 'closed') => void;
|
package/dist/index.global.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var KlappayOne=(()=>{var y=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var KlappayOne=(()=>{var y=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var o in t)y(e,o,{get:t[o],enumerable:!0})},j=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of G(t))!Z.call(e,i)&&i!==o&&y(e,i,{get:()=>t[i],enumerable:!(s=Y(t,i))||s.enumerable});return e};var X=e=>j(y({},"__esModule",{value:!0}),e);var ve={};F(ve,{configure:()=>O,createKlappayOne:()=>h});function V(e){return typeof e=="object"&&e!==null&&"type"in e&&typeof e.type=="string"&&e.type.startsWith("klappay:")&&"requestId"in e&&typeof e.requestId=="string"}function v(e,t,o){let s=!1,i=setTimeout(()=>{s||o.onTimeout?.()},1e4);function r(n){if(n.origin!==e||!V(n.data)||n.data.requestId!==t)return;let a=n.data;switch(a.type){case"klappay:ready":s=!0,clearTimeout(i),o.onReady?.();return;case"klappay:success":o.onSuccess?.(a.result);return;case"klappay:error":o.onError?.(a.error);return;case"klappay:cancel":o.onCancel?.("user");return;case"klappay:pending":o.onPending?.();return;case"klappay:confirming":o.onConfirming?.({txHash:a.txHash,network:a.network});return;case"klappay:resize":o.onResize?.(a.height);return}}return window.addEventListener("message",r),()=>{clearTimeout(i),window.removeEventListener("message",r)}}function E(e){let t=new URL("/id/",e.klapOneOrigin);return t.searchParams.set("chargeId",e.chargeId),t.searchParams.set("requestId",e.requestId),t.searchParams.set("returnOrigin",window.location.origin),e.locale&&t.searchParams.set("locale",e.locale),t.toString()}var q=/Android|iPhone|iPad|iPod/i;function C(e){return q.test(e)}var A="cubic-bezier(0.16, 1, 0.3, 1)",Q=`
|
|
2
2
|
.backdrop {
|
|
3
3
|
position: fixed;
|
|
4
4
|
inset: 0;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
padding: 16px 0;
|
|
17
17
|
z-index: 2147483647;
|
|
18
18
|
opacity: 0;
|
|
19
|
-
transition: opacity 320ms ${
|
|
19
|
+
transition: opacity 320ms ${A};
|
|
20
20
|
scrollbar-width: thin;
|
|
21
21
|
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
|
22
22
|
}
|
|
@@ -55,18 +55,18 @@
|
|
|
55
55
|
opacity: 0;
|
|
56
56
|
transform: translateY(-32px) scale(0.96);
|
|
57
57
|
transition:
|
|
58
|
-
height 320ms ${
|
|
59
|
-
opacity 320ms ${
|
|
60
|
-
transform 320ms ${
|
|
58
|
+
height 320ms ${A},
|
|
59
|
+
opacity 320ms ${A},
|
|
60
|
+
transform 320ms ${A};
|
|
61
61
|
}
|
|
62
62
|
.frame.visible {
|
|
63
63
|
opacity: 1;
|
|
64
64
|
transform: translateY(0) scale(1);
|
|
65
65
|
}
|
|
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(
|
|
68
|
-
button[data-size="${
|
|
69
|
-
button[data-size="${
|
|
66
|
+
`;function x(e,t){let o=document.createElement("div"),s=o.attachShadow({mode:"open"}),i=document.createElement("style");i.textContent=Q;let r=!0,n=document.createElement("div");n.className="backdrop",n.addEventListener("click",c=>{c.target===n&&r&&t()});let a=document.createElement("iframe");a.className="frame",a.src=e,n.append(a),s.append(i,n),document.body.append(o);function u(c){let m=n.scrollTop<=0,b=n.scrollTop+n.clientHeight>=n.scrollHeight;(c.deltaY<0&&m||c.deltaY>0&&b)&&c.preventDefault()}document.addEventListener("wheel",u,{passive:!1});let p=!1;function d(){p||(p=!0,n.classList.add("visible"),a.classList.add("visible"))}requestAnimationFrame(d),setTimeout(d,320);let l=!1;function N(){if(l)return;l=!0;let c=!1;function m(){c||(c=!0,document.removeEventListener("wheel",u),o.remove())}function b(D){D.target===n&&(n.removeEventListener("transitionend",b),m())}n.addEventListener("transitionend",b),setTimeout(m,370),n.classList.remove("visible"),a.classList.remove("visible")}return{close:N,resize:c=>{a.style.height=`${c}px`},setDismissable:c=>{r=c}}}var J="klappay-one";function S(e){let t=window.screenX+(window.outerWidth-420)/2,o=window.screenY+(window.outerHeight-720)/2;return window.open(e,J,`width=420,height=720,left=${t},top=${o}`)}function w(e){return e===null||e.closed}var W={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},_={code:"FRAME_TIMEOUT",message:"The Klappay One popup did not respond in time."},$=500,R={};function O(e){R=e}function g(){return R}function ee(e){return e.mode??(C(navigator.userAgent)?"popup":"iframe")}function h(e){function t(){ee(e)==="popup"?o():s()}function o(){let i=crypto.randomUUID(),r=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:i,locale:e.locale}),n=S(r);if(w(n)){e.onError?.(W);return}let a=v(e.origin,i,{onReady:e.onReady,onPending:e.onPending,onConfirming:e.onConfirming,onSuccess:d=>{p(),e.onSuccess?.(d)},onError:d=>{p(),e.onError?.(d)},onCancel:d=>{p(),e.onCancel?.(d)},onTimeout:()=>{p(),e.onError?.(_)}}),u=setInterval(()=>{w(n)&&(p(),e.onCancel?.("closed"))},$);function p(){clearInterval(u),a()}}function s(){let i=crypto.randomUUID(),r=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:i,locale:e.locale}),n=!1;function a(l){n||(n=!0,d(),l())}let u=x(r,()=>a(()=>e.onCancel?.("user"))),p=v(e.origin,i,{onReady:e.onReady,onPending:()=>{u.setDismissable(!1),e.onPending?.()},onConfirming:e.onConfirming,onSuccess:l=>a(()=>e.onSuccess?.(l)),onError:l=>a(()=>e.onError?.(l)),onCancel:l=>a(()=>e.onCancel?.(l)),onResize:l=>u.resize(l),onTimeout:()=>a(o)});function d(){p(),u.close()}}return{open:t}}var f="data-klappay-one",k="data-klappay-one-origin",te="data-klappay-one-locale",ne="data-klappay-one-mode",L="data-klappay-one-wired",I="data-klappay-one-busy";function T(e){e.hasAttribute(L)||(e.setAttribute(L,""),e.addEventListener("click",()=>{if(e.hasAttribute(I))return;let t=e.getAttribute(f);if(!t)return;let o=e.getAttribute(k)??g().origin;if(!o){console.error(`[${f}] has no origin \u2014 set ${k} or call KlappayOne.configure({ origin }).`);return}let s=e.getAttribute(te)??g().locale,i=e.getAttribute(ne);e.setAttribute(I,"");let r=()=>{e.removeAttribute(I)};h({chargeId:t,origin:o,locale:s,mode:i==="iframe"||i==="popup"?i:void 0,onPending:()=>{e.dispatchEvent(new CustomEvent("pending"))},onConfirming:n=>{e.dispatchEvent(new CustomEvent("confirming",{detail:n}))},onSuccess:n=>{r(),e.dispatchEvent(new CustomEvent("success",{detail:n}))},onError:n=>{r(),e.dispatchEvent(new CustomEvent("error",{detail:n}))},onCancel:n=>{r(),e.dispatchEvent(new CustomEvent("cancel",{detail:{reason:n}}))}}).open()}))}function P(e=document){for(let t of e.querySelectorAll(`[${f}]`))T(t)}function U(e=document.body){let t=new MutationObserver(o=>{for(let s of o)for(let i of s.addedNodes)if(i instanceof Element){i.hasAttribute(f)&&T(i);for(let r of i.querySelectorAll(`[${f}]`))T(r)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var K="klappay-button",M=["white","yellow","black"],H=["sm","md","lg"],oe=["full","short"],ie="black",re="md",ae="full",se={full:"Pay with Klappay One",short:"Klappay One"},le={sm:{height:"32px",fontSize:"13px",padding:"0 14px",logoSize:"18px"},md:{height:"40px",fontSize:"14px",padding:"0 18px",logoSize:"21px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px",logoSize:"23px"}},ce="data:image/webp;base64,UklGRowHAABXRUJQVlA4TIAHAAAvJ8AJEFXRrf/PkaRMkhfPRHABnI1e3aKqWld1z2mtpQW+1jCzr43p6VlEAD9v3DVVBBvTkcnGcybK5fWj7Y2BEMjipEkylI9aa5NA2eSiIY2xkPblwYaAFjkIC3s8osBfC5HQ2ZcAHubEchGM3xGchyaDS+PSuATW2whI5NxNA/P8eZcQHjYhSA7Ato0k1LAF7OtymCQJIgB6b8PrCph6bjo/ybFtq7ayfpJY150nR/bae68juGuPFG4ShCaNtu0y0CZph59t27Zt27Zt27Zt2/w5tm170uYldwJwmx/ihnXgMCrlH5vz12VKALLjfhgDkAOYBCQgy3L/wSBRLjGAEghxwyWU/aGSxWiPFEiRgflto5Xny3TzVIshxOI4rz+VWXaqnYDZKoBz9t+S6MBh9L68r8GccUt1hqp5ABmw4H4YcOhNF6+evOvTY3D6HYS4ZQQXr1CYPWjj75cQy2/KNJaUHbXKkui375KiaM6DVqt3cBTQpOTdoO3ZA1A1+y2fp2A1cy+fPnn9+RVWrqstFu9JeIwHRxfvrgSZuGj8c8xjcxknA60YsXyfYNnhxqD27j5Gnd5eunLdleEI/ltS5b7V4yVEKvQ9+4jtv494g53gUKNXzQsEKdZeT+DTd+cAB8SSUlNWMxLpViidmLLCpM8os3ODWtbiXKF5XICe3dpIWH5XTaTvNsdwQXrJwm+WCWhxy1ahpatSi35aJbH42qoiFv37xxmkclKhryCRCLrAUPyGrnFjiS84LrpB0R4OIv3yumv/qNA0ljuXrAaXeXvd5TX4djHhMBdBkM/Xnl7nu8wjGK1UTqTrNWIVLasT9MzT0oyn26F0YmSZKX35UoJIw38wE9pwpKRi2ZgV44pgmbViXLUgg+Ewdx1Zvgs4PXES0RLd3hULq6zSV3bFa4Yj1EsHc4r53ryZ1FdvxrytZ4gZvcdzUClmeqnOUGvs5PTdm3++wDcT3vReZo92K8cVPinW3M7w6BvBscyoMRCPL2uvz+HEpFpzEpQe3Vx3MhLSjEvPTfbut+2Ix/sZEol5zWOyLi1awddgDunYCvq42/uLflu/P4Nbej+5ePXoZbPQ8lm0IL12p7IStX7wo2mWlG5MPQu11q4alayTthml1BrsqudYdvWAHeYq+80AwxF3x4xuPeNX9t/4/aVNf6/qnH77aEATy0ZRzsyOHffDWD0eO6KC1F7UwIpn2SaZdnJjWs2cBOLx7yyRrBlq/dRKJ0Q3TS27QTJ8qDLEbQOJ5KCqtUw/3nbiy9dP+bSiCWfrKOJm0KXBJw2HbZnkpWtVe3TH+FzKNvPtUBFLiqOBWL+pM90OQSTtNPEctUAt/ZXnXnBBfarN6R9P3OUvC9j885bTPysul6neje0qgb8uE5rm6tpxM664GxTvvqr3wHlDTkypnDYwJ/buHa/v3UuViqfBNkP78q5RgRZ94r9Zf/Hlu4LMcS5ZrRKGQKQrh4llTXtupGp0IMqjhVzBFFTfW5FYdJg6Xjkjx7iM/fDJV1NfisUwfjmVjiGzDhwGc/4s9BW6ZTshDEeurrnJtBcZDr035jtva1o74DHeThRWF8tGkZzZGXFT2fPxsZxlRjaIRD/yo2HP3rj1h21b4beCnrJ0VmvKXmMhTsVBB24Z6OnV0IllP0edNL43PnXKed266M1YevHzfXiMU+Cvy0R5CLAkYjL/2NwYu7G65xwnZlsi1atgTj3NktlMY1Aw+uM0k0AIGCFghgBH9BDcmet92j2l5qzavVXsvX3ma2QSkTsBZw6YZZK/LhfY1KxLn+5B0LeqmadPz1XxV3AUTZWvMQTg/yIwvh84VQJ+9gPZRcB7NeCYAMAz9lCL1afT1qWjPjfnas4cz/9lDoo37raBSqEZAFwOlC4BWSGA+0uAez+wuwMwQoAl8pz9t6TRedKKhxmOCNr5yRTPktICJXv2MeZU8eqmHcxRqPauiRTAdUCNK4EGlwCuAGZTSaRvq+YrGA4890PtZSuOPXurpJJq6DU7IUNk8mozGZ0k1pvf/KPiGFVKphRMQXurpUo6S53/6adXzikAtNtJGwByAIMd72LaD5hy/8YPe+eqOGOb2gpzta0GGCsD2sBNwOoS4Hkl0BAJkH/9b5oVQ8z4G8uUg3vnPo9xz0NeGqk1hiBDZIIbgKb9wK9WCUi4HqibtDtwGPx1mQCMneOs8JEVt2umA/c8WC+jkiaW5EeDm16o+M0o7EZkM7kJ6NpqFYGzIVACCV5NZofuc07Z1h65xKpYYIW3zPas2uChJ6hTUac8YzdRs0PfnzCE6DZuABoXgUdFoC+QIFLiCz79cmHYSTHbXObYwDqeG4nwDxuDoitsM8ZMbFmon67IEL+ZALgRmHgaCfKPzfGzP3ze0kv9vmT1b/7kcW9zpVfcZlSssMm5lmNQx59VHBhD3KTZBJrJTUCX1o3APrwKpBK5f+CcPj6gPVkymm8weavv65cSAE5JVN9ECXgeAnQD0ARtAMgQOZRJDGAb1wN1QsAuAR/RRHQ2JEclBvZV3ASsal0P9A4BVunmTHANUPl6YDBuGwE=",pe="data:image/webp;base64,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",de="data:image/webp;base64,UklGRmwFAABXRUJQVlA4TGAFAAAvJ8AJEDXRjbZ/ld2ImZmZmZnhMjMzMzMcMzO3oCZ/wR4wx7/oKjO2wf6bamCMaJ3hFiEqwnA0J1YFvrljj0OHLuBmvw48ys6MI5egMgxNbPybcagKVtSBIvXgSKFLuNm/hQ23EAcEghDxfzMG0rYJ9y952yVBkm3aVti2bdu2jZGNmW2/923bto1n27Z58O7GBODD6B4wxcKSB5sCM5bCn0RwLHl5SCmwI+KjZj0C0SQG8SYFawVOrIEnSTxiqMlHW4HbSB7cBdjk4tuAkAJrLD4jAP3AO+iuQ9Z89ON07MuQzyR2GLAveBvLJ0vhiMZiOqS9go0GFI0EYT8VeiRwN/dORpA6BNQTPAhcS56rI5xzYwErWUzi3kBwH7A/SwqCRUiuYakXmMYCL8fcyDbSB4BpOKiQkhp0l/Z2iWZCfF8JVzDfbDuVlyv++/3BbSS6Yjhjs8jkzz1wG4nDZgoM4onQBXjcRdxIUG+w8GNEQfImfAaB5HL2rtConaxfB08xxtOhWC6EvhHzMtRK8alFzdTlquXCUJAU69m8FKMQemweBsql5lb4d/kV2xPBl1ZsKpDaxJzFnnw+taC2hYkxgJ3M3giXjtMKvK5fIhj0sMefboXgKQDBw4HVBJaRcYBHgqrwT6LyAFlLIBX0g/juEVMBtyGtIwXjXTyIJuSf69CdBkOQL4VnZVwcDCaxmcVL0ZnDIVvhW0cmn17nJyu4kE5WF7+exY97YNMCuDawY48HJnP6dC2pEwHMIw5FUbOcLUFWvH2O4t/r/HoqtXOgPGsgcvGaDdkbLBZBXYuhqQVwbPVbtjyRwvEmJEL520k8BdjAraeIR4HaODYKSLyCg99ncFRBwpb/rODRoGYK9sGC2gDTBzMBQn4aQc2lGOxlzSK5kAM/+gXxTI5GA4h8CTwtISucq53siab3KoRcCpymBt4KRwrnv2Y+nsfJbCIfYRLzISxSf7KQxi0sWXIe9CW41aBUzOVqKhUEtfBwer22ibriqb3czltMxERMTEQfFhA+F+pAE0lXobyOWevrWiJ0mDnIhjApSU4CZlO3gzFBesVSiFROJ9Nah9Zuxmw5H7oNFx14QUH8V4vE35nWJHWRHU/b/5uY9smuUs6d14M7YC3FfQJAENtMxETswMRd2ZRMgiEGgdN4d9jUhWYV6eMBvcFkWG5jLYz/g0Fnr0beRIN3U1LAi042xF83E+3H5E9o9Fwtd0MYDuCrxxDJbJ7XoZUHmwPADLADnIAQwKtRxb3jkTQtZ1kYolXsX4skIiLABvgAH4FJYBHoBlgR8cLh6xDPwiuRpi1QJZStZEeqsBaPASmYOwBywDSwC2wCn4A0L+I+WNLRyeb3QojZ0JtYy6K1Il7F8s1S0XuggTgHgAWQBmQAvj+8iHgnQn7seKSUlu1jItb3ehHHHNDr9ToREa9EZC+7PklELJmMLoYqxUjF0enu9naUoJRP0QbGpkF2SiajPAZYSawCt5YbEARKgKYf0DxSjEgYRpFUfeaRxESsxZ5U7uxHzR8BB+AnsAd0AJLoeL4evfC5s5gtwaT3QAwPr4HP1AL8gNVXgfOAqFvl3LECitO321VcnQhhExE7yDHBKCY7FO5zqA0YAHcAI4Db7VRB81g4oQlMJjKwtS5s5/diyBO2ENY40B7+hOKcBZ+JOruf6XYi4kUgElD2IpqnM1AM4d5S1vxYruZbA2+S+R9E6y7+RHKjHLdGxDrwXvS+9jNQ6UZENPf/Fkfl2cUc+rFQg7MCv+s/vFefAZoAEtBQQXS6LwLiR914bwP2wBZwD2BDnU6894H8d/716rkvATUg/Kjz/nGfAw==",ue={black:ce,yellow:de,white:pe},ge={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function he(e){return M.includes(e)}function fe(e){return H.includes(e)}function me(e){return oe.includes(e)}var be=typeof HTMLElement<"u"?HTMLElement:class{},Ae=(()=>{let e=M.map(o=>{let{background:s,color:i,border:r}=ge[o];return`button[data-variant="${o}"] { background: var(--klappay-background, ${s}); color: var(--klappay-color, ${i}); border: ${r}; }`}).join(`
|
|
67
|
+
`),t=H.map(o=>{let{height:s,fontSize:i,padding:r,logoSize:n}=le[o];return`
|
|
68
|
+
button[data-size="${o}"] { height: var(--klappay-button-height, ${s}); font-size: ${i}; padding: ${r}; }
|
|
69
|
+
button[data-size="${o}"] img { width: ${n}; height: ${n}; }
|
|
70
70
|
`}).join(`
|
|
71
71
|
`);return`
|
|
72
72
|
button {
|
|
@@ -86,4 +86,4 @@
|
|
|
86
86
|
button:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
87
87
|
${e}
|
|
88
88
|
${t}
|
|
89
|
-
`})(),B=class extends
|
|
89
|
+
`})(),B=class extends be{static get observedAttributes(){return["variant","size","label","charge-id","origin"]}#e;#t;#o;#i=!1;constructor(){super();let t=this.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=Ae,this.#t=document.createElement("img"),this.#t.alt="",this.#t.setAttribute("aria-hidden","true"),this.#o=document.createElement("span"),this.#e=document.createElement("button"),this.#e.type="button",this.#e.append(this.#t,this.#o),this.#e.addEventListener("click",()=>this.#c()),t.append(o,this.#e),this.#r(),this.#a(),this.#s(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#r(),t==="size"&&this.#a(),t==="label"&&this.#s(),(t==="charge-id"||t==="origin")&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return he(t)?t:ie}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return fe(t)?t:re}set size(t){this.setAttribute("size",t)}get label(){let t=this.getAttribute("label")??"";return me(t)?t:ae}set label(t){this.setAttribute("label",t)}#r(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=ue[this.variant]}#a(){this.#e.setAttribute("data-size",this.size)}#s(){this.#o.textContent=se[this.label]}#l(){let t=this.getAttribute("charge-id"),o=this.getAttribute("origin")??g().origin;return!!(t&&o)}#n(){this.#e.disabled=this.#i||!this.#l()}#c(){if(this.#e.disabled)return;let t=this.getAttribute("charge-id");if(!t){console.error("<klappay-button> is missing a required charge-id attribute.");return}let o=this.getAttribute("origin")??g().origin;if(!o){console.error("<klappay-button> has no origin \u2014 set the origin attribute or call KlappayOne.configure({ origin }).");return}let s=this.getAttribute("locale")??g().locale,i=this.getAttribute("mode");this.#i=!0,this.#n();let r=()=>{this.#i=!1,this.#n()};h({chargeId:t,origin:o,locale:s,mode:i==="iframe"||i==="popup"?i:void 0,onPending:()=>{this.dispatchEvent(new CustomEvent("pending"))},onConfirming:n=>{this.dispatchEvent(new CustomEvent("confirming",{detail:n}))},onSuccess:n=>{r(),this.dispatchEvent(new CustomEvent("success",{detail:n}))},onError:n=>{r(),this.dispatchEvent(new CustomEvent("error",{detail:n}))},onCancel:n=>{r(),this.dispatchEvent(new CustomEvent("cancel",{detail:{reason:n}}))}}).open()}};function z(){typeof customElements>"u"||customElements.get(K)||customElements.define(K,B)}z();if(typeof document<"u"){let e=function(){P(),U()};ye=e,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()}var ye;return X(ve);})();
|
package/dist/index.js
CHANGED
|
@@ -30,6 +30,9 @@ function listen(klapOneOrigin, requestId, handlers) {
|
|
|
30
30
|
case "klappay:pending":
|
|
31
31
|
handlers.onPending?.();
|
|
32
32
|
return;
|
|
33
|
+
case "klappay:confirming":
|
|
34
|
+
handlers.onConfirming?.({ txHash: message.txHash, network: message.network });
|
|
35
|
+
return;
|
|
33
36
|
case "klappay:resize":
|
|
34
37
|
handlers.onResize?.(message.height);
|
|
35
38
|
return;
|
|
@@ -252,6 +255,7 @@ function createKlappayOne(config) {
|
|
|
252
255
|
const stopListening = listen(config.origin, requestId, {
|
|
253
256
|
onReady: config.onReady,
|
|
254
257
|
onPending: config.onPending,
|
|
258
|
+
onConfirming: config.onConfirming,
|
|
255
259
|
onSuccess: (result) => {
|
|
256
260
|
stop();
|
|
257
261
|
config.onSuccess?.(result);
|
|
@@ -305,6 +309,7 @@ function createKlappayOne(config) {
|
|
|
305
309
|
frame.setDismissable(false);
|
|
306
310
|
config.onPending?.();
|
|
307
311
|
},
|
|
312
|
+
onConfirming: config.onConfirming,
|
|
308
313
|
onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
|
|
309
314
|
onError: (error) => settleOnce(() => config.onError?.(error)),
|
|
310
315
|
onCancel: (reason) => settleOnce(() => config.onCancel?.(reason)),
|
|
@@ -358,6 +363,9 @@ function wire(element) {
|
|
|
358
363
|
onPending: () => {
|
|
359
364
|
element.dispatchEvent(new CustomEvent("pending"));
|
|
360
365
|
},
|
|
366
|
+
onConfirming: (data) => {
|
|
367
|
+
element.dispatchEvent(new CustomEvent("confirming", { detail: data }));
|
|
368
|
+
},
|
|
361
369
|
onSuccess: (result) => {
|
|
362
370
|
clearBusy();
|
|
363
371
|
element.dispatchEvent(new CustomEvent("success", { detail: result }));
|
|
@@ -394,12 +402,18 @@ function observeNewElements(root = document.body) {
|
|
|
394
402
|
var KLAPPAY_BUTTON_TAG = "klappay-button";
|
|
395
403
|
var VARIANTS = ["white", "yellow", "black"];
|
|
396
404
|
var SIZES = ["sm", "md", "lg"];
|
|
405
|
+
var LABELS = ["full", "short"];
|
|
397
406
|
var DEFAULT_VARIANT = "black";
|
|
398
407
|
var DEFAULT_SIZE = "md";
|
|
408
|
+
var DEFAULT_LABEL = "full";
|
|
409
|
+
var LABEL_TEXT = {
|
|
410
|
+
full: "Pay with Klappay One",
|
|
411
|
+
short: "Klappay One"
|
|
412
|
+
};
|
|
399
413
|
var SIZE_STYLES = {
|
|
400
|
-
sm: { height: "32px", fontSize: "13px", padding: "0 14px", logoSize: "
|
|
401
|
-
md: { height: "40px", fontSize: "14px", padding: "0 18px", logoSize: "
|
|
402
|
-
lg: { height: "48px", fontSize: "16px", padding: "0 24px", logoSize: "
|
|
414
|
+
sm: { height: "32px", fontSize: "13px", padding: "0 14px", logoSize: "18px" },
|
|
415
|
+
md: { height: "40px", fontSize: "14px", padding: "0 18px", logoSize: "21px" },
|
|
416
|
+
lg: { height: "48px", fontSize: "16px", padding: "0 24px", logoSize: "23px" }
|
|
403
417
|
};
|
|
404
418
|
var LOGO_NO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
|
|
405
419
|
var LOGO_BLACK_INK_DATA_URI = "data:image/webp;base64,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";
|
|
@@ -420,6 +434,9 @@ function isVariant(value) {
|
|
|
420
434
|
function isSize(value) {
|
|
421
435
|
return SIZES.includes(value);
|
|
422
436
|
}
|
|
437
|
+
function isLabel(value) {
|
|
438
|
+
return LABELS.includes(value);
|
|
439
|
+
}
|
|
423
440
|
var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
|
|
424
441
|
};
|
|
425
442
|
var BUTTON_CSS = (() => {
|
|
@@ -456,10 +473,11 @@ var BUTTON_CSS = (() => {
|
|
|
456
473
|
})();
|
|
457
474
|
var KlappayButtonElement = class extends KlappayButtonBase {
|
|
458
475
|
static get observedAttributes() {
|
|
459
|
-
return ["variant", "size", "charge-id", "origin"];
|
|
476
|
+
return ["variant", "size", "label", "charge-id", "origin"];
|
|
460
477
|
}
|
|
461
478
|
#button;
|
|
462
479
|
#logo;
|
|
480
|
+
#labelEl;
|
|
463
481
|
#busy = false;
|
|
464
482
|
constructor() {
|
|
465
483
|
super();
|
|
@@ -469,20 +487,21 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
469
487
|
this.#logo = document.createElement("img");
|
|
470
488
|
this.#logo.alt = "";
|
|
471
489
|
this.#logo.setAttribute("aria-hidden", "true");
|
|
472
|
-
|
|
473
|
-
label.textContent = "Pay with Klappay";
|
|
490
|
+
this.#labelEl = document.createElement("span");
|
|
474
491
|
this.#button = document.createElement("button");
|
|
475
492
|
this.#button.type = "button";
|
|
476
|
-
this.#button.append(this.#logo,
|
|
493
|
+
this.#button.append(this.#logo, this.#labelEl);
|
|
477
494
|
this.#button.addEventListener("click", () => this.#handleClick());
|
|
478
495
|
shadow.append(style, this.#button);
|
|
479
496
|
this.#applyVariant();
|
|
480
497
|
this.#applySize();
|
|
498
|
+
this.#applyLabel();
|
|
481
499
|
this.#applyDisabled();
|
|
482
500
|
}
|
|
483
501
|
attributeChangedCallback(name) {
|
|
484
502
|
if (name === "variant") this.#applyVariant();
|
|
485
503
|
if (name === "size") this.#applySize();
|
|
504
|
+
if (name === "label") this.#applyLabel();
|
|
486
505
|
if (name === "charge-id" || name === "origin") this.#applyDisabled();
|
|
487
506
|
}
|
|
488
507
|
get variant() {
|
|
@@ -499,6 +518,13 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
499
518
|
set size(value) {
|
|
500
519
|
this.setAttribute("size", value);
|
|
501
520
|
}
|
|
521
|
+
get label() {
|
|
522
|
+
const value = this.getAttribute("label") ?? "";
|
|
523
|
+
return isLabel(value) ? value : DEFAULT_LABEL;
|
|
524
|
+
}
|
|
525
|
+
set label(value) {
|
|
526
|
+
this.setAttribute("label", value);
|
|
527
|
+
}
|
|
502
528
|
#applyVariant() {
|
|
503
529
|
this.#button.setAttribute("data-variant", this.variant);
|
|
504
530
|
this.#logo.src = VARIANT_LOGO_DATA_URI[this.variant];
|
|
@@ -506,6 +532,9 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
506
532
|
#applySize() {
|
|
507
533
|
this.#button.setAttribute("data-size", this.size);
|
|
508
534
|
}
|
|
535
|
+
#applyLabel() {
|
|
536
|
+
this.#labelEl.textContent = LABEL_TEXT[this.label];
|
|
537
|
+
}
|
|
509
538
|
// Only checks the origin *attribute*, not a `configure()` call made after
|
|
510
539
|
// this element was already upgraded — there's no subscription mechanism
|
|
511
540
|
// for global config changes. Set `origin` before this element is parsed,
|
|
@@ -551,6 +580,9 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
551
580
|
onPending: () => {
|
|
552
581
|
this.dispatchEvent(new CustomEvent("pending"));
|
|
553
582
|
},
|
|
583
|
+
onConfirming: (data) => {
|
|
584
|
+
this.dispatchEvent(new CustomEvent("confirming", { detail: data }));
|
|
585
|
+
},
|
|
554
586
|
onSuccess: (result) => {
|
|
555
587
|
reenable();
|
|
556
588
|
this.dispatchEvent(new CustomEvent("success", { detail: result }));
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
type KlappayButtonVariant = 'white' | 'yellow' | 'black';
|
|
2
2
|
type KlappayButtonSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
type KlappayButtonLabel = 'full' | 'short';
|
|
3
4
|
interface KlappayOneError {
|
|
4
5
|
code: string;
|
|
5
6
|
message: string;
|
|
@@ -18,6 +19,10 @@ interface KlappayOneConfig {
|
|
|
18
19
|
mode?: 'iframe' | 'popup';
|
|
19
20
|
onReady?: () => void;
|
|
20
21
|
onPending?: () => void;
|
|
22
|
+
onConfirming?: (data: {
|
|
23
|
+
txHash: string;
|
|
24
|
+
network: string;
|
|
25
|
+
}) => void;
|
|
21
26
|
onSuccess?: (result: PaymentResult) => void;
|
|
22
27
|
onError?: (error: KlappayOneError) => void;
|
|
23
28
|
onCancel?: (reason: 'user' | 'closed') => void;
|
|
@@ -32,6 +37,7 @@ interface KlappayButtonProps {
|
|
|
32
37
|
locale?: string;
|
|
33
38
|
variant?: KlappayButtonVariant;
|
|
34
39
|
size?: KlappayButtonSize;
|
|
40
|
+
label?: KlappayButtonLabel;
|
|
35
41
|
onSuccess?: (result: PaymentResult) => void;
|
|
36
42
|
onError?: (error: KlappayOneError) => void;
|
|
37
43
|
onCancel?: () => void;
|
|
@@ -45,6 +51,7 @@ declare global {
|
|
|
45
51
|
locale?: string;
|
|
46
52
|
variant?: KlappayButtonVariant;
|
|
47
53
|
size?: KlappayButtonSize;
|
|
54
|
+
label?: KlappayButtonLabel;
|
|
48
55
|
};
|
|
49
56
|
}
|
|
50
57
|
}
|
package/dist/react/index.js
CHANGED
|
@@ -33,6 +33,9 @@ function listen(klapOneOrigin, requestId, handlers) {
|
|
|
33
33
|
case "klappay:pending":
|
|
34
34
|
handlers.onPending?.();
|
|
35
35
|
return;
|
|
36
|
+
case "klappay:confirming":
|
|
37
|
+
handlers.onConfirming?.({ txHash: message.txHash, network: message.network });
|
|
38
|
+
return;
|
|
36
39
|
case "klappay:resize":
|
|
37
40
|
handlers.onResize?.(message.height);
|
|
38
41
|
return;
|
|
@@ -252,6 +255,7 @@ function createKlappayOne(config) {
|
|
|
252
255
|
const stopListening = listen(config.origin, requestId, {
|
|
253
256
|
onReady: config.onReady,
|
|
254
257
|
onPending: config.onPending,
|
|
258
|
+
onConfirming: config.onConfirming,
|
|
255
259
|
onSuccess: (result) => {
|
|
256
260
|
stop();
|
|
257
261
|
config.onSuccess?.(result);
|
|
@@ -305,6 +309,7 @@ function createKlappayOne(config) {
|
|
|
305
309
|
frame.setDismissable(false);
|
|
306
310
|
config.onPending?.();
|
|
307
311
|
},
|
|
312
|
+
onConfirming: config.onConfirming,
|
|
308
313
|
onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
|
|
309
314
|
onError: (error) => settleOnce(() => config.onError?.(error)),
|
|
310
315
|
onCancel: (reason) => settleOnce(() => config.onCancel?.(reason)),
|
|
@@ -327,12 +332,18 @@ function createKlappayOne(config) {
|
|
|
327
332
|
var KLAPPAY_BUTTON_TAG = "klappay-button";
|
|
328
333
|
var VARIANTS = ["white", "yellow", "black"];
|
|
329
334
|
var SIZES = ["sm", "md", "lg"];
|
|
335
|
+
var LABELS = ["full", "short"];
|
|
330
336
|
var DEFAULT_VARIANT = "black";
|
|
331
337
|
var DEFAULT_SIZE = "md";
|
|
338
|
+
var DEFAULT_LABEL = "full";
|
|
339
|
+
var LABEL_TEXT = {
|
|
340
|
+
full: "Pay with Klappay One",
|
|
341
|
+
short: "Klappay One"
|
|
342
|
+
};
|
|
332
343
|
var SIZE_STYLES = {
|
|
333
|
-
sm: { height: "32px", fontSize: "13px", padding: "0 14px", logoSize: "
|
|
334
|
-
md: { height: "40px", fontSize: "14px", padding: "0 18px", logoSize: "
|
|
335
|
-
lg: { height: "48px", fontSize: "16px", padding: "0 24px", logoSize: "
|
|
344
|
+
sm: { height: "32px", fontSize: "13px", padding: "0 14px", logoSize: "18px" },
|
|
345
|
+
md: { height: "40px", fontSize: "14px", padding: "0 18px", logoSize: "21px" },
|
|
346
|
+
lg: { height: "48px", fontSize: "16px", padding: "0 24px", logoSize: "23px" }
|
|
336
347
|
};
|
|
337
348
|
var LOGO_NO_BLACK_INK_DATA_URI = "data:image/webp;base64,UklGRowHAABXRUJQVlA4TIAHAAAvJ8AJEFXRrf/PkaRMkhfPRHABnI1e3aKqWld1z2mtpQW+1jCzr43p6VlEAD9v3DVVBBvTkcnGcybK5fWj7Y2BEMjipEkylI9aa5NA2eSiIY2xkPblwYaAFjkIC3s8osBfC5HQ2ZcAHubEchGM3xGchyaDS+PSuATW2whI5NxNA/P8eZcQHjYhSA7Ato0k1LAF7OtymCQJIgB6b8PrCph6bjo/ybFtq7ayfpJY150nR/bae68juGuPFG4ShCaNtu0y0CZph59t27Zt27Zt27Zt2/w5tm170uYldwJwmx/ihnXgMCrlH5vz12VKALLjfhgDkAOYBCQgy3L/wSBRLjGAEghxwyWU/aGSxWiPFEiRgflto5Xny3TzVIshxOI4rz+VWXaqnYDZKoBz9t+S6MBh9L68r8GccUt1hqp5ABmw4H4YcOhNF6+evOvTY3D6HYS4ZQQXr1CYPWjj75cQy2/KNJaUHbXKkui375KiaM6DVqt3cBTQpOTdoO3ZA1A1+y2fp2A1cy+fPnn9+RVWrqstFu9JeIwHRxfvrgSZuGj8c8xjcxknA60YsXyfYNnhxqD27j5Gnd5eunLdleEI/ltS5b7V4yVEKvQ9+4jtv494g53gUKNXzQsEKdZeT+DTd+cAB8SSUlNWMxLpViidmLLCpM8os3ODWtbiXKF5XICe3dpIWH5XTaTvNsdwQXrJwm+WCWhxy1ahpatSi35aJbH42qoiFv37xxmkclKhryCRCLrAUPyGrnFjiS84LrpB0R4OIv3yumv/qNA0ljuXrAaXeXvd5TX4djHhMBdBkM/Xnl7nu8wjGK1UTqTrNWIVLasT9MzT0oyn26F0YmSZKX35UoJIw38wE9pwpKRi2ZgV44pgmbViXLUgg+Ewdx1Zvgs4PXES0RLd3hULq6zSV3bFa4Yj1EsHc4r53ryZ1FdvxrytZ4gZvcdzUClmeqnOUGvs5PTdm3++wDcT3vReZo92K8cVPinW3M7w6BvBscyoMRCPL2uvz+HEpFpzEpQe3Vx3MhLSjEvPTfbut+2Ix/sZEol5zWOyLi1awddgDunYCvq42/uLflu/P4Nbej+5ePXoZbPQ8lm0IL12p7IStX7wo2mWlG5MPQu11q4alayTthml1BrsqudYdvWAHeYq+80AwxF3x4xuPeNX9t/4/aVNf6/qnH77aEATy0ZRzsyOHffDWD0eO6KC1F7UwIpn2SaZdnJjWs2cBOLx7yyRrBlq/dRKJ0Q3TS27QTJ8qDLEbQOJ5KCqtUw/3nbiy9dP+bSiCWfrKOJm0KXBJw2HbZnkpWtVe3TH+FzKNvPtUBFLiqOBWL+pM90OQSTtNPEctUAt/ZXnXnBBfarN6R9P3OUvC9j885bTPysul6neje0qgb8uE5rm6tpxM664GxTvvqr3wHlDTkypnDYwJ/buHa/v3UuViqfBNkP78q5RgRZ94r9Zf/Hlu4LMcS5ZrRKGQKQrh4llTXtupGp0IMqjhVzBFFTfW5FYdJg6Xjkjx7iM/fDJV1NfisUwfjmVjiGzDhwGc/4s9BW6ZTshDEeurrnJtBcZDr035jtva1o74DHeThRWF8tGkZzZGXFT2fPxsZxlRjaIRD/yo2HP3rj1h21b4beCnrJ0VmvKXmMhTsVBB24Z6OnV0IllP0edNL43PnXKed266M1YevHzfXiMU+Cvy0R5CLAkYjL/2NwYu7G65xwnZlsi1atgTj3NktlMY1Aw+uM0k0AIGCFghgBH9BDcmet92j2l5qzavVXsvX3ma2QSkTsBZw6YZZK/LhfY1KxLn+5B0LeqmadPz1XxV3AUTZWvMQTg/yIwvh84VQJ+9gPZRcB7NeCYAMAz9lCL1afT1qWjPjfnas4cz/9lDoo37raBSqEZAFwOlC4BWSGA+0uAez+wuwMwQoAl8pz9t6TRedKKhxmOCNr5yRTPktICJXv2MeZU8eqmHcxRqPauiRTAdUCNK4EGlwCuAGZTSaRvq+YrGA4890PtZSuOPXurpJJq6DU7IUNk8mozGZ0k1pvf/KPiGFVKphRMQXurpUo6S53/6adXzikAtNtJGwByAIMd72LaD5hy/8YPe+eqOGOb2gpzta0GGCsD2sBNwOoS4Hkl0BAJkH/9b5oVQ8z4G8uUg3vnPo9xz0NeGqk1hiBDZIIbgKb9wK9WCUi4HqibtDtwGPx1mQCMneOs8JEVt2umA/c8WC+jkiaW5EeDm16o+M0o7EZkM7kJ6NpqFYGzIVACCV5NZofuc07Z1h65xKpYYIW3zPas2uChJ6hTUac8YzdRs0PfnzCE6DZuABoXgUdFoC+QIFLiCz79cmHYSTHbXObYwDqeG4nwDxuDoitsM8ZMbFmon67IEL+ZALgRmHgaCfKPzfGzP3ze0kv9vmT1b/7kcW9zpVfcZlSssMm5lmNQx59VHBhD3KTZBJrJTUCX1o3APrwKpBK5f+CcPj6gPVkymm8weavv65cSAE5JVN9ECXgeAnQD0ARtAMgQOZRJDGAb1wN1QsAuAR/RRHQ2JEclBvZV3ASsal0P9A4BVunmTHANUPl6YDBuGwE=";
|
|
338
349
|
var LOGO_BLACK_INK_DATA_URI = "data:image/webp;base64,UklGRmIHAABXRUJQVlA4TFUHAAAvJ8AJEGZQ0LaN5PKHve+OQURMAEKO3vilU5sEGkiNJEmSvPkzGQoD7qrjNQBcg2kBLYKEURrAhT4QFwwzbdu4Gn8iBbi3BJK2Mc8zPcrdNgCANLjb6O58ABNh4gDCG3CCHSB9wueO7QP6ROd29gmgm+2fYztRk6rnVKACFEs42bNm/OzM7B5v8B4iCqAG+T2XDn6YUwHmtgBVyFZxXS14JqMC3QZudEtQCdhIVRAq8yXcjbCRu7lS3ZiU8EbqgNQ3YCNlZMpQC6gDvE9PuC2IQJJtvW2bLV378SY8yyjz5O+9iBSJQgAkJdqf5ABs28DRIPfM66oJgJJAuaVnAc+T1WVBkmzaVtyNaxvPtm3btm3btm3btv9t2+bae9AT4Md/DHjr4VEFzbK4HA/Ar8NjjwGAHvD6axgQHjt6jKEHtqBZHsH/kSQ5i2ECmEAJJpWzO/d24t9nGLbgv4XLfnzEtHwvCZwfAFjzsUfiuc1F6ZnwdRMDYY7pKIGVt2ZDa89Tn+vDnfgB696MLXjsTPeEWq/7N+CC89rgJ3J5v+7nayxhXEqv/BikrSuizEoZOqiA7JWIEsoDYY6q7TUfhCWm2OZW1+FEF4fv3Fs9jHn7U/VriQu/W/1Kt7I1y+dZh8cGrVG/jQlpQjISYWW5+yjjhpkpSZdw5YNlTwlT+zDclYgzK7tel84ZGSWh1Y16OODC5hqcsM2TgFzeR8dXGm/8Ip2ku0Q63/9ID5QaUqZXx0BUYjliykK80UsfXUnFOSWu58LXfY33mGzU69Za3LwWu/A7+rFHou6VilwU/4JASrSsoYMwTPbs4MJLiAvWNzDwuFsdQUI9kIqL5kxNnx3REf30MdOQNG+6Fids2IxrnT3hwvuuWcefpHk2Lo12JBXrdhPC/xYGYuIiL4xfVIh0F0vjx2quCFJR75AwKVd+nHA+G3fWjqyX11m7uvADaJ0Tz7Wxw7rfVbZmoe+x8d9nYm2MgfG+lUE1VwRXPjIzwYRmYXOKltX/aHwxJpg/Y8Y+UOLL2bkwbROse9JNuPHguNFZUfgo2n0cSHuZq3HC2BwBe7+c3n0gxNPXwNBdFKZoiaB8lU26mDeSMJIZos1/UZQQj/05sxCVaBWX6NnBBBOQDv2t/o1iadTtW3Aj8TpW2ZpVn+tF61rcXru68PV3JvyIMs/blcqUlIyU1xEmTNxNid4R5Xoe7FErCf2UJpFOUqFfwX9W58rX3/4Z19hreVa74bp8+quns+5N1+FENsq0ziWaZ4l1eOw+6GLgI9myS9d35WLRyMlIDUu0BCFe/ZhUeH9S5oUob/Pd6kqZ/pAwb1LCw2QmCINq6Agz+sYySlrzsKW0+/+4bp6DvCXiErWOcKUvjWxmapjZaN0XRinXHxUSQiD36CCES5TxRYVAKlSPxDeUCcrUX83Iv1d8+8pk3Scu/JCG796E18BXO3O1MTyK7sqjiA4M2v24MIqdiSCjSniwxgIXMGOKHgIToiheGhUFJYg9E8r1qJqVszbXiwsHzqdRB7504Z/vjnAUpGL1HCF4s2aIw7wVJzXm1J4djMGUqUyIXRICz1GOg5pm46TNaUh7HVxqXYud+7Glr+gJX667PTYTXliMa/i6J7jyV1w4UjT+50otclKmfzE6OB7GfGS8Nsq0zkXWVynMTvhNknHS+GxIKliaYFdiucg7+k85/0UJ5V3Ux+a5vCXF7oGvZrDu1mxsSp85dNePbyiDXyryUwYtxDVWGHWfu/ALxrwQR9EmnYMTPDtXuEdn3eXLRh4NwIQ6y5Q/GGfNzL1rovQQYEAAsn8UiXhY2r012LeOu18boDj9Z3RgEEqPnQJ+Gm9xBUPJ7Hg3/sJFjQlLLHpsfgAqoAxdKeEQjgI4XEsY4QBPuAEaAFj9SlfVmb9/7mOac+0TxfmYYJ+7EkzA+V56nhIflQAAAjzg/w+ni7bi/ZqPPZKbFkjXY658ShUnhWIJKegeHOh0hgkl30g0ggn+hZUZMAEIGnhAqpnwpOJsDwZX4psMHbs/lC4sFwNSogzjgyVRYqc5lcrWrIOEcPj/U2cogRjTMAYXg1ICZ88OyrhGP34LmgDg3tmq8f5LRON0obwzPFTMD3BYuVQ6f0Vpy45vo1uhgQv4RlTulyNEtYXxsDTSYjH/fY6zf5gpDtNWG6XdCPEVxwV3sLNvPXwUACc1lc6d0uXvFk04+/poB0rUzz9Khv4FmQ1h75eDbgXStWABrBGQT1agBRz9SadZRNXRW2p2l86Nwvl99+LLL1CGnD6surBbhW49iqPY+RbCK1miucbuD4ZHUdu8qhZrgbPehQmGs4Z9vPHJd8NFtxLK9VKYRq96eQlBifwVFao/4wQ+SW11bcY61zj3s6nXPONjgIkxljP7K1EXaVlz3f4aDtyHvKnSCiQLBo+Y8FixNcu6m2WjdjfGupXF2lh9qwgAX3kMXsIOPhC5BVBip0dLjzHcggUv2Fv2y6P+ksfYHqFekGV0T0YQofAzAgA=";
|
|
@@ -353,6 +364,9 @@ function isVariant(value) {
|
|
|
353
364
|
function isSize(value) {
|
|
354
365
|
return SIZES.includes(value);
|
|
355
366
|
}
|
|
367
|
+
function isLabel(value) {
|
|
368
|
+
return LABELS.includes(value);
|
|
369
|
+
}
|
|
356
370
|
var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
|
|
357
371
|
};
|
|
358
372
|
var BUTTON_CSS = (() => {
|
|
@@ -389,10 +403,11 @@ var BUTTON_CSS = (() => {
|
|
|
389
403
|
})();
|
|
390
404
|
var KlappayButtonElement = class extends KlappayButtonBase {
|
|
391
405
|
static get observedAttributes() {
|
|
392
|
-
return ["variant", "size", "charge-id", "origin"];
|
|
406
|
+
return ["variant", "size", "label", "charge-id", "origin"];
|
|
393
407
|
}
|
|
394
408
|
#button;
|
|
395
409
|
#logo;
|
|
410
|
+
#labelEl;
|
|
396
411
|
#busy = false;
|
|
397
412
|
constructor() {
|
|
398
413
|
super();
|
|
@@ -402,20 +417,21 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
402
417
|
this.#logo = document.createElement("img");
|
|
403
418
|
this.#logo.alt = "";
|
|
404
419
|
this.#logo.setAttribute("aria-hidden", "true");
|
|
405
|
-
|
|
406
|
-
label.textContent = "Pay with Klappay";
|
|
420
|
+
this.#labelEl = document.createElement("span");
|
|
407
421
|
this.#button = document.createElement("button");
|
|
408
422
|
this.#button.type = "button";
|
|
409
|
-
this.#button.append(this.#logo,
|
|
423
|
+
this.#button.append(this.#logo, this.#labelEl);
|
|
410
424
|
this.#button.addEventListener("click", () => this.#handleClick());
|
|
411
425
|
shadow.append(style, this.#button);
|
|
412
426
|
this.#applyVariant();
|
|
413
427
|
this.#applySize();
|
|
428
|
+
this.#applyLabel();
|
|
414
429
|
this.#applyDisabled();
|
|
415
430
|
}
|
|
416
431
|
attributeChangedCallback(name) {
|
|
417
432
|
if (name === "variant") this.#applyVariant();
|
|
418
433
|
if (name === "size") this.#applySize();
|
|
434
|
+
if (name === "label") this.#applyLabel();
|
|
419
435
|
if (name === "charge-id" || name === "origin") this.#applyDisabled();
|
|
420
436
|
}
|
|
421
437
|
get variant() {
|
|
@@ -432,6 +448,13 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
432
448
|
set size(value) {
|
|
433
449
|
this.setAttribute("size", value);
|
|
434
450
|
}
|
|
451
|
+
get label() {
|
|
452
|
+
const value = this.getAttribute("label") ?? "";
|
|
453
|
+
return isLabel(value) ? value : DEFAULT_LABEL;
|
|
454
|
+
}
|
|
455
|
+
set label(value) {
|
|
456
|
+
this.setAttribute("label", value);
|
|
457
|
+
}
|
|
435
458
|
#applyVariant() {
|
|
436
459
|
this.#button.setAttribute("data-variant", this.variant);
|
|
437
460
|
this.#logo.src = VARIANT_LOGO_DATA_URI[this.variant];
|
|
@@ -439,6 +462,9 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
439
462
|
#applySize() {
|
|
440
463
|
this.#button.setAttribute("data-size", this.size);
|
|
441
464
|
}
|
|
465
|
+
#applyLabel() {
|
|
466
|
+
this.#labelEl.textContent = LABEL_TEXT[this.label];
|
|
467
|
+
}
|
|
442
468
|
// Only checks the origin *attribute*, not a `configure()` call made after
|
|
443
469
|
// this element was already upgraded — there's no subscription mechanism
|
|
444
470
|
// for global config changes. Set `origin` before this element is parsed,
|
|
@@ -484,6 +510,9 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
484
510
|
onPending: () => {
|
|
485
511
|
this.dispatchEvent(new CustomEvent("pending"));
|
|
486
512
|
},
|
|
513
|
+
onConfirming: (data) => {
|
|
514
|
+
this.dispatchEvent(new CustomEvent("confirming", { detail: data }));
|
|
515
|
+
},
|
|
487
516
|
onSuccess: (result) => {
|
|
488
517
|
reenable();
|
|
489
518
|
this.dispatchEvent(new CustomEvent("success", { detail: result }));
|
|
@@ -547,7 +576,8 @@ function KlappayButton(props) {
|
|
|
547
576
|
origin: props.origin,
|
|
548
577
|
locale: props.locale,
|
|
549
578
|
variant: props.variant,
|
|
550
|
-
size: props.size
|
|
579
|
+
size: props.size,
|
|
580
|
+
label: props.label
|
|
551
581
|
}
|
|
552
582
|
);
|
|
553
583
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@klappay/one",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.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": [
|