@klappay/one 1.0.2 → 1.1.1

package/dist/index.global.js

@@ -1,4 +1,4 @@
-"use strict";var KlappayOne=(()=>{var f=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)f(e,o,{get:t[o],enumerable:!0})},H=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of B(t))!M.call(e,n)&&n!==o&&f(e,n,{get:()=>t[n],enumerable:!(a=z(t,n))||a.enumerable});return e};var $=e=>H(f({},"__esModule",{value:!0}),e);var re={};L(re,{configure:()=>P,createKlappayOne:()=>u});function q(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 m(e,t,o){let a=!1,n=setTimeout(()=>{a||o.onTimeout?.()},1e4);function i(r){if(r.origin!==e||!q(r.data)||r.data.requestId!==t)return;let s=r.data;switch(s.type){case"klappay:ready":a=!0,clearTimeout(n),o.onReady?.();return;case"klappay:success":o.onSuccess?.(s.result);return;case"klappay:error":o.onError?.(s.error);return;case"klappay:cancel":o.onCancel?.();return;case"klappay:resize":o.onResize?.(s.height);return}}return window.addEventListener("message",i),()=>{clearTimeout(n),window.removeEventListener("message",i)}}function h(e){let t=new URL("/id/",e.klapOneOrigin);return t.searchParams.set("chargeId",e.chargeId),t.searchParams.set("requestId",e.requestId),t.searchParams.set("returnOrigin",window.location.origin),e.locale&&t.searchParams.set("locale",e.locale),t.toString()}var D=/Android|iPhone|iPad|iPod/i;function A(e){return D.test(e)}function N(){return`
+"use strict";var KlappayOne=(()=>{var y=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var n in t)y(e,n,{get:t[n],enumerable:!0})},Q=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of w(t))!P.call(e,o)&&o!==n&&y(e,o,{get:()=>t[o],enumerable:!(a=L(t,o))||a.enumerable});return e};var D=e=>Q(y({},"__esModule",{value:!0}),e);var pe={};N(pe,{configure:()=>C,createKlappayOne:()=>d});function J(e){return typeof e=="object"&&e!==null&&"type"in e&&typeof e.type=="string"&&e.type.startsWith("klappay:")&&"requestId"in e&&typeof e.requestId=="string"}function f(e,t,n){let a=!1,o=setTimeout(()=>{a||n.onTimeout?.()},1e4);function i(r){if(r.origin!==e||!J(r.data)||r.data.requestId!==t)return;let s=r.data;switch(s.type){case"klappay:ready":a=!0,clearTimeout(o),n.onReady?.();return;case"klappay:success":n.onSuccess?.(s.result);return;case"klappay:error":n.onError?.(s.error);return;case"klappay:cancel":n.onCancel?.();return;case"klappay:resize":n.onResize?.(s.height);return}}return window.addEventListener("message",i),()=>{clearTimeout(o),window.removeEventListener("message",i)}}function h(e){let t=new URL("/id/",e.klapOneOrigin);return t.searchParams.set("chargeId",e.chargeId),t.searchParams.set("requestId",e.requestId),t.searchParams.set("returnOrigin",window.location.origin),e.locale&&t.searchParams.set("locale",e.locale),t.toString()}var G=/Android|iPhone|iPad|iPod/i;function v(e){return G.test(e)}function X(){return`
     .backdrop {
       position: fixed;
       inset: 0;
@@ -18,22 +18,27 @@
       background: #000;
       transition: height 0.15s ease;
     }
-  `}function O(e,t){let o=document.createElement("div"),a=o.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=N();let i=document.createElement("div");i.className="backdrop",i.addEventListener("click",s=>{s.target===i&&t()});let r=document.createElement("iframe");return r.className="frame",r.src=e,i.append(r),a.append(n,i),document.body.append(o),{close:()=>o.remove(),resize:s=>{r.style.height=`${s}px`}}}var G="klappay-one";function k(e){let t=window.screenX+(window.outerWidth-420)/2,o=window.screenY+(window.outerHeight-720)/2;return window.open(e,G,`width=420,height=720,left=${t},top=${o}`)}function b(e){return e===null||e.closed}var V={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},W={code:"FRAME_TIMEOUT",message:"The Klappay One popup did not respond in time."},F=500,x={};function P(e){x=e}function l(){return x}function Y(e){return e.mode??(A(navigator.userAgent)?"popup":"iframe")}function u(e){function t(){Y(e)==="popup"?o():a()}function o(){let n=crypto.randomUUID(),i=h({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:n,locale:e.locale}),r=k(i);if(b(r)){e.onError?.(V);return}let s=m(e.origin,n,{onReady:e.onReady,onSuccess:d=>{p(),e.onSuccess?.(d)},onError:d=>{p(),e.onError?.(d)},onCancel:()=>{p(),e.onCancel?.()},onTimeout:()=>{p(),e.onError?.(W)}}),y=setInterval(()=>{b(r)&&(p(),e.onCancel?.())},F);function p(){clearInterval(y),s()}}function a(){let n=crypto.randomUUID(),i=h({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:n,locale:e.locale}),r=!1;function s(c){r||(r=!0,d(),c())}let y=O(i,()=>s(()=>e.onCancel?.())),p=m(e.origin,n,{onReady:e.onReady,onSuccess:c=>s(()=>e.onSuccess?.(c)),onError:c=>s(()=>e.onError?.(c)),onCancel:()=>s(()=>e.onCancel?.()),onResize:c=>y.resize(c),onTimeout:()=>s(o)});function d(){p(),y.close()}}return{open:t}}var g="data-klappay-one",w="data-klappay-one-origin",j="data-klappay-one-locale",Z="data-klappay-one-mode",_="data-klappay-one-wired",E="data-klappay-one-busy";function v(e){e.hasAttribute(_)||(e.setAttribute(_,""),e.addEventListener("click",()=>{if(e.hasAttribute(E))return;let t=e.getAttribute(g);if(!t)return;let o=e.getAttribute(w)??l().origin;if(!o){console.error(`[${g}] has no origin \u2014 set ${w} or call KlappayOne.configure({ origin }).`);return}let a=e.getAttribute(j)??l().locale,n=e.getAttribute(Z);e.setAttribute(E,"");let i=()=>{e.removeAttribute(E)};u({chargeId:t,origin:o,locale:a,mode:n==="iframe"||n==="popup"?n:void 0,onSuccess:r=>{i(),e.dispatchEvent(new CustomEvent("success",{detail:r}))},onError:r=>{i(),e.dispatchEvent(new CustomEvent("error",{detail:r}))},onCancel:()=>{i(),e.dispatchEvent(new CustomEvent("cancel"))}}).open()}))}function I(e=document){for(let t of e.querySelectorAll(`[${g}]`))v(t)}function R(e=document.body){let t=new MutationObserver(o=>{for(let a of o)for(let n of a.addedNodes)if(n instanceof Element){n.hasAttribute(g)&&v(n);for(let i of n.querySelectorAll(`[${g}]`))v(i)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var S="klappay-button",C=["white","yellow","black"],K=["sm","md","lg"],X="black",J="md",Q={sm:{height:"32px",fontSize:"13px",padding:"0 14px"},md:{height:"40px",fontSize:"14px",padding:"0 18px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px"}},ee={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function te(e){return C.includes(e)}function ne(e){return K.includes(e)}var oe=typeof HTMLElement<"u"?HTMLElement:class{},T=class e extends oe{static get observedAttributes(){return["variant","size"]}#e;constructor(){super();let t=this.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=e.#r(),this.#e=document.createElement("button"),this.#e.type="button",this.#e.textContent="Pay with Klappay",this.#e.addEventListener("click",()=>this.#o()),t.append(o,this.#e),this.#t(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#t(),t==="size"&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return te(t)?t:X}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return ne(t)?t:J}set size(t){this.setAttribute("size",t)}#t(){this.#e.setAttribute("data-variant",this.variant)}#n(){this.#e.setAttribute("data-size",this.size)}#o(){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")??l().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")??l().locale,n=this.getAttribute("mode");this.#e.disabled=!0;let i=()=>{this.#e.disabled=!1};u({chargeId:t,origin:o,locale:a,mode:n==="iframe"||n==="popup"?n:void 0,onSuccess:r=>{i(),this.dispatchEvent(new CustomEvent("success",{detail:r}))},onError:r=>{i(),this.dispatchEvent(new CustomEvent("error",{detail:r}))},onCancel:()=>{i(),this.dispatchEvent(new CustomEvent("cancel"))}}).open()}static#r(){let t=C.map(a=>{let{background:n,color:i,border:r}=ee[a];return`button[data-variant="${a}"] { background: var(--klappay-background, ${n}); color: var(--klappay-color, ${i}); border: ${r}; }`}).join(`
-`),o=K.map(a=>{let{height:n,fontSize:i,padding:r}=Q[a];return`button[data-size="${a}"] { height: var(--klappay-button-height, ${n}); font-size: ${i}; padding: ${r}; }`}).join(`
+  `}function O(e,t){let n=document.createElement("div"),a=n.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=X();let i=document.createElement("div");i.className="backdrop",i.addEventListener("click",s=>{s.target===i&&t()});let r=document.createElement("iframe");return r.className="frame",r.src=e,i.append(r),a.append(o,i),document.body.append(n),{close:()=>n.remove(),resize:s=>{r.style.height=`${s}px`}}}var V="klappay-one";function B(e){let t=window.screenX+(window.outerWidth-420)/2,n=window.screenY+(window.outerHeight-720)/2;return window.open(e,V,`width=420,height=720,left=${t},top=${n}`)}function m(e){return e===null||e.closed}var Y={code:"POPUP_BLOCKED",message:"The Klappay One popup was blocked."},F={code:"FRAME_TIMEOUT",message:"The Klappay One popup did not respond in time."},q=500,x={};function C(e){x=e}function l(){return x}function H(e){return e.mode??(v(navigator.userAgent)?"popup":"iframe")}function d(e){function t(){H(e)==="popup"?n():a()}function n(){let o=crypto.randomUUID(),i=h({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:o,locale:e.locale}),r=B(i);if(m(r)){e.onError?.(Y);return}let s=f(e.origin,o,{onReady:e.onReady,onSuccess:u=>{p(),e.onSuccess?.(u)},onError:u=>{p(),e.onError?.(u)},onCancel:()=>{p(),e.onCancel?.()},onTimeout:()=>{p(),e.onError?.(F)}}),A=setInterval(()=>{m(r)&&(p(),e.onCancel?.())},q);function p(){clearInterval(A),s()}}function a(){let o=crypto.randomUUID(),i=h({klapOneOrigin:e.origin,chargeId:e.chargeId,requestId:o,locale:e.locale}),r=!1;function s(c){r||(r=!0,u(),c())}let A=O(i,()=>s(()=>e.onCancel?.())),p=f(e.origin,o,{onReady:e.onReady,onSuccess:c=>s(()=>e.onSuccess?.(c)),onError:c=>s(()=>e.onError?.(c)),onCancel:()=>s(()=>e.onCancel?.()),onResize:c=>A.resize(c),onTimeout:()=>s(n)});function u(){p(),A.close()}}return{open:t}}var g="data-klappay-one",U="data-klappay-one-origin",Z="data-klappay-one-locale",j="data-klappay-one-mode",k="data-klappay-one-wired",b="data-klappay-one-busy";function E(e){e.hasAttribute(k)||(e.setAttribute(k,""),e.addEventListener("click",()=>{if(e.hasAttribute(b))return;let t=e.getAttribute(g);if(!t)return;let n=e.getAttribute(U)??l().origin;if(!n){console.error(`[${g}] has no origin \u2014 set ${U} or call KlappayOne.configure({ origin }).`);return}let a=e.getAttribute(Z)??l().locale,o=e.getAttribute(j);e.setAttribute(b,"");let i=()=>{e.removeAttribute(b)};d({chargeId:t,origin:n,locale:a,mode:o==="iframe"||o==="popup"?o:void 0,onSuccess:r=>{i(),e.dispatchEvent(new CustomEvent("success",{detail:r}))},onError:r=>{i(),e.dispatchEvent(new CustomEvent("error",{detail:r}))},onCancel:()=>{i(),e.dispatchEvent(new CustomEvent("cancel"))}}).open()}))}function I(e=document){for(let t of e.querySelectorAll(`[${g}]`))E(t)}function K(e=document.body){let t=new MutationObserver(n=>{for(let a of n)for(let o of a.addedNodes)if(o instanceof Element){o.hasAttribute(g)&&E(o);for(let i of o.querySelectorAll(`[${g}]`))E(i)}});return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()}var T="klappay-button",S=["white","yellow","black"],z=["sm","md","lg"],W="black",_="md",$={sm:{height:"32px",fontSize:"13px",padding:"0 14px",logoSize:"14px"},md:{height:"40px",fontSize:"14px",padding:"0 18px",logoSize:"16px"},lg:{height:"48px",fontSize:"16px",padding:"0 24px",logoSize:"18px"}},ee="data:image/png;base64,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",te="data:image/png;base64,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",ne="data:image/png;base64,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",oe={black:ee,yellow:ne,white:te},re={white:{background:"#ffffff",color:"#111111",border:"1px solid #e5e5e5"},yellow:{background:"#f2b90c",color:"#111111",border:"none"},black:{background:"#111111",color:"#ffffff",border:"none"}};function ie(e){return S.includes(e)}function ae(e){return z.includes(e)}var se=typeof HTMLElement<"u"?HTMLElement:class{},R=class e extends se{static get observedAttributes(){return["variant","size","charge-id","origin"]}#e;#t;#o=!1;constructor(){super();let t=this.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=e.#p(),this.#t=document.createElement("img"),this.#t.alt="",this.#t.setAttribute("aria-hidden","true");let a=document.createElement("span");a.textContent="Pay with Klappay",this.#e=document.createElement("button"),this.#e.type="button",this.#e.append(this.#t,a),this.#e.addEventListener("click",()=>this.#s()),t.append(n,this.#e),this.#r(),this.#i(),this.#n()}attributeChangedCallback(t){t==="variant"&&this.#r(),t==="size"&&this.#i(),(t==="charge-id"||t==="origin")&&this.#n()}get variant(){let t=this.getAttribute("variant")??"";return ie(t)?t:W}set variant(t){this.setAttribute("variant",t)}get size(){let t=this.getAttribute("size")??"";return ae(t)?t:_}set size(t){this.setAttribute("size",t)}#r(){this.#e.setAttribute("data-variant",this.variant),this.#t.src=oe[this.variant]}#i(){this.#e.setAttribute("data-size",this.size)}#a(){let t=this.getAttribute("charge-id"),n=this.getAttribute("origin")??l().origin;return!!(t&&n)}#n(){this.#e.disabled=this.#o||!this.#a()}#s(){if(this.#e.disabled)return;let t=this.getAttribute("charge-id");if(!t){console.error("<klappay-button> is missing a required charge-id attribute.");return}let n=this.getAttribute("origin")??l().origin;if(!n){console.error("<klappay-button> has no origin \u2014 set the origin attribute or call KlappayOne.configure({ origin }).");return}let a=this.getAttribute("locale")??l().locale,o=this.getAttribute("mode");this.#o=!0,this.#n();let i=()=>{this.#o=!1,this.#n()};d({chargeId:t,origin:n,locale:a,mode:o==="iframe"||o==="popup"?o:void 0,onSuccess:r=>{i(),this.dispatchEvent(new CustomEvent("success",{detail:r}))},onError:r=>{i(),this.dispatchEvent(new CustomEvent("error",{detail:r}))},onCancel:()=>{i(),this.dispatchEvent(new CustomEvent("cancel"))}}).open()}static#p(){let t=S.map(a=>{let{background:o,color:i,border:r}=re[a];return`button[data-variant="${a}"] { background: var(--klappay-background, ${o}); color: var(--klappay-color, ${i}); border: ${r}; }`}).join(`
+`),n=z.map(a=>{let{height:o,fontSize:i,padding:r,logoSize:s}=$[a];return`
+        button[data-size="${a}"] { height: var(--klappay-button-height, ${o}); font-size: ${i}; padding: ${r}; }
+        button[data-size="${a}"] img { width: ${s}; height: ${s}; }
+      `}).join(`
 `);return`
       button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        gap: 8px;
         border-radius: var(--klappay-radius, 8px);
         font-family: var(--klappay-font-family, system-ui, sans-serif);
         font-weight: 600;
         cursor: pointer;
         transition: opacity 0.15s ease;
       }
+      button img { flex-shrink: 0; }
       button:hover { opacity: 0.9; }
       button:active { opacity: 0.8; }
       button:disabled { opacity: 0.6; cursor: not-allowed; }
       ${t}
-      ${o}
-    `}};function U(){typeof customElements>"u"||customElements.get(S)||customElements.define(S,T)}U();typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>I()):I(),R());return $(re);})();
+      ${n}
+    `}};function M(){typeof customElements>"u"||customElements.get(T)||customElements.define(T,R)}M();typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>I()):I(),K());return D(pe);})();

package/dist/index.js

@@ -295,9 +295,17 @@ var SIZES = ["sm", "md", "lg"];
 var DEFAULT_VARIANT = "black";
 var DEFAULT_SIZE = "md";
 var SIZE_STYLES = {
-  sm: { height: "32px", fontSize: "13px", padding: "0 14px" },
-  md: { height: "40px", fontSize: "14px", padding: "0 18px" },
-  lg: { height: "48px", fontSize: "16px", padding: "0 24px" }
+  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" }
+};
+var LOGO_NO_BLACK_INK_DATA_URI = "data:image/png;base64,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";
+var LOGO_BLACK_INK_DATA_URI = "data:image/png;base64,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";
+var LOGO_BLACK_WHITE_DATA_URI = "data:image/png;base64,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";
+var VARIANT_LOGO_DATA_URI = {
+  black: LOGO_NO_BLACK_INK_DATA_URI,
+  yellow: LOGO_BLACK_WHITE_DATA_URI,
+  white: LOGO_BLACK_INK_DATA_URI
 };
 var VARIANT_STYLES = {
   white: { background: "#ffffff", color: "#111111", border: "1px solid #e5e5e5" },
@@ -314,25 +322,34 @@ var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class
 };
 var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase {
   static get observedAttributes() {
-    return ["variant", "size"];
+    return ["variant", "size", "charge-id", "origin"];
   }
   #button;
+  #logo;
+  #busy = false;
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
     const style = document.createElement("style");
     style.textContent = _KlappayButtonElement.#css();
+    this.#logo = document.createElement("img");
+    this.#logo.alt = "";
+    this.#logo.setAttribute("aria-hidden", "true");
+    const label = document.createElement("span");
+    label.textContent = "Pay with Klappay";
     this.#button = document.createElement("button");
     this.#button.type = "button";
-    this.#button.textContent = "Pay with Klappay";
+    this.#button.append(this.#logo, label);
     this.#button.addEventListener("click", () => this.#handleClick());
     shadow.append(style, this.#button);
     this.#applyVariant();
     this.#applySize();
+    this.#applyDisabled();
   }
   attributeChangedCallback(name) {
     if (name === "variant") this.#applyVariant();
     if (name === "size") this.#applySize();
+    if (name === "charge-id" || name === "origin") this.#applyDisabled();
   }
   get variant() {
     const value = this.getAttribute("variant") ?? "";
@@ -350,10 +367,23 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
   }
   #applyVariant() {
     this.#button.setAttribute("data-variant", this.variant);
+    this.#logo.src = VARIANT_LOGO_DATA_URI[this.variant];
   }
   #applySize() {
     this.#button.setAttribute("data-size", this.size);
   }
+  // Only checks the origin *attribute*, not a `configure()` call made after
+  // this element was already upgraded — there's no subscription mechanism
+  // for global config changes. Set `origin` before this element is parsed,
+  // or as its own attribute, if the disabled state needs to react live.
+  #hasRequiredConfig() {
+    const chargeId = this.getAttribute("charge-id");
+    const origin = this.getAttribute("origin") ?? getGlobalConfig().origin;
+    return Boolean(chargeId && origin);
+  }
+  #applyDisabled() {
+    this.#button.disabled = this.#busy || !this.#hasRequiredConfig();
+  }
   #handleClick() {
     if (this.#button.disabled) return;
     const chargeId = this.getAttribute("charge-id");
@@ -370,9 +400,11 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
     }
     const locale = this.getAttribute("locale") ?? getGlobalConfig().locale;
     const mode = this.getAttribute("mode");
-    this.#button.disabled = true;
+    this.#busy = true;
+    this.#applyDisabled();
     const reenable = () => {
-      this.#button.disabled = false;
+      this.#busy = false;
+      this.#applyDisabled();
     };
     createKlappayOne({
       chargeId,
@@ -399,20 +431,25 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
       return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
     }).join("\n");
     const sizeRules = SIZES.map((size) => {
-      const { height, fontSize, padding } = SIZE_STYLES[size];
-      return `button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }`;
+      const { height, fontSize, padding, logoSize } = SIZE_STYLES[size];
+      return `
+        button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }
+        button[data-size="${size}"] img { width: ${logoSize}; height: ${logoSize}; }
+      `;
     }).join("\n");
     return `
       button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        gap: 8px;
         border-radius: var(--klappay-radius, 8px);
         font-family: var(--klappay-font-family, system-ui, sans-serif);
         font-weight: 600;
         cursor: pointer;
         transition: opacity 0.15s ease;
       }
+      button img { flex-shrink: 0; }
       button:hover { opacity: 0.9; }
       button:active { opacity: 0.8; }
       button:disabled { opacity: 0.6; cursor: not-allowed; }

package/dist/react/index.js

@@ -231,9 +231,17 @@ var SIZES = ["sm", "md", "lg"];
 var DEFAULT_VARIANT = "black";
 var DEFAULT_SIZE = "md";
 var SIZE_STYLES = {
-  sm: { height: "32px", fontSize: "13px", padding: "0 14px" },
-  md: { height: "40px", fontSize: "14px", padding: "0 18px" },
-  lg: { height: "48px", fontSize: "16px", padding: "0 24px" }
+  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" }
+};
+var LOGO_NO_BLACK_INK_DATA_URI = "data:image/png;base64,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";
+var LOGO_BLACK_INK_DATA_URI = "data:image/png;base64,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";
+var LOGO_BLACK_WHITE_DATA_URI = "data:image/png;base64,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";
+var VARIANT_LOGO_DATA_URI = {
+  black: LOGO_NO_BLACK_INK_DATA_URI,
+  yellow: LOGO_BLACK_WHITE_DATA_URI,
+  white: LOGO_BLACK_INK_DATA_URI
 };
 var VARIANT_STYLES = {
   white: { background: "#ffffff", color: "#111111", border: "1px solid #e5e5e5" },
@@ -250,25 +258,34 @@ var KlappayButtonBase = typeof HTMLElement !== "undefined" ? HTMLElement : class
 };
 var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase {
   static get observedAttributes() {
-    return ["variant", "size"];
+    return ["variant", "size", "charge-id", "origin"];
   }
   #button;
+  #logo;
+  #busy = false;
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
     const style = document.createElement("style");
     style.textContent = _KlappayButtonElement.#css();
+    this.#logo = document.createElement("img");
+    this.#logo.alt = "";
+    this.#logo.setAttribute("aria-hidden", "true");
+    const label = document.createElement("span");
+    label.textContent = "Pay with Klappay";
     this.#button = document.createElement("button");
     this.#button.type = "button";
-    this.#button.textContent = "Pay with Klappay";
+    this.#button.append(this.#logo, label);
     this.#button.addEventListener("click", () => this.#handleClick());
     shadow.append(style, this.#button);
     this.#applyVariant();
     this.#applySize();
+    this.#applyDisabled();
   }
   attributeChangedCallback(name) {
     if (name === "variant") this.#applyVariant();
     if (name === "size") this.#applySize();
+    if (name === "charge-id" || name === "origin") this.#applyDisabled();
   }
   get variant() {
     const value = this.getAttribute("variant") ?? "";
@@ -286,10 +303,23 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
   }
   #applyVariant() {
     this.#button.setAttribute("data-variant", this.variant);
+    this.#logo.src = VARIANT_LOGO_DATA_URI[this.variant];
   }
   #applySize() {
     this.#button.setAttribute("data-size", this.size);
   }
+  // Only checks the origin *attribute*, not a `configure()` call made after
+  // this element was already upgraded — there's no subscription mechanism
+  // for global config changes. Set `origin` before this element is parsed,
+  // or as its own attribute, if the disabled state needs to react live.
+  #hasRequiredConfig() {
+    const chargeId = this.getAttribute("charge-id");
+    const origin = this.getAttribute("origin") ?? getGlobalConfig().origin;
+    return Boolean(chargeId && origin);
+  }
+  #applyDisabled() {
+    this.#button.disabled = this.#busy || !this.#hasRequiredConfig();
+  }
   #handleClick() {
     if (this.#button.disabled) return;
     const chargeId = this.getAttribute("charge-id");
@@ -306,9 +336,11 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
     }
     const locale = this.getAttribute("locale") ?? getGlobalConfig().locale;
     const mode = this.getAttribute("mode");
-    this.#button.disabled = true;
+    this.#busy = true;
+    this.#applyDisabled();
     const reenable = () => {
-      this.#button.disabled = false;
+      this.#busy = false;
+      this.#applyDisabled();
     };
     createKlappayOne({
       chargeId,
@@ -335,20 +367,25 @@ var KlappayButtonElement = class _KlappayButtonElement extends KlappayButtonBase
       return `button[data-variant="${variant}"] { background: var(--klappay-background, ${background}); color: var(--klappay-color, ${color}); border: ${border}; }`;
     }).join("\n");
     const sizeRules = SIZES.map((size) => {
-      const { height, fontSize, padding } = SIZE_STYLES[size];
-      return `button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }`;
+      const { height, fontSize, padding, logoSize } = SIZE_STYLES[size];
+      return `
+        button[data-size="${size}"] { height: var(--klappay-button-height, ${height}); font-size: ${fontSize}; padding: ${padding}; }
+        button[data-size="${size}"] img { width: ${logoSize}; height: ${logoSize}; }
+      `;
     }).join("\n");
     return `
       button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        gap: 8px;
         border-radius: var(--klappay-radius, 8px);
         font-family: var(--klappay-font-family, system-ui, sans-serif);
         font-weight: 600;
         cursor: pointer;
         transition: opacity 0.15s ease;
       }
+      button img { flex-shrink: 0; }
       button:hover { opacity: 0.9; }
       button:active { opacity: 0.8; }
       button:disabled { opacity: 0.6; cursor: not-allowed; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klappay/one",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "license": "MIT",
   "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.",
   "keywords": [