@klappay/one 1.1.2 → 1.3.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 +6 -1
- package/dist/index.global.js +6 -6
- package/dist/index.js +46 -11
- package/dist/react/index.d.ts +6 -1
- package/dist/react/index.js +38 -9
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -15,9 +15,14 @@ interface KlappayOneConfig {
|
|
|
15
15
|
locale?: string;
|
|
16
16
|
mode?: 'iframe' | 'popup';
|
|
17
17
|
onReady?: () => void;
|
|
18
|
+
onPending?: () => void;
|
|
19
|
+
onConfirming?: (data: {
|
|
20
|
+
txHash: string;
|
|
21
|
+
network: string;
|
|
22
|
+
}) => void;
|
|
18
23
|
onSuccess?: (result: PaymentResult) => void;
|
|
19
24
|
onError?: (error: KlappayOneError) => void;
|
|
20
|
-
onCancel?: () => void;
|
|
25
|
+
onCancel?: (reason: 'user' | 'closed') => void;
|
|
21
26
|
}
|
|
22
27
|
interface KlappayOne {
|
|
23
28
|
open: () => 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
|
|
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 o in t)y(e,o,{get:t[o],enumerable:!0})},F=(e,t,o,a)=>{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:!(a=Y(t,i))||a.enumerable});return e};var X=e=>F(y({},"__esModule",{value:!0}),e);var fe={};j(fe,{configure:()=>k,createKlappayOne:()=>m});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 a=!1,i=setTimeout(()=>{a||o.onTimeout?.()},1e4);function r(n){if(n.origin!==e||!V(n.data)||n.data.requestId!==t)return;let s=n.data;switch(s.type){case"klappay:ready":a=!0,clearTimeout(i),o.onReady?.();return;case"klappay:success":o.onSuccess?.(s.result);return;case"klappay:error":o.onError?.(s.error);return;case"klappay:cancel":o.onCancel?.("user");return;case"klappay:pending":o.onPending?.();return;case"klappay:confirming":o.onConfirming?.({txHash:s.txHash,network:s.network});return;case"klappay:resize":o.onResize?.(s.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 b="cubic-bezier(0.16, 1, 0.3, 1)",Q=`
|
|
2
2
|
.backdrop {
|
|
3
3
|
position: fixed;
|
|
4
4
|
inset: 0;
|
|
@@ -63,10 +63,10 @@
|
|
|
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 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=
|
|
68
|
-
button[data-size="${
|
|
69
|
-
button[data-size="${
|
|
66
|
+
`;function x(e,t){let o=document.createElement("div"),a=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 s=document.createElement("iframe");s.className="frame",s.src=e,n.append(s),a.append(i,n),document.body.append(o);function u(c){let f=n.scrollTop<=0,A=n.scrollTop+n.clientHeight>=n.scrollHeight;(c.deltaY<0&&f||c.deltaY>0&&A)&&c.preventDefault()}document.addEventListener("wheel",u,{passive:!1});let p=!1;function d(){p||(p=!0,n.classList.add("visible"),s.classList.add("visible"))}requestAnimationFrame(d),setTimeout(d,320);let l=!1;function N(){if(l)return;l=!0;let c=!1;function f(){c||(c=!0,document.removeEventListener("wheel",u),o.remove())}function A(D){D.target===n&&(n.removeEventListener("transitionend",A),f())}n.addEventListener("transitionend",A),setTimeout(f,370),n.classList.remove("visible"),s.classList.remove("visible")}return{close:N,resize:c=>{s.style.height=`${c}px`},setDismissable:c=>{r=c}}}var J="klappay-one";function R(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,S={};function k(e){S=e}function g(){return S}function ee(e){return e.mode??(C(navigator.userAgent)?"popup":"iframe")}function m(e){function t(){ee(e)==="popup"?o():a()}function o(){let i=crypto.randomUUID(),r=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:i,locale:e.locale}),n=R(r);if(w(n)){e.onError?.(W);return}let s=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),s()}}function a(){let i=crypto.randomUUID(),r=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:i,locale:e.locale}),n=!1;function s(l){n||(n=!0,d(),l())}let u=x(r,()=>s(()=>e.onCancel?.("user"))),p=v(e.origin,i,{onReady:e.onReady,onPending:()=>{u.setDismissable(!1),e.onPending?.()},onConfirming:e.onConfirming,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(o)});function d(){p(),u.close()}}return{open:t}}var h="data-klappay-one",O="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(h);if(!t)return;let o=e.getAttribute(O)??g().origin;if(!o){console.error(`[${h}] has no origin \u2014 set ${O} or call KlappayOne.configure({ origin }).`);return}let a=e.getAttribute(te)??g().locale,i=e.getAttribute(ne);e.setAttribute(I,"");let r=()=>{e.removeAttribute(I)};m({chargeId:t,origin:o,locale:a,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 U(e=document){for(let t of e.querySelectorAll(`[${h}]`))T(t)}function M(e=document.body){let t=new MutationObserver(o=>{for(let a of o)for(let i of a.addedNodes)if(i instanceof Element){i.hasAttribute(h)&&T(i);for(let r of i.querySelectorAll(`[${h}]`))T(r)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var L="klappay-button",H=["white","yellow","black"],K=["sm","md","lg"],oe="black",ie="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"}},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},pe={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function de(e){return H.includes(e)}function ue(e){return K.includes(e)}var ge=typeof HTMLElement<"u"?HTMLElement:class{},me=(()=>{let e=H.map(o=>{let{background:a,color:i,border:r}=pe[o];return`button[data-variant="${o}"] { background: var(--klappay-background, ${a}); color: var(--klappay-color, ${i}); border: ${r}; }`}).join(`
|
|
67
|
+
`),t=K.map(o=>{let{height:a,fontSize:i,padding:r,logoSize:n}=re[o];return`
|
|
68
|
+
button[data-size="${o}"] { height: var(--klappay-button-height, ${a}); 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 ge{static get observedAttributes(){return["variant","size","charge-id","origin"]}#e;#t;#o=!1;constructor(){super();let t=this.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=me,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(o,this.#e),this.#i(),this.#r(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#i(),t==="size"&&this.#r(),(t==="charge-id"||t==="origin")&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return de(t)?t:oe}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return ue(t)?t:ie}set size(t){this.setAttribute("size",t)}#i(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=ce[this.variant]}#r(){this.#e.setAttribute("data-size",this.size)}#a(){let t=this.getAttribute("charge-id"),o=this.getAttribute("origin")??g().origin;return!!(t&&o)}#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 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 a=this.getAttribute("locale")??g().locale,i=this.getAttribute("mode");this.#o=!0,this.#n();let r=()=>{this.#o=!1,this.#n()};m({chargeId:t,origin:o,locale:a,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(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 X(fe);})();
|
package/dist/index.js
CHANGED
|
@@ -25,7 +25,13 @@ 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?.();
|
|
32
|
+
return;
|
|
33
|
+
case "klappay:confirming":
|
|
34
|
+
handlers.onConfirming?.({ txHash: message.txHash, network: message.network });
|
|
29
35
|
return;
|
|
30
36
|
case "klappay:resize":
|
|
31
37
|
handlers.onResize?.(message.height);
|
|
@@ -130,10 +136,11 @@ function openIframe(url, onDismiss) {
|
|
|
130
136
|
const shadow = host.attachShadow({ mode: "open" });
|
|
131
137
|
const style = document.createElement("style");
|
|
132
138
|
style.textContent = IFRAME_CSS;
|
|
139
|
+
let dismissable = true;
|
|
133
140
|
const backdrop = document.createElement("div");
|
|
134
141
|
backdrop.className = "backdrop";
|
|
135
142
|
backdrop.addEventListener("click", (event) => {
|
|
136
|
-
if (event.target === backdrop) onDismiss();
|
|
143
|
+
if (event.target === backdrop && dismissable) onDismiss();
|
|
137
144
|
});
|
|
138
145
|
const frame = document.createElement("iframe");
|
|
139
146
|
frame.className = "frame";
|
|
@@ -183,6 +190,9 @@ function openIframe(url, onDismiss) {
|
|
|
183
190
|
close,
|
|
184
191
|
resize: (height) => {
|
|
185
192
|
frame.style.height = `${height}px`;
|
|
193
|
+
},
|
|
194
|
+
setDismissable: (canDismiss) => {
|
|
195
|
+
dismissable = canDismiss;
|
|
186
196
|
}
|
|
187
197
|
};
|
|
188
198
|
}
|
|
@@ -244,6 +254,8 @@ function createKlappayOne(config) {
|
|
|
244
254
|
}
|
|
245
255
|
const stopListening = listen(config.origin, requestId, {
|
|
246
256
|
onReady: config.onReady,
|
|
257
|
+
onPending: config.onPending,
|
|
258
|
+
onConfirming: config.onConfirming,
|
|
247
259
|
onSuccess: (result) => {
|
|
248
260
|
stop();
|
|
249
261
|
config.onSuccess?.(result);
|
|
@@ -252,9 +264,9 @@ function createKlappayOne(config) {
|
|
|
252
264
|
stop();
|
|
253
265
|
config.onError?.(error);
|
|
254
266
|
},
|
|
255
|
-
onCancel: () => {
|
|
267
|
+
onCancel: (reason) => {
|
|
256
268
|
stop();
|
|
257
|
-
config.onCancel?.();
|
|
269
|
+
config.onCancel?.(reason);
|
|
258
270
|
},
|
|
259
271
|
onTimeout: () => {
|
|
260
272
|
stop();
|
|
@@ -264,7 +276,7 @@ function createKlappayOne(config) {
|
|
|
264
276
|
const pollClosed = setInterval(() => {
|
|
265
277
|
if (isPopupClosed(popup)) {
|
|
266
278
|
stop();
|
|
267
|
-
config.onCancel?.();
|
|
279
|
+
config.onCancel?.("closed");
|
|
268
280
|
}
|
|
269
281
|
}, POPUP_CLOSED_POLL_MS);
|
|
270
282
|
function stop() {
|
|
@@ -287,12 +299,20 @@ function createKlappayOne(config) {
|
|
|
287
299
|
stop();
|
|
288
300
|
run();
|
|
289
301
|
}
|
|
290
|
-
const frame = openIframe(url, () => settleOnce(() => config.onCancel?.()));
|
|
302
|
+
const frame = openIframe(url, () => settleOnce(() => config.onCancel?.("user")));
|
|
291
303
|
const stopListening = listen(config.origin, requestId, {
|
|
292
304
|
onReady: config.onReady,
|
|
305
|
+
// Not wrapped in settleOnce — this isn't a terminal outcome, and the
|
|
306
|
+
// payment is now past the point where a backdrop dismiss should be
|
|
307
|
+
// allowed to silently orphan it.
|
|
308
|
+
onPending: () => {
|
|
309
|
+
frame.setDismissable(false);
|
|
310
|
+
config.onPending?.();
|
|
311
|
+
},
|
|
312
|
+
onConfirming: config.onConfirming,
|
|
293
313
|
onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
|
|
294
314
|
onError: (error) => settleOnce(() => config.onError?.(error)),
|
|
295
|
-
onCancel: () => settleOnce(() => config.onCancel?.()),
|
|
315
|
+
onCancel: (reason) => settleOnce(() => config.onCancel?.(reason)),
|
|
296
316
|
onResize: (height) => frame.resize(height),
|
|
297
317
|
// A merchant CSP blocking frame-src/child-src for this domain would
|
|
298
318
|
// otherwise leave the iframe silently blank forever — one automatic
|
|
@@ -340,6 +360,12 @@ function wire(element) {
|
|
|
340
360
|
origin,
|
|
341
361
|
locale,
|
|
342
362
|
mode: mode === "iframe" || mode === "popup" ? mode : void 0,
|
|
363
|
+
onPending: () => {
|
|
364
|
+
element.dispatchEvent(new CustomEvent("pending"));
|
|
365
|
+
},
|
|
366
|
+
onConfirming: (data) => {
|
|
367
|
+
element.dispatchEvent(new CustomEvent("confirming", { detail: data }));
|
|
368
|
+
},
|
|
343
369
|
onSuccess: (result) => {
|
|
344
370
|
clearBusy();
|
|
345
371
|
element.dispatchEvent(new CustomEvent("success", { detail: result }));
|
|
@@ -348,9 +374,9 @@ function wire(element) {
|
|
|
348
374
|
clearBusy();
|
|
349
375
|
element.dispatchEvent(new CustomEvent("error", { detail: error }));
|
|
350
376
|
},
|
|
351
|
-
onCancel: () => {
|
|
377
|
+
onCancel: (reason) => {
|
|
352
378
|
clearBusy();
|
|
353
|
-
element.dispatchEvent(new CustomEvent("cancel"));
|
|
379
|
+
element.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
|
|
354
380
|
}
|
|
355
381
|
}).open();
|
|
356
382
|
});
|
|
@@ -527,6 +553,15 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
527
553
|
origin,
|
|
528
554
|
locale,
|
|
529
555
|
mode: mode === "iframe" || mode === "popup" ? mode : void 0,
|
|
556
|
+
// Not a terminal outcome — the button stays busy/disabled exactly as
|
|
557
|
+
// it already is, this only forwards the signal for a page that wants
|
|
558
|
+
// to persist state before the wallet responds.
|
|
559
|
+
onPending: () => {
|
|
560
|
+
this.dispatchEvent(new CustomEvent("pending"));
|
|
561
|
+
},
|
|
562
|
+
onConfirming: (data) => {
|
|
563
|
+
this.dispatchEvent(new CustomEvent("confirming", { detail: data }));
|
|
564
|
+
},
|
|
530
565
|
onSuccess: (result) => {
|
|
531
566
|
reenable();
|
|
532
567
|
this.dispatchEvent(new CustomEvent("success", { detail: result }));
|
|
@@ -535,9 +570,9 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
535
570
|
reenable();
|
|
536
571
|
this.dispatchEvent(new CustomEvent("error", { detail: error }));
|
|
537
572
|
},
|
|
538
|
-
onCancel: () => {
|
|
573
|
+
onCancel: (reason) => {
|
|
539
574
|
reenable();
|
|
540
|
-
this.dispatchEvent(new CustomEvent("cancel"));
|
|
575
|
+
this.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
|
|
541
576
|
}
|
|
542
577
|
}).open();
|
|
543
578
|
}
|
package/dist/react/index.d.ts
CHANGED
|
@@ -17,9 +17,14 @@ interface KlappayOneConfig {
|
|
|
17
17
|
locale?: string;
|
|
18
18
|
mode?: 'iframe' | 'popup';
|
|
19
19
|
onReady?: () => void;
|
|
20
|
+
onPending?: () => void;
|
|
21
|
+
onConfirming?: (data: {
|
|
22
|
+
txHash: string;
|
|
23
|
+
network: string;
|
|
24
|
+
}) => void;
|
|
20
25
|
onSuccess?: (result: PaymentResult) => void;
|
|
21
26
|
onError?: (error: KlappayOneError) => void;
|
|
22
|
-
onCancel?: () => void;
|
|
27
|
+
onCancel?: (reason: 'user' | 'closed') => void;
|
|
23
28
|
}
|
|
24
29
|
|
|
25
30
|
declare function useKlappayOne(config: KlappayOneConfig): {
|
package/dist/react/index.js
CHANGED
|
@@ -28,7 +28,13 @@ 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?.();
|
|
35
|
+
return;
|
|
36
|
+
case "klappay:confirming":
|
|
37
|
+
handlers.onConfirming?.({ txHash: message.txHash, network: message.network });
|
|
32
38
|
return;
|
|
33
39
|
case "klappay:resize":
|
|
34
40
|
handlers.onResize?.(message.height);
|
|
@@ -133,10 +139,11 @@ function openIframe(url, onDismiss) {
|
|
|
133
139
|
const shadow = host.attachShadow({ mode: "open" });
|
|
134
140
|
const style = document.createElement("style");
|
|
135
141
|
style.textContent = IFRAME_CSS;
|
|
142
|
+
let dismissable = true;
|
|
136
143
|
const backdrop = document.createElement("div");
|
|
137
144
|
backdrop.className = "backdrop";
|
|
138
145
|
backdrop.addEventListener("click", (event) => {
|
|
139
|
-
if (event.target === backdrop) onDismiss();
|
|
146
|
+
if (event.target === backdrop && dismissable) onDismiss();
|
|
140
147
|
});
|
|
141
148
|
const frame = document.createElement("iframe");
|
|
142
149
|
frame.className = "frame";
|
|
@@ -186,6 +193,9 @@ function openIframe(url, onDismiss) {
|
|
|
186
193
|
close,
|
|
187
194
|
resize: (height) => {
|
|
188
195
|
frame.style.height = `${height}px`;
|
|
196
|
+
},
|
|
197
|
+
setDismissable: (canDismiss) => {
|
|
198
|
+
dismissable = canDismiss;
|
|
189
199
|
}
|
|
190
200
|
};
|
|
191
201
|
}
|
|
@@ -244,6 +254,8 @@ function createKlappayOne(config) {
|
|
|
244
254
|
}
|
|
245
255
|
const stopListening = listen(config.origin, requestId, {
|
|
246
256
|
onReady: config.onReady,
|
|
257
|
+
onPending: config.onPending,
|
|
258
|
+
onConfirming: config.onConfirming,
|
|
247
259
|
onSuccess: (result) => {
|
|
248
260
|
stop();
|
|
249
261
|
config.onSuccess?.(result);
|
|
@@ -252,9 +264,9 @@ function createKlappayOne(config) {
|
|
|
252
264
|
stop();
|
|
253
265
|
config.onError?.(error);
|
|
254
266
|
},
|
|
255
|
-
onCancel: () => {
|
|
267
|
+
onCancel: (reason) => {
|
|
256
268
|
stop();
|
|
257
|
-
config.onCancel?.();
|
|
269
|
+
config.onCancel?.(reason);
|
|
258
270
|
},
|
|
259
271
|
onTimeout: () => {
|
|
260
272
|
stop();
|
|
@@ -264,7 +276,7 @@ function createKlappayOne(config) {
|
|
|
264
276
|
const pollClosed = setInterval(() => {
|
|
265
277
|
if (isPopupClosed(popup)) {
|
|
266
278
|
stop();
|
|
267
|
-
config.onCancel?.();
|
|
279
|
+
config.onCancel?.("closed");
|
|
268
280
|
}
|
|
269
281
|
}, POPUP_CLOSED_POLL_MS);
|
|
270
282
|
function stop() {
|
|
@@ -287,12 +299,20 @@ function createKlappayOne(config) {
|
|
|
287
299
|
stop();
|
|
288
300
|
run();
|
|
289
301
|
}
|
|
290
|
-
const frame = openIframe(url, () => settleOnce(() => config.onCancel?.()));
|
|
302
|
+
const frame = openIframe(url, () => settleOnce(() => config.onCancel?.("user")));
|
|
291
303
|
const stopListening = listen(config.origin, requestId, {
|
|
292
304
|
onReady: config.onReady,
|
|
305
|
+
// Not wrapped in settleOnce — this isn't a terminal outcome, and the
|
|
306
|
+
// payment is now past the point where a backdrop dismiss should be
|
|
307
|
+
// allowed to silently orphan it.
|
|
308
|
+
onPending: () => {
|
|
309
|
+
frame.setDismissable(false);
|
|
310
|
+
config.onPending?.();
|
|
311
|
+
},
|
|
312
|
+
onConfirming: config.onConfirming,
|
|
293
313
|
onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
|
|
294
314
|
onError: (error) => settleOnce(() => config.onError?.(error)),
|
|
295
|
-
onCancel: () => settleOnce(() => config.onCancel?.()),
|
|
315
|
+
onCancel: (reason) => settleOnce(() => config.onCancel?.(reason)),
|
|
296
316
|
onResize: (height) => frame.resize(height),
|
|
297
317
|
// A merchant CSP blocking frame-src/child-src for this domain would
|
|
298
318
|
// otherwise leave the iframe silently blank forever — one automatic
|
|
@@ -463,6 +483,15 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
463
483
|
origin,
|
|
464
484
|
locale,
|
|
465
485
|
mode: mode === "iframe" || mode === "popup" ? mode : void 0,
|
|
486
|
+
// Not a terminal outcome — the button stays busy/disabled exactly as
|
|
487
|
+
// it already is, this only forwards the signal for a page that wants
|
|
488
|
+
// to persist state before the wallet responds.
|
|
489
|
+
onPending: () => {
|
|
490
|
+
this.dispatchEvent(new CustomEvent("pending"));
|
|
491
|
+
},
|
|
492
|
+
onConfirming: (data) => {
|
|
493
|
+
this.dispatchEvent(new CustomEvent("confirming", { detail: data }));
|
|
494
|
+
},
|
|
466
495
|
onSuccess: (result) => {
|
|
467
496
|
reenable();
|
|
468
497
|
this.dispatchEvent(new CustomEvent("success", { detail: result }));
|
|
@@ -471,9 +500,9 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
471
500
|
reenable();
|
|
472
501
|
this.dispatchEvent(new CustomEvent("error", { detail: error }));
|
|
473
502
|
},
|
|
474
|
-
onCancel: () => {
|
|
503
|
+
onCancel: (reason) => {
|
|
475
504
|
reenable();
|
|
476
|
-
this.dispatchEvent(new CustomEvent("cancel"));
|
|
505
|
+
this.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
|
|
477
506
|
}
|
|
478
507
|
}).open();
|
|
479
508
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@klappay/one",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.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": [
|