@klappay/one 1.1.2 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -1
- package/dist/index.global.js +6 -6
- package/dist/index.js +35 -11
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.js +30 -9
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -15,9 +15,10 @@ interface KlappayOneConfig {
|
|
|
15
15
|
locale?: string;
|
|
16
16
|
mode?: 'iframe' | 'popup';
|
|
17
17
|
onReady?: () => void;
|
|
18
|
+
onPending?: () => void;
|
|
18
19
|
onSuccess?: (result: PaymentResult) => void;
|
|
19
20
|
onError?: (error: KlappayOneError) => void;
|
|
20
|
-
onCancel?: () => void;
|
|
21
|
+
onCancel?: (reason: 'user' | 'closed') => void;
|
|
21
22
|
}
|
|
22
23
|
interface KlappayOne {
|
|
23
24
|
open: () => void;
|
package/dist/index.global.js
CHANGED
|
@@ -1,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 n in t)y(e,n,{get:t[n],enumerable:!0})},F=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of G(t))!Z.call(e,r)&&r!==n&&y(e,r,{get:()=>t[r],enumerable:!(a=Y(t,r))||a.enumerable});return e};var X=e=>F(y({},"__esModule",{value:!0}),e);var fe={};j(fe,{configure:()=>O,createKlappayOne:()=>h});function V(e){return typeof e=="object"&&e!==null&&"type"in e&&typeof e.type=="string"&&e.type.startsWith("klappay:")&&"requestId"in e&&typeof e.requestId=="string"}function v(e,t,n){let a=!1,r=setTimeout(()=>{a||n.onTimeout?.()},1e4);function i(o){if(o.origin!==e||!V(o.data)||o.data.requestId!==t)return;let s=o.data;switch(s.type){case"klappay:ready":a=!0,clearTimeout(r),n.onReady?.();return;case"klappay:success":n.onSuccess?.(s.result);return;case"klappay:error":n.onError?.(s.error);return;case"klappay:cancel":n.onCancel?.("user");return;case"klappay:pending":n.onPending?.();return;case"klappay:resize":n.onResize?.(s.height);return}}return window.addEventListener("message",i),()=>{clearTimeout(r),window.removeEventListener("message",i)}}function E(e){let t=new URL("/id/",e.klapOneOrigin);return t.searchParams.set("chargeId",e.chargeId),t.searchParams.set("requestId",e.requestId),t.searchParams.set("returnOrigin",window.location.origin),e.locale&&t.searchParams.set("locale",e.locale),t.toString()}var q=/Android|iPhone|iPad|iPod/i;function x(e){return q.test(e)}var b="cubic-bezier(0.16, 1, 0.3, 1)",Q=`
|
|
2
2
|
.backdrop {
|
|
3
3
|
position: fixed;
|
|
4
4
|
inset: 0;
|
|
@@ -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=H.map(n=>{let{height:a,fontSize:r,padding:
|
|
68
|
-
button[data-size="${n}"] { height: var(--klappay-button-height, ${a}); font-size: ${r}; padding: ${
|
|
69
|
-
button[data-size="${n}"] img { width: ${
|
|
66
|
+
`;function R(e,t){let n=document.createElement("div"),a=n.attachShadow({mode:"open"}),r=document.createElement("style");r.textContent=Q;let i=!0,o=document.createElement("div");o.className="backdrop",o.addEventListener("click",c=>{c.target===o&&i&&t()});let s=document.createElement("iframe");s.className="frame",s.src=e,o.append(s),a.append(r,o),document.body.append(n);function u(c){let f=o.scrollTop<=0,A=o.scrollTop+o.clientHeight>=o.scrollHeight;(c.deltaY<0&&f||c.deltaY>0&&A)&&c.preventDefault()}document.addEventListener("wheel",u,{passive:!1});let d=!1;function p(){d||(d=!0,o.classList.add("visible"),s.classList.add("visible"))}requestAnimationFrame(p),setTimeout(p,320);let l=!1;function N(){if(l)return;l=!0;let c=!1;function f(){c||(c=!0,document.removeEventListener("wheel",u),n.remove())}function A(D){D.target===o&&(o.removeEventListener("transitionend",A),f())}o.addEventListener("transitionend",A),setTimeout(f,370),o.classList.remove("visible"),s.classList.remove("visible")}return{close:N,resize:c=>{s.style.height=`${c}px`},setDismissable:c=>{i=c}}}var J="klappay-one";function S(e){let t=window.screenX+(window.outerWidth-420)/2,n=window.screenY+(window.outerHeight-720)/2;return window.open(e,J,`width=420,height=720,left=${t},top=${n}`)}function w(e){return e===null||e.closed}var W={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},_={code:"FRAME_TIMEOUT",message:"The Klappay One popup did not respond in time."},$=500,C={};function O(e){C=e}function g(){return C}function ee(e){return e.mode??(x(navigator.userAgent)?"popup":"iframe")}function h(e){function t(){ee(e)==="popup"?n():a()}function n(){let r=crypto.randomUUID(),i=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:r,locale:e.locale}),o=S(i);if(w(o)){e.onError?.(W);return}let s=v(e.origin,r,{onReady:e.onReady,onPending:e.onPending,onSuccess:p=>{d(),e.onSuccess?.(p)},onError:p=>{d(),e.onError?.(p)},onCancel:p=>{d(),e.onCancel?.(p)},onTimeout:()=>{d(),e.onError?.(_)}}),u=setInterval(()=>{w(o)&&(d(),e.onCancel?.("closed"))},$);function d(){clearInterval(u),s()}}function a(){let r=crypto.randomUUID(),i=E({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:r,locale:e.locale}),o=!1;function s(l){o||(o=!0,p(),l())}let u=R(i,()=>s(()=>e.onCancel?.("user"))),d=v(e.origin,r,{onReady:e.onReady,onPending:()=>{u.setDismissable(!1),e.onPending?.()},onSuccess:l=>s(()=>e.onSuccess?.(l)),onError:l=>s(()=>e.onError?.(l)),onCancel:l=>s(()=>e.onCancel?.(l)),onResize:l=>u.resize(l),onTimeout:()=>s(n)});function p(){d(),u.close()}}return{open:t}}var m="data-klappay-one",k="data-klappay-one-origin",te="data-klappay-one-locale",ne="data-klappay-one-mode",P="data-klappay-one-wired",I="data-klappay-one-busy";function T(e){e.hasAttribute(P)||(e.setAttribute(P,""),e.addEventListener("click",()=>{if(e.hasAttribute(I))return;let t=e.getAttribute(m);if(!t)return;let n=e.getAttribute(k)??g().origin;if(!n){console.error(`[${m}] has no origin \u2014 set ${k} or call KlappayOne.configure({ origin }).`);return}let a=e.getAttribute(te)??g().locale,r=e.getAttribute(ne);e.setAttribute(I,"");let i=()=>{e.removeAttribute(I)};h({chargeId:t,origin:n,locale:a,mode:r==="iframe"||r==="popup"?r:void 0,onPending:()=>{e.dispatchEvent(new CustomEvent("pending"))},onSuccess:o=>{i(),e.dispatchEvent(new CustomEvent("success",{detail:o}))},onError:o=>{i(),e.dispatchEvent(new CustomEvent("error",{detail:o}))},onCancel:o=>{i(),e.dispatchEvent(new CustomEvent("cancel",{detail:{reason:o}}))}}).open()}))}function U(e=document){for(let t of e.querySelectorAll(`[${m}]`))T(t)}function M(e=document.body){let t=new MutationObserver(n=>{for(let a of n)for(let r of a.addedNodes)if(r instanceof Element){r.hasAttribute(m)&&T(r);for(let i of r.querySelectorAll(`[${m}]`))T(i)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var L="klappay-button",K=["white","yellow","black"],H=["sm","md","lg"],oe="black",re="md",ie={sm:{height:"32px",fontSize:"13px",padding:"0 14px",logoSize:"14px"},md:{height:"40px",fontSize:"14px",padding:"0 18px",logoSize:"16px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px",logoSize:"18px"}},ae="data:image/webp;base64,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",se="data:image/webp;base64,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",le="data:image/webp;base64,UklGRmwFAABXRUJQVlA4TGAFAAAvJ8AJEDXRjbZ/ld2ImZmZmZnhMjMzMzMcMzO3oCZ/wR4wx7/oKjO2wf6bamCMaJ3hFiEqwnA0J1YFvrljj0OHLuBmvw48ys6MI5egMgxNbPybcagKVtSBIvXgSKFLuNm/hQ23EAcEghDxfzMG0rYJ9y952yVBkm3aVti2bdu2jZGNmW2/923bto1n27Z58O7GBODD6B4wxcKSB5sCM5bCn0RwLHl5SCmwI+KjZj0C0SQG8SYFawVOrIEnSTxiqMlHW4HbSB7cBdjk4tuAkAJrLD4jAP3AO+iuQ9Z89ON07MuQzyR2GLAveBvLJ0vhiMZiOqS9go0GFI0EYT8VeiRwN/dORpA6BNQTPAhcS56rI5xzYwErWUzi3kBwH7A/SwqCRUiuYakXmMYCL8fcyDbSB4BpOKiQkhp0l/Z2iWZCfF8JVzDfbDuVlyv++/3BbSS6Yjhjs8jkzz1wG4nDZgoM4onQBXjcRdxIUG+w8GNEQfImfAaB5HL2rtConaxfB08xxtOhWC6EvhHzMtRK8alFzdTlquXCUJAU69m8FKMQemweBsql5lb4d/kV2xPBl1ZsKpDaxJzFnnw+taC2hYkxgJ3M3giXjtMKvK5fIhj0sMefboXgKQDBw4HVBJaRcYBHgqrwT6LyAFlLIBX0g/juEVMBtyGtIwXjXTyIJuSf69CdBkOQL4VnZVwcDCaxmcVL0ZnDIVvhW0cmn17nJyu4kE5WF7+exY97YNMCuDawY48HJnP6dC2pEwHMIw5FUbOcLUFWvH2O4t/r/HoqtXOgPGsgcvGaDdkbLBZBXYuhqQVwbPVbtjyRwvEmJEL520k8BdjAraeIR4HaODYKSLyCg99ncFRBwpb/rODRoGYK9sGC2gDTBzMBQn4aQc2lGOxlzSK5kAM/+gXxTI5GA4h8CTwtISucq53siab3KoRcCpymBt4KRwrnv2Y+nsfJbCIfYRLzISxSf7KQxi0sWXIe9CW41aBUzOVqKhUEtfBwer22ibriqb3czltMxERMTEQfFhA+F+pAE0lXobyOWevrWiJ0mDnIhjApSU4CZlO3gzFBesVSiFROJ9Nah9Zuxmw5H7oNFx14QUH8V4vE35nWJHWRHU/b/5uY9smuUs6d14M7YC3FfQJAENtMxETswMRd2ZRMgiEGgdN4d9jUhWYV6eMBvcFkWG5jLYz/g0Fnr0beRIN3U1LAi042xF83E+3H5E9o9Fwtd0MYDuCrxxDJbJ7XoZUHmwPADLADnIAQwKtRxb3jkTQtZ1kYolXsX4skIiLABvgAH4FJYBHoBlgR8cLh6xDPwiuRpi1QJZStZEeqsBaPASmYOwBywDSwC2wCn4A0L+I+WNLRyeb3QojZ0JtYy6K1Il7F8s1S0XuggTgHgAWQBmQAvj+8iHgnQn7seKSUlu1jItb3ehHHHNDr9ToREa9EZC+7PklELJmMLoYqxUjF0enu9naUoJRP0QbGpkF2SiajPAZYSawCt5YbEARKgKYf0DxSjEgYRpFUfeaRxESsxZ5U7uxHzR8BB+AnsAd0AJLoeL4evfC5s5gtwaT3QAwPr4HP1AL8gNVXgfOAqFvl3LECitO321VcnQhhExE7yDHBKCY7FO5zqA0YAHcAI4Db7VRB81g4oQlMJjKwtS5s5/diyBO2ENY40B7+hOKcBZ+JOruf6XYi4kUgElD2IpqnM1AM4d5S1vxYruZbA2+S+R9E6y7+RHKjHLdGxDrwXvS+9jNQ6UZENPf/Fkfl2cUc+rFQg7MCv+s/vFefAZoAEtBQQXS6LwLiR914bwP2wBZwD2BDnU6894H8d/716rkvATUg/Kjz/nGfAw==",ce={black:ae,yellow:le,white:se},de={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function pe(e){return K.includes(e)}function ue(e){return H.includes(e)}var ge=typeof HTMLElement<"u"?HTMLElement:class{},he=(()=>{let e=K.map(n=>{let{background:a,color:r,border:i}=de[n];return`button[data-variant="${n}"] { background: var(--klappay-background, ${a}); color: var(--klappay-color, ${r}); border: ${i}; }`}).join(`
|
|
67
|
+
`),t=H.map(n=>{let{height:a,fontSize:r,padding:i,logoSize:o}=ie[n];return`
|
|
68
|
+
button[data-size="${n}"] { height: var(--klappay-button-height, ${a}); font-size: ${r}; padding: ${i}; }
|
|
69
|
+
button[data-size="${n}"] img { width: ${o}; height: ${o}; }
|
|
70
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"}),n=document.createElement("style");n.textContent=he,this.#t=document.createElement("img"),this.#t.alt="",this.#t.setAttribute("aria-hidden","true");let a=document.createElement("span");a.textContent="Pay with Klappay",this.#e=document.createElement("button"),this.#e.type="button",this.#e.append(this.#t,a),this.#e.addEventListener("click",()=>this.#s()),t.append(n,this.#e),this.#r(),this.#i(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#r(),t==="size"&&this.#i(),(t==="charge-id"||t==="origin")&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return pe(t)?t:oe}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return ue(t)?t:re}set size(t){this.setAttribute("size",t)}#r(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=ce[this.variant]}#i(){this.#e.setAttribute("data-size",this.size)}#a(){let t=this.getAttribute("charge-id"),n=this.getAttribute("origin")??g().origin;return!!(t&&n)}#n(){this.#e.disabled=this.#o||!this.#a()}#s(){if(this.#e.disabled)return;let t=this.getAttribute("charge-id");if(!t){console.error("<klappay-button> is missing a required charge-id attribute.");return}let n=this.getAttribute("origin")??g().origin;if(!n){console.error("<klappay-button> has no origin \u2014 set the origin attribute or call KlappayOne.configure({ origin }).");return}let a=this.getAttribute("locale")??g().locale,r=this.getAttribute("mode");this.#o=!0,this.#n();let i=()=>{this.#o=!1,this.#n()};h({chargeId:t,origin:n,locale:a,mode:r==="iframe"||r==="popup"?r:void 0,onPending:()=>{this.dispatchEvent(new CustomEvent("pending"))},onSuccess:o=>{i(),this.dispatchEvent(new CustomEvent("success",{detail:o}))},onError:o=>{i(),this.dispatchEvent(new CustomEvent("error",{detail:o}))},onCancel:o=>{i(),this.dispatchEvent(new CustomEvent("cancel",{detail:{reason:o}}))}}).open()}};function z(){typeof customElements>"u"||customElements.get(L)||customElements.define(L,B)}z();if(typeof document<"u"){let e=function(){U(),M()};me=e,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()}var me;return X(fe);})();
|
package/dist/index.js
CHANGED
|
@@ -25,7 +25,10 @@ function listen(klapOneOrigin, requestId, handlers) {
|
|
|
25
25
|
handlers.onError?.(message.error);
|
|
26
26
|
return;
|
|
27
27
|
case "klappay:cancel":
|
|
28
|
-
handlers.onCancel?.();
|
|
28
|
+
handlers.onCancel?.("user");
|
|
29
|
+
return;
|
|
30
|
+
case "klappay:pending":
|
|
31
|
+
handlers.onPending?.();
|
|
29
32
|
return;
|
|
30
33
|
case "klappay:resize":
|
|
31
34
|
handlers.onResize?.(message.height);
|
|
@@ -130,10 +133,11 @@ function openIframe(url, onDismiss) {
|
|
|
130
133
|
const shadow = host.attachShadow({ mode: "open" });
|
|
131
134
|
const style = document.createElement("style");
|
|
132
135
|
style.textContent = IFRAME_CSS;
|
|
136
|
+
let dismissable = true;
|
|
133
137
|
const backdrop = document.createElement("div");
|
|
134
138
|
backdrop.className = "backdrop";
|
|
135
139
|
backdrop.addEventListener("click", (event) => {
|
|
136
|
-
if (event.target === backdrop) onDismiss();
|
|
140
|
+
if (event.target === backdrop && dismissable) onDismiss();
|
|
137
141
|
});
|
|
138
142
|
const frame = document.createElement("iframe");
|
|
139
143
|
frame.className = "frame";
|
|
@@ -183,6 +187,9 @@ function openIframe(url, onDismiss) {
|
|
|
183
187
|
close,
|
|
184
188
|
resize: (height) => {
|
|
185
189
|
frame.style.height = `${height}px`;
|
|
190
|
+
},
|
|
191
|
+
setDismissable: (canDismiss) => {
|
|
192
|
+
dismissable = canDismiss;
|
|
186
193
|
}
|
|
187
194
|
};
|
|
188
195
|
}
|
|
@@ -244,6 +251,7 @@ function createKlappayOne(config) {
|
|
|
244
251
|
}
|
|
245
252
|
const stopListening = listen(config.origin, requestId, {
|
|
246
253
|
onReady: config.onReady,
|
|
254
|
+
onPending: config.onPending,
|
|
247
255
|
onSuccess: (result) => {
|
|
248
256
|
stop();
|
|
249
257
|
config.onSuccess?.(result);
|
|
@@ -252,9 +260,9 @@ function createKlappayOne(config) {
|
|
|
252
260
|
stop();
|
|
253
261
|
config.onError?.(error);
|
|
254
262
|
},
|
|
255
|
-
onCancel: () => {
|
|
263
|
+
onCancel: (reason) => {
|
|
256
264
|
stop();
|
|
257
|
-
config.onCancel?.();
|
|
265
|
+
config.onCancel?.(reason);
|
|
258
266
|
},
|
|
259
267
|
onTimeout: () => {
|
|
260
268
|
stop();
|
|
@@ -264,7 +272,7 @@ function createKlappayOne(config) {
|
|
|
264
272
|
const pollClosed = setInterval(() => {
|
|
265
273
|
if (isPopupClosed(popup)) {
|
|
266
274
|
stop();
|
|
267
|
-
config.onCancel?.();
|
|
275
|
+
config.onCancel?.("closed");
|
|
268
276
|
}
|
|
269
277
|
}, POPUP_CLOSED_POLL_MS);
|
|
270
278
|
function stop() {
|
|
@@ -287,12 +295,19 @@ function createKlappayOne(config) {
|
|
|
287
295
|
stop();
|
|
288
296
|
run();
|
|
289
297
|
}
|
|
290
|
-
const frame = openIframe(url, () => settleOnce(() => config.onCancel?.()));
|
|
298
|
+
const frame = openIframe(url, () => settleOnce(() => config.onCancel?.("user")));
|
|
291
299
|
const stopListening = listen(config.origin, requestId, {
|
|
292
300
|
onReady: config.onReady,
|
|
301
|
+
// Not wrapped in settleOnce — this isn't a terminal outcome, and the
|
|
302
|
+
// payment is now past the point where a backdrop dismiss should be
|
|
303
|
+
// allowed to silently orphan it.
|
|
304
|
+
onPending: () => {
|
|
305
|
+
frame.setDismissable(false);
|
|
306
|
+
config.onPending?.();
|
|
307
|
+
},
|
|
293
308
|
onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
|
|
294
309
|
onError: (error) => settleOnce(() => config.onError?.(error)),
|
|
295
|
-
onCancel: () => settleOnce(() => config.onCancel?.()),
|
|
310
|
+
onCancel: (reason) => settleOnce(() => config.onCancel?.(reason)),
|
|
296
311
|
onResize: (height) => frame.resize(height),
|
|
297
312
|
// A merchant CSP blocking frame-src/child-src for this domain would
|
|
298
313
|
// otherwise leave the iframe silently blank forever — one automatic
|
|
@@ -340,6 +355,9 @@ function wire(element) {
|
|
|
340
355
|
origin,
|
|
341
356
|
locale,
|
|
342
357
|
mode: mode === "iframe" || mode === "popup" ? mode : void 0,
|
|
358
|
+
onPending: () => {
|
|
359
|
+
element.dispatchEvent(new CustomEvent("pending"));
|
|
360
|
+
},
|
|
343
361
|
onSuccess: (result) => {
|
|
344
362
|
clearBusy();
|
|
345
363
|
element.dispatchEvent(new CustomEvent("success", { detail: result }));
|
|
@@ -348,9 +366,9 @@ function wire(element) {
|
|
|
348
366
|
clearBusy();
|
|
349
367
|
element.dispatchEvent(new CustomEvent("error", { detail: error }));
|
|
350
368
|
},
|
|
351
|
-
onCancel: () => {
|
|
369
|
+
onCancel: (reason) => {
|
|
352
370
|
clearBusy();
|
|
353
|
-
element.dispatchEvent(new CustomEvent("cancel"));
|
|
371
|
+
element.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
|
|
354
372
|
}
|
|
355
373
|
}).open();
|
|
356
374
|
});
|
|
@@ -527,6 +545,12 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
527
545
|
origin,
|
|
528
546
|
locale,
|
|
529
547
|
mode: mode === "iframe" || mode === "popup" ? mode : void 0,
|
|
548
|
+
// Not a terminal outcome — the button stays busy/disabled exactly as
|
|
549
|
+
// it already is, this only forwards the signal for a page that wants
|
|
550
|
+
// to persist state before the wallet responds.
|
|
551
|
+
onPending: () => {
|
|
552
|
+
this.dispatchEvent(new CustomEvent("pending"));
|
|
553
|
+
},
|
|
530
554
|
onSuccess: (result) => {
|
|
531
555
|
reenable();
|
|
532
556
|
this.dispatchEvent(new CustomEvent("success", { detail: result }));
|
|
@@ -535,9 +559,9 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
535
559
|
reenable();
|
|
536
560
|
this.dispatchEvent(new CustomEvent("error", { detail: error }));
|
|
537
561
|
},
|
|
538
|
-
onCancel: () => {
|
|
562
|
+
onCancel: (reason) => {
|
|
539
563
|
reenable();
|
|
540
|
-
this.dispatchEvent(new CustomEvent("cancel"));
|
|
564
|
+
this.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
|
|
541
565
|
}
|
|
542
566
|
}).open();
|
|
543
567
|
}
|
package/dist/react/index.d.ts
CHANGED
|
@@ -17,9 +17,10 @@ interface KlappayOneConfig {
|
|
|
17
17
|
locale?: string;
|
|
18
18
|
mode?: 'iframe' | 'popup';
|
|
19
19
|
onReady?: () => void;
|
|
20
|
+
onPending?: () => void;
|
|
20
21
|
onSuccess?: (result: PaymentResult) => void;
|
|
21
22
|
onError?: (error: KlappayOneError) => void;
|
|
22
|
-
onCancel?: () => void;
|
|
23
|
+
onCancel?: (reason: 'user' | 'closed') => void;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
declare function useKlappayOne(config: KlappayOneConfig): {
|
package/dist/react/index.js
CHANGED
|
@@ -28,7 +28,10 @@ function listen(klapOneOrigin, requestId, handlers) {
|
|
|
28
28
|
handlers.onError?.(message.error);
|
|
29
29
|
return;
|
|
30
30
|
case "klappay:cancel":
|
|
31
|
-
handlers.onCancel?.();
|
|
31
|
+
handlers.onCancel?.("user");
|
|
32
|
+
return;
|
|
33
|
+
case "klappay:pending":
|
|
34
|
+
handlers.onPending?.();
|
|
32
35
|
return;
|
|
33
36
|
case "klappay:resize":
|
|
34
37
|
handlers.onResize?.(message.height);
|
|
@@ -133,10 +136,11 @@ function openIframe(url, onDismiss) {
|
|
|
133
136
|
const shadow = host.attachShadow({ mode: "open" });
|
|
134
137
|
const style = document.createElement("style");
|
|
135
138
|
style.textContent = IFRAME_CSS;
|
|
139
|
+
let dismissable = true;
|
|
136
140
|
const backdrop = document.createElement("div");
|
|
137
141
|
backdrop.className = "backdrop";
|
|
138
142
|
backdrop.addEventListener("click", (event) => {
|
|
139
|
-
if (event.target === backdrop) onDismiss();
|
|
143
|
+
if (event.target === backdrop && dismissable) onDismiss();
|
|
140
144
|
});
|
|
141
145
|
const frame = document.createElement("iframe");
|
|
142
146
|
frame.className = "frame";
|
|
@@ -186,6 +190,9 @@ function openIframe(url, onDismiss) {
|
|
|
186
190
|
close,
|
|
187
191
|
resize: (height) => {
|
|
188
192
|
frame.style.height = `${height}px`;
|
|
193
|
+
},
|
|
194
|
+
setDismissable: (canDismiss) => {
|
|
195
|
+
dismissable = canDismiss;
|
|
189
196
|
}
|
|
190
197
|
};
|
|
191
198
|
}
|
|
@@ -244,6 +251,7 @@ function createKlappayOne(config) {
|
|
|
244
251
|
}
|
|
245
252
|
const stopListening = listen(config.origin, requestId, {
|
|
246
253
|
onReady: config.onReady,
|
|
254
|
+
onPending: config.onPending,
|
|
247
255
|
onSuccess: (result) => {
|
|
248
256
|
stop();
|
|
249
257
|
config.onSuccess?.(result);
|
|
@@ -252,9 +260,9 @@ function createKlappayOne(config) {
|
|
|
252
260
|
stop();
|
|
253
261
|
config.onError?.(error);
|
|
254
262
|
},
|
|
255
|
-
onCancel: () => {
|
|
263
|
+
onCancel: (reason) => {
|
|
256
264
|
stop();
|
|
257
|
-
config.onCancel?.();
|
|
265
|
+
config.onCancel?.(reason);
|
|
258
266
|
},
|
|
259
267
|
onTimeout: () => {
|
|
260
268
|
stop();
|
|
@@ -264,7 +272,7 @@ function createKlappayOne(config) {
|
|
|
264
272
|
const pollClosed = setInterval(() => {
|
|
265
273
|
if (isPopupClosed(popup)) {
|
|
266
274
|
stop();
|
|
267
|
-
config.onCancel?.();
|
|
275
|
+
config.onCancel?.("closed");
|
|
268
276
|
}
|
|
269
277
|
}, POPUP_CLOSED_POLL_MS);
|
|
270
278
|
function stop() {
|
|
@@ -287,12 +295,19 @@ function createKlappayOne(config) {
|
|
|
287
295
|
stop();
|
|
288
296
|
run();
|
|
289
297
|
}
|
|
290
|
-
const frame = openIframe(url, () => settleOnce(() => config.onCancel?.()));
|
|
298
|
+
const frame = openIframe(url, () => settleOnce(() => config.onCancel?.("user")));
|
|
291
299
|
const stopListening = listen(config.origin, requestId, {
|
|
292
300
|
onReady: config.onReady,
|
|
301
|
+
// Not wrapped in settleOnce — this isn't a terminal outcome, and the
|
|
302
|
+
// payment is now past the point where a backdrop dismiss should be
|
|
303
|
+
// allowed to silently orphan it.
|
|
304
|
+
onPending: () => {
|
|
305
|
+
frame.setDismissable(false);
|
|
306
|
+
config.onPending?.();
|
|
307
|
+
},
|
|
293
308
|
onSuccess: (result) => settleOnce(() => config.onSuccess?.(result)),
|
|
294
309
|
onError: (error) => settleOnce(() => config.onError?.(error)),
|
|
295
|
-
onCancel: () => settleOnce(() => config.onCancel?.()),
|
|
310
|
+
onCancel: (reason) => settleOnce(() => config.onCancel?.(reason)),
|
|
296
311
|
onResize: (height) => frame.resize(height),
|
|
297
312
|
// A merchant CSP blocking frame-src/child-src for this domain would
|
|
298
313
|
// otherwise leave the iframe silently blank forever — one automatic
|
|
@@ -463,6 +478,12 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
463
478
|
origin,
|
|
464
479
|
locale,
|
|
465
480
|
mode: mode === "iframe" || mode === "popup" ? mode : void 0,
|
|
481
|
+
// Not a terminal outcome — the button stays busy/disabled exactly as
|
|
482
|
+
// it already is, this only forwards the signal for a page that wants
|
|
483
|
+
// to persist state before the wallet responds.
|
|
484
|
+
onPending: () => {
|
|
485
|
+
this.dispatchEvent(new CustomEvent("pending"));
|
|
486
|
+
},
|
|
466
487
|
onSuccess: (result) => {
|
|
467
488
|
reenable();
|
|
468
489
|
this.dispatchEvent(new CustomEvent("success", { detail: result }));
|
|
@@ -471,9 +492,9 @@ var KlappayButtonElement = class extends KlappayButtonBase {
|
|
|
471
492
|
reenable();
|
|
472
493
|
this.dispatchEvent(new CustomEvent("error", { detail: error }));
|
|
473
494
|
},
|
|
474
|
-
onCancel: () => {
|
|
495
|
+
onCancel: (reason) => {
|
|
475
496
|
reenable();
|
|
476
|
-
this.dispatchEvent(new CustomEvent("cancel"));
|
|
497
|
+
this.dispatchEvent(new CustomEvent("cancel", { detail: { reason } }));
|
|
477
498
|
}
|
|
478
499
|
}).open();
|
|
479
500
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@klappay/one",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Klappay One's embeddable payment button — opens the hosted identity/wallet popup (one-id) and relays the result via postMessage. Never touches a private key or a session token; framework-agnostic core with a thin React wrapper.",
|
|
6
6
|
"keywords": [
|