@canopypay/checkout-sdk 0.2.1 → 0.4.0

package/dist/canopy.global.js

@@ -1 +1 @@
-"use strict";(()=>{(function(){"use strict";if(typeof window=="undefined")return;let f="width=460,height=640",m=2500,y="Pay with Canopy",h=500,g="canopy",v="cnpy_pk_live_";function b(){let e=document.currentScript;if(e&&e.src)try{return new URL(e.src).origin}catch(o){}let n=document.getElementsByTagName("script");for(let o=0;o<n.length;o+=1){let r=n[o].src;if(r&&/\/v1\/(?:[^/]+\/)?canopy\.js(?:[?#].*)?$/.test(r))try{return new URL(r).origin}catch(t){}}return null}function k(e){let n;try{n=new URL(e)}catch(t){return{ok:!1,code:"canopy_origin_invalid"}}if(!((n.pathname===""||n.pathname==="/")&&n.search===""&&n.hash===""))return{ok:!1,code:"canopy_origin_not_bare"};let r=n.hostname==="localhost"||n.hostname==="127.0.0.1";return n.protocol!=="https:"&&!r?{ok:!1,code:"canopy_origin_insecure"}:{ok:!0,origin:n.origin}}function _(e){if(e!==void 0)return k(e);let n=b();return n?{ok:!0,origin:n}:{ok:!1,code:"canopy_origin_undiscoverable"}}function c(e){let n=new URL("/customer-pay",e.origin);return n.searchParams.set("merchant",e.merchant),n.hash="cap="+encodeURIComponent(e.capability||""),n.toString()}function i(e,n,o){if(!e.destroyed)try{e.onEvent(Object.assign({type:n},o))}catch(r){}}function l(e){e.handshakeTimer&&(clearTimeout(e.handshakeTimer),e.handshakeTimer=null),e.resizeObserver&&(e.resizeObserver.disconnect(),e.resizeObserver=null),e.frame&&(e.frame.parentNode&&e.frame.parentNode.removeChild(e.frame),e.frame=null),e.lastHeight=null}function E(e){e.popupPollTimer&&clearInterval(e.popupPollTimer),e.popupPollTimer=setInterval(function(){try{e.popupWin&&e.popupWin.closed&&(e.popupPollTimer&&clearInterval(e.popupPollTimer),e.popupPollTimer=null,e.popupWin=null,i(e,"close",{via:"popup"}))}catch(n){e.popupPollTimer&&clearInterval(e.popupPollTimer),e.popupPollTimer=null}},h)}function p(e,n){if(!e.destroyed){if(!n){i(e,"error",{code:"popup_blocked"});return}if(!e.capability){try{n.close()}catch(o){}i(e,"error",{code:"capability_unavailable"});return}try{n.location.href=c(e)}catch(o){i(e,"error",{code:"popup_navigation_failed"});return}e.popupWin=n,E(e)}}function T(e){let n=document.createElement("button");n.type="button",n.textContent=e.fallbackLabel;let o=n.style;o.background="#1A7A4C",o.color="#FFFFFF",o.border="none",o.borderRadius="8px",o.height="48px",o.padding="0 20px",o.fontSize="16px",o.fontFamily="inherit",o.cursor="pointer",o.maxWidth="100%",o.overflow="hidden",o.textOverflow="ellipsis",o.whiteSpace="nowrap",o.display="inline-block",n.addEventListener("click",function(){let r=window.open("","canopy_checkout",f);p(e,r)}),e.node.appendChild(n),e.fallbackButton=n,i(e,"fallback_offered",{surface:"popup",reason:"iframe_unavailable"})}function w(e){let n=document.createElement("iframe");n.src=c(e),n.style.width="100%",n.style.border="none",e.node.appendChild(n),e.frame=n,typeof ResizeObserver!="undefined"&&(e.resizeObserver=new ResizeObserver(function(o){for(let r=0;r<o.length;r+=1){let t=Math.round(o[r].contentRect.height);t>0&&t!==e.lastHeight&&(e.lastHeight=t,i(e,"resize",{height:t}))}}),e.resizeObserver.observe(n)),e.handshakeTimer=setTimeout(function(){e.handshakeTimer=null,i(e,"surface_unavailable",{attempted:"iframe"}),l(e),e.surface==="auto"?T(e):i(e,"error",{code:"iframe_blocked"})},e.handshakeTimeoutMs)}function O(e,n){if(n.origin!==e.origin)return;let o=n.data;if(!(!o||o.source!==g)){if(o.type==="ready"){e.handshakeTimer&&(clearTimeout(e.handshakeTimer),e.handshakeTimer=null),i(e,"ready");return}if(o.type==="resize"&&typeof o.height=="number"&&e.frame){e.frame.style.height=o.height+"px";return}if(o.type==="paid"){i(e,"paid",o);return}if(o.type==="close"){i(e,"close");return}}}let s=new WeakMap;function L(e){if(typeof e.merchant!="string"||e.merchant.indexOf(v)!==0){try{(e.onEvent||function(){})({type:"error",code:"invalid_merchant_key"})}catch(a){}return{openNow:function(){},destroy:function(){}}}let n=_(e.canopyOrigin);if(!n.ok){try{(e.onEvent||function(){})({type:"error",code:n.code})}catch(a){}return{openNow:function(){},destroy:function(){}}}let o=typeof e.target=="string"?document.querySelector(e.target):e.target;if(!o)return{openNow:function(){},destroy:function(){}};let r=s.get(o);if(r)return r;let t={node:o,capability:e.capability,merchant:e.merchant,origin:n.origin,surface:e.surface||"popup",handshakeTimeoutMs:e.handshakeTimeoutMs||m,fallbackLabel:e.fallbackLabel||y,onEvent:e.onEvent||function(){},destroyed:!1,messageListener:function(){},handshakeTimer:null,resizeObserver:null,frame:null,fallbackButton:null,lastHeight:null,popupWin:null,popupPollTimer:null};t.messageListener=function(a){O(t,a)},window.addEventListener("message",t.messageListener),(t.surface==="iframe"||t.surface==="auto")&&w(t);let d={openNow:function(a){p(t,a)},destroy:function(){t.destroyed||(t.destroyed=!0,window.removeEventListener("message",t.messageListener),l(t),t.popupPollTimer&&(clearInterval(t.popupPollTimer),t.popupPollTimer=null),t.fallbackButton&&(t.fallbackButton.parentNode&&t.fallbackButton.parentNode.removeChild(t.fallbackButton),t.fallbackButton=null),s.delete(o))}};return s.set(o,d),d}let u=window;u.Canopy&&u.Canopy.__version==="2"||(u.Canopy={mount:L,__version:"2"})})();})();
+"use strict";(()=>{var S="theme";var T=["accent","background","surface","text","muted","border","radius","font"],B=new Map([["accent",{kind:"colour",targets:["--leaf","--primary","--accent","--ring"]}],["background",{kind:"colour",targets:["--paper","--background","background"]}],["surface",{kind:"colour",targets:["--surface","--card","--popover","--secondary"]}],["text",{kind:"colour",targets:["--ink","--foreground","--card-foreground","--popover-foreground","--secondary-foreground"]}],["muted",{kind:"colour",targets:["--ink-muted","--muted-foreground"]}],["border",{kind:"colour",targets:["--line","--border","--input"]}],["radius",{kind:"length",targets:["--radius"]}],["font",{kind:"font",targets:["--font-sans"]}]]),Y=/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,q=/^(rgb|rgba|hsl|hsla)\(([0-9a-z.,%/ +-]*)\)$/,Z=/^[+-]?(?:[0-9]{1,4}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})$/,J=/^[+-]?(?:[0-9]{1,3}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})%$/,Q=/^(?:0|(?:[0-9]{1,4}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})(?:px|rem|em|%))$/,ee=/^[A-Za-z0-9 ,_-]+$/,ne=new Map([["transparent",{r:0,g:0,b:0,a:0}],["black",{r:0,g:0,b:0,a:1}],["white",{r:255,g:255,b:255,a:1}],["silver",{r:192,g:192,b:192,a:1}],["gray",{r:128,g:128,b:128,a:1}],["grey",{r:128,g:128,b:128,a:1}],["maroon",{r:128,g:0,b:0,a:1}],["red",{r:255,g:0,b:0,a:1}],["purple",{r:128,g:0,b:128,a:1}],["fuchsia",{r:255,g:0,b:255,a:1}],["magenta",{r:255,g:0,b:255,a:1}],["green",{r:0,g:128,b:0,a:1}],["lime",{r:0,g:255,b:0,a:1}],["olive",{r:128,g:128,b:0,a:1}],["yellow",{r:255,g:255,b:0,a:1}],["navy",{r:0,g:0,b:128,a:1}],["blue",{r:0,g:0,b:255,a:1}],["teal",{r:0,g:128,b:128,a:1}],["aqua",{r:0,g:255,b:255,a:1}],["cyan",{r:0,g:255,b:255,a:1}],["orange",{r:255,g:165,b:0,a:1}],["pink",{r:255,g:192,b:203,a:1}],["brown",{r:165,g:42,b:42,a:1}],["beige",{r:245,g:245,b:220,a:1}],["ivory",{r:255,g:255,b:240,a:1}],["indigo",{r:75,g:0,b:130,a:1}],["violet",{r:238,g:130,b:238,a:1}],["gold",{r:255,g:215,b:0,a:1}],["crimson",{r:220,g:20,b:60,a:1}],["salmon",{r:250,g:128,b:114,a:1}],["khaki",{r:240,g:230,b:140,a:1}],["lavender",{r:230,g:230,b:250,a:1}],["turquoise",{r:64,g:224,b:208,a:1}],["tan",{r:210,g:180,b:140,a:1}],["plum",{r:221,g:160,b:221,a:1}],["orchid",{r:218,g:112,b:214,a:1}],["coral",{r:255,g:127,b:80,a:1}],["tomato",{r:255,g:99,b:71,a:1}],["chocolate",{r:210,g:105,b:30,a:1}],["snow",{r:255,g:250,b:250,a:1}],["linen",{r:250,g:240,b:230,a:1}],["azure",{r:240,g:255,b:255,a:1}],["wheat",{r:245,g:222,b:179,a:1}],["thistle",{r:216,g:191,b:216,a:1}]]),te=new Set(["transparent","currentcolor","inherit","initial","unset","revert","revert-layer"]),re=new Set(["text","muted","accent"]);function y(t,n,o){return t<n?n:t>o?o:t}function x(t){if(!Z.test(t))return null;let n=Number(t);return Number.isFinite(n)?n:null}function v(t){if(!J.test(t))return null;let n=Number(t.slice(0,t.length-1));return Number.isFinite(n)?n/100:null}function A(t){let n=v(t);if(n!==null)return y(n,0,1)*255;let o=x(t);return o===null?null:y(o,0,255)}function oe(t){let n=v(t);if(n!==null)return y(n,0,1);let o=x(t);return o===null?null:y(o,0,1)}function ae(t){let n=t,o=1;n.endsWith("deg")?n=n.slice(0,n.length-3):n.endsWith("grad")?(n=n.slice(0,n.length-4),o=360/400):n.endsWith("turn")?(n=n.slice(0,n.length-4),o=360):n.endsWith("rad")&&(n=n.slice(0,n.length-3),o=180/Math.PI);let r=x(n);return r===null?null:(r*o%360+360)%360}function C(t,n,o){let r=o;return r<0&&(r+=1),r>1&&(r-=1),r<1/6?t+(n-t)*6*r:r<1/2?n:r<2/3?t+(n-t)*(2/3-r)*6:t}function ie(t,n,o,r){if(n===0){let l=o*255;return{r:l,g:l,b:l,a:r}}let u=o<.5?o*(1+n):o+n-o*n,d=2*o-u,s=t/360;return{r:C(d,u,s+1/3)*255,g:C(d,u,s)*255,b:C(d,u,s-1/3)*255,a:r}}function le(t){let n=t.trim();if(n==="")return null;if(n.indexOf(",")>=0){if(n.indexOf("/")>=0)return null;let d=n.split(",").map(function(s){return s.trim()});return d.length!==3&&d.length!==4?null:d}let o=n.split("/");if(o.length>2)return null;let r=o[0].trim().split(/ +/);if(r.length!==3)return null;if(o.length===1)return r;let u=o[1].trim();return u===""||u.indexOf(" ")>=0?null:r.concat([u])}function se(t){let n=q.exec(t);if(n===null)return null;let o=n[1],r=le(n[2]);if(r===null)return null;let u=1;if(r.length===4){let c=oe(r[3]);if(c===null)return null;u=c}if(o==="rgb"||o==="rgba"){let c=A(r[0]),f=A(r[1]),h=A(r[2]);return c===null||f===null||h===null?null:{r:c,g:f,b:h,a:u}}let d=ae(r[0]),s=v(r[1]),l=v(r[2]);return d===null||s===null||l===null?null:ie(d,y(s,0,1),y(l,0,1),u)}function ue(t){if(!Y.test(t))return null;let n=t.slice(1),o=n.length===3||n.length===4,r=o?1:2,u=function(s){let l=n.slice(s*r,s*r+r);return parseInt(o?l+l:l,16)},d=n.length===4||n.length===8;return{r:u(0),g:u(1),b:u(2),a:d?u(3)/255:1}}function R(t){let n=ue(t);if(n!==null)return n;let o=se(t);if(o!==null)return o;let r=ne.get(t.toLowerCase());return r===void 0?null:r}function O(t){let n=t/255;return n<=.03928?n/12.92:Math.pow((n+.055)/1.055,2.4)}function F(t){return .2126*O(t.r)+.7152*O(t.g)+.0722*O(t.b)}function L(t,n){let o=F(t),r=F(n),u=o>r?o:r,d=o>r?r:o;return(u+.05)/(d+.05)}function w(t,n){return t.a>=1?t:{r:t.r*t.a+n.r*(1-t.a),g:t.g*t.a+n.g*(1-t.a),b:t.b*t.a+n.b*(1-t.a),a:1}}var N=3,ce={light:[{r:243,g:250,b:246,a:1},{r:255,g:255,b:255,a:1}],dark:[{r:10,g:22,b:40,a:1},{r:26,g:40,b:60,a:1}]},H={r:255,g:255,b:255,a:1};function de(t,n){let o=n===null?["light","dark"]:[n],r=[];for(let l=0;l<o.length;l+=1){let c=ce[o[l]];for(let f=0;f<c.length;f+=1)r.push(c[f])}let u=[],d=["surface","background"];for(let l=0;l<d.length;l+=1){let c=t[d[l]];if(c===void 0)continue;let f=R(c);f!==null&&u.push(f)}if(u.length===0)return r;let s=[];for(let l=0;l<u.length;l+=1){let c=u[l];if(c.a>=1){s.push(c);continue}for(let f=0;f<r.length;f+=1)s.push(w(c,r[f]))}return s}function fe(t,n,o){let r=de(t,o),u=t.text;if(u!==void 0){let s=R(u),l=1/0;if(s===null)l=0;else for(let c=0;c<r.length;c+=1){let f=r[c],h=L(w(s,f),f);h<l&&(l=h)}l<N&&(delete t.text,n.push({key:"text",code:"variable_contrast_too_low"}))}let d=t.accent;if(d!==void 0){let s=R(d),l=1/0;if(s===null)l=0;else if(s.a>=1)l=L(s,H);else for(let c=0;c<r.length;c+=1){let f=L(w(s,r[c]),H);f<l&&(l=f)}l<N&&(delete t.accent,n.push({key:"accent",code:"variable_contrast_too_low"}))}}function pe(t,n){return t==="colour"?R(n)!==null:t==="length"?Q.test(n):ee.test(n)}function ge(t,n){let o=B.get(t);return o===void 0?{code:"unknown_variable",value:""}:typeof n!="string"?{code:"variable_not_a_string",value:""}:n.length>64?{code:"variable_value_too_long",value:""}:o.kind==="colour"&&re.has(t)&&te.has(n.toLowerCase())?{code:"variable_value_erases_content",value:""}:pe(o.kind,n)?{code:null,value:n}:{code:"variable_value_malformed",value:""}}function U(t,n=null){let o={},r=[];if(t===null||typeof t!="object"||Array.isArray(t))return{accepted:{},declarations:{},rejections:[]};let u=Object.keys(t);for(let s=0;s<u.length;s+=1){let l=u[s];if(s>=12){r.push({key:l,code:"too_many_variables"});break}let c=ge(l,t[l]);if(c.code!==null){r.push({key:l,code:c.code});continue}o[l]=c.value}fe(o,r,n);let d={};for(let s of T){let l=o[s];if(l===void 0)continue;let c=B.get(s).targets;for(let f=0;f<c.length;f+=1)d[c[f]]=l}return{accepted:o,declarations:d,rejections:r}}function j(t){return t==="light"||t==="dark"?t:null}var z="4";(function(){"use strict";if(typeof window=="undefined")return;let t="width=460,height=640",n=2500,o="Pay with Canopy",r=500,u=420,d="canopy",s="cnpy_pk_live_";function l(){let e=document.currentScript;if(e&&e.src)try{return new URL(e.src).origin}catch(i){}let a=document.getElementsByTagName("script");for(let i=0;i<a.length;i+=1){let p=a[i].src;if(p&&/\/v1\/(?:[^/]+\/)?canopy\.js(?:[?#].*)?$/.test(p))try{return new URL(p).origin}catch(b){}}return null}function c(e){let a;try{a=new URL(e)}catch(b){return{ok:!1,code:"canopy_origin_invalid"}}if(!((a.pathname===""||a.pathname==="/")&&a.search===""&&a.hash===""))return{ok:!1,code:"canopy_origin_not_bare"};let p=a.hostname==="localhost"||a.hostname==="127.0.0.1";return a.protocol!=="https:"&&!p?{ok:!1,code:"canopy_origin_insecure"}:{ok:!0,origin:a.origin}}function f(e){if(e!==void 0)return c(e);let a=l();return a?{ok:!0,origin:a}:{ok:!1,code:"canopy_origin_undiscoverable"}}function h(e){let a=new URL("/customer-pay",e.origin);a.searchParams.set("merchant",e.merchant),e.theme!==null&&a.searchParams.set(S,e.theme);for(let i=0;i<T.length;i+=1){let p=T[i],b=e.themeVariables[p];b!==void 0&&a.searchParams.set("v."+p,b)}return a.hash="cap="+encodeURIComponent(e.capability||""),a.toString()}function m(e,a,i){if(!e.destroyed)try{e.onEvent(Object.assign({type:a},i))}catch(p){}}function W(e,a){for(let i=0;i<a.length;i+=1){let p=a[i];m(e,"error",{code:p.code,variable:p.key})}}function I(e){e.handshakeTimer&&(clearTimeout(e.handshakeTimer),e.handshakeTimer=null),e.resizeObserver&&(e.resizeObserver.disconnect(),e.resizeObserver=null),e.frame&&(e.frame.parentNode&&e.frame.parentNode.removeChild(e.frame),e.frame=null),e.lastHeight=null}function K(e){e.popupPollTimer&&clearInterval(e.popupPollTimer),e.popupPollTimer=setInterval(function(){try{e.popupWin&&e.popupWin.closed&&(e.popupPollTimer&&clearInterval(e.popupPollTimer),e.popupPollTimer=null,e.popupWin=null,m(e,"close",{via:"popup"}))}catch(a){e.popupPollTimer&&clearInterval(e.popupPollTimer),e.popupPollTimer=null}},r)}function M(e,a){if(!e.destroyed){if(!a){m(e,"error",{code:"popup_blocked"});return}if(!e.capability){try{a.close()}catch(i){}m(e,"error",{code:"capability_unavailable"});return}try{a.location.href=h(e)}catch(i){m(e,"error",{code:"popup_navigation_failed"});return}e.popupWin=a,K(e)}}function G(e){let a=document.createElement("button");a.type="button",a.textContent=e.fallbackLabel;let i=a.style;i.background="#1A7A4C",i.color="#FFFFFF",i.border="none",i.borderRadius="8px",i.height="48px",i.padding="0 20px",i.fontSize="16px",i.fontFamily="inherit",i.cursor="pointer",i.maxWidth="100%",i.overflow="hidden",i.textOverflow="ellipsis",i.whiteSpace="nowrap",i.display="inline-block",a.addEventListener("click",function(){let p=window.open("","canopy_checkout",t);M(e,p)}),e.node.appendChild(a),e.fallbackButton=a,m(e,"fallback_offered",{surface:"popup",reason:"iframe_unavailable"})}function X(e){let a=document.createElement("iframe");a.src=h(e),a.style.width="100%",a.style.border="none",a.setAttribute("allow","clipboard-write"),a.setAttribute("title","Canopy checkout"),a.style.height=u+"px",e.node.appendChild(a),e.frame=a,typeof ResizeObserver!="undefined"&&(e.resizeObserver=new ResizeObserver(function(i){for(let p=0;p<i.length;p+=1){let b=Math.round(i[p].contentRect.height);b>0&&b!==e.lastHeight&&(e.lastHeight=b,m(e,"resize",{height:b}))}}),e.resizeObserver.observe(a)),e.handshakeTimer=setTimeout(function(){e.handshakeTimer=null,m(e,"surface_unavailable",{attempted:"iframe"}),I(e),e.surface==="auto"?G(e):m(e,"error",{code:"iframe_blocked"})},e.handshakeTimeoutMs)}function D(e,a){if(a.origin!==e.origin)return;let i=a.data;if(!(!i||i.source!==d)){if(i.type==="ready"){e.handshakeTimer&&(clearTimeout(e.handshakeTimer),e.handshakeTimer=null),m(e,"ready");return}if(i.type==="resize"&&typeof i.height=="number"&&e.frame){e.frame.style.height=i.height+"px";return}if(i.type==="paid"){m(e,"paid",i);return}if(i.type==="close"){m(e,"close");return}}}let E=new WeakMap;function $(e){if(typeof e.merchant!="string"||e.merchant.indexOf(s)!==0){try{(e.onEvent||function(){})({type:"error",code:"invalid_merchant_key"})}catch(_){}return{openNow:function(){},destroy:function(){}}}let a=f(e.canopyOrigin);if(!a.ok){try{(e.onEvent||function(){})({type:"error",code:a.code})}catch(_){}return{openNow:function(){},destroy:function(){}}}let i=j(e.theme),p=U(e.variables,i),b=typeof e.target=="string"?document.querySelector(e.target):e.target;if(!b)return{openNow:function(){},destroy:function(){}};let V=E.get(b);if(V)return V;let g={node:b,capability:e.capability,merchant:e.merchant,origin:a.origin,theme:i,themeVariables:p.accepted,surface:e.surface||"popup",handshakeTimeoutMs:e.handshakeTimeoutMs||n,fallbackLabel:e.fallbackLabel||o,onEvent:e.onEvent||function(){},destroyed:!1,messageListener:function(){},handshakeTimer:null,resizeObserver:null,frame:null,fallbackButton:null,lastHeight:null,popupWin:null,popupPollTimer:null};g.messageListener=function(_){D(g,_)},window.addEventListener("message",g.messageListener),W(g,p.rejections),(g.surface==="iframe"||g.surface==="auto")&&X(g);let P={openNow:function(_){M(g,_)},destroy:function(){g.destroyed||(g.destroyed=!0,window.removeEventListener("message",g.messageListener),I(g),g.popupPollTimer&&(clearInterval(g.popupPollTimer),g.popupPollTimer=null),g.fallbackButton&&(g.fallbackButton.parentNode&&g.fallbackButton.parentNode.removeChild(g.fallbackButton),g.fallbackButton=null),E.delete(b))}};return E.set(b,P),P}let k=window;k.Canopy&&k.Canopy.__version===z||(k.Canopy={mount:$,__version:z})})();})();

package/dist/index.cjs

@@ -25,8 +25,449 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/theme.ts
+var THEME_PARAM = "theme";
+var THEME_VARIABLE_PARAM_PREFIX = "v.";
+var MAX_THEME_VARIABLE_VALUE_LENGTH = 64;
+var MAX_THEME_VARIABLE_ENTRIES = 12;
+var CANOPY_THEME_VARIABLES = [
+  "accent",
+  "background",
+  "surface",
+  "text",
+  "muted",
+  "border",
+  "radius",
+  "font"
+];
+var VARIABLE_TARGETS = /* @__PURE__ */ new Map([
+  [
+    "accent",
+    {
+      kind: "colour",
+      targets: ["--leaf", "--primary", "--accent", "--ring"]
+    }
+  ],
+  [
+    "background",
+    {
+      kind: "colour",
+      targets: ["--paper", "--background", "background"]
+    }
+  ],
+  [
+    "surface",
+    {
+      kind: "colour",
+      targets: ["--surface", "--card", "--popover", "--secondary"]
+    }
+  ],
+  [
+    "text",
+    {
+      kind: "colour",
+      targets: [
+        "--ink",
+        "--foreground",
+        "--card-foreground",
+        "--popover-foreground",
+        "--secondary-foreground"
+      ]
+    }
+  ],
+  [
+    "muted",
+    {
+      kind: "colour",
+      targets: ["--ink-muted", "--muted-foreground"]
+    }
+  ],
+  [
+    "border",
+    { kind: "colour", targets: ["--line", "--border", "--input"] }
+  ],
+  ["radius", { kind: "length", targets: ["--radius"] }],
+  ["font", { kind: "font", targets: ["--font-sans"] }]
+]);
+var COLOUR_HEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var COLOUR_FUNCTION = /^(rgb|rgba|hsl|hsla)\(([0-9a-z.,%/ +-]*)\)$/;
+var NUMBER = /^[+-]?(?:[0-9]{1,4}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})$/;
+var PERCENT = /^[+-]?(?:[0-9]{1,3}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})%$/;
+var LENGTH = /^(?:0|(?:[0-9]{1,4}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})(?:px|rem|em|%))$/;
+var FONT_FAMILY_LIST = /^[A-Za-z0-9 ,_-]+$/;
+var NAMED_COLOURS = /* @__PURE__ */ new Map([
+  ["transparent", { r: 0, g: 0, b: 0, a: 0 }],
+  ["black", { r: 0, g: 0, b: 0, a: 1 }],
+  ["white", { r: 255, g: 255, b: 255, a: 1 }],
+  ["silver", { r: 192, g: 192, b: 192, a: 1 }],
+  ["gray", { r: 128, g: 128, b: 128, a: 1 }],
+  ["grey", { r: 128, g: 128, b: 128, a: 1 }],
+  ["maroon", { r: 128, g: 0, b: 0, a: 1 }],
+  ["red", { r: 255, g: 0, b: 0, a: 1 }],
+  ["purple", { r: 128, g: 0, b: 128, a: 1 }],
+  ["fuchsia", { r: 255, g: 0, b: 255, a: 1 }],
+  ["magenta", { r: 255, g: 0, b: 255, a: 1 }],
+  ["green", { r: 0, g: 128, b: 0, a: 1 }],
+  ["lime", { r: 0, g: 255, b: 0, a: 1 }],
+  ["olive", { r: 128, g: 128, b: 0, a: 1 }],
+  ["yellow", { r: 255, g: 255, b: 0, a: 1 }],
+  ["navy", { r: 0, g: 0, b: 128, a: 1 }],
+  ["blue", { r: 0, g: 0, b: 255, a: 1 }],
+  ["teal", { r: 0, g: 128, b: 128, a: 1 }],
+  ["aqua", { r: 0, g: 255, b: 255, a: 1 }],
+  ["cyan", { r: 0, g: 255, b: 255, a: 1 }],
+  ["orange", { r: 255, g: 165, b: 0, a: 1 }],
+  ["pink", { r: 255, g: 192, b: 203, a: 1 }],
+  ["brown", { r: 165, g: 42, b: 42, a: 1 }],
+  ["beige", { r: 245, g: 245, b: 220, a: 1 }],
+  ["ivory", { r: 255, g: 255, b: 240, a: 1 }],
+  ["indigo", { r: 75, g: 0, b: 130, a: 1 }],
+  ["violet", { r: 238, g: 130, b: 238, a: 1 }],
+  ["gold", { r: 255, g: 215, b: 0, a: 1 }],
+  ["crimson", { r: 220, g: 20, b: 60, a: 1 }],
+  ["salmon", { r: 250, g: 128, b: 114, a: 1 }],
+  ["khaki", { r: 240, g: 230, b: 140, a: 1 }],
+  ["lavender", { r: 230, g: 230, b: 250, a: 1 }],
+  ["turquoise", { r: 64, g: 224, b: 208, a: 1 }],
+  ["tan", { r: 210, g: 180, b: 140, a: 1 }],
+  ["plum", { r: 221, g: 160, b: 221, a: 1 }],
+  ["orchid", { r: 218, g: 112, b: 214, a: 1 }],
+  ["coral", { r: 255, g: 127, b: 80, a: 1 }],
+  ["tomato", { r: 255, g: 99, b: 71, a: 1 }],
+  ["chocolate", { r: 210, g: 105, b: 30, a: 1 }],
+  ["snow", { r: 255, g: 250, b: 250, a: 1 }],
+  ["linen", { r: 250, g: 240, b: 230, a: 1 }],
+  ["azure", { r: 240, g: 255, b: 255, a: 1 }],
+  ["wheat", { r: 245, g: 222, b: 179, a: 1 }],
+  ["thistle", { r: 216, g: 191, b: 216, a: 1 }]
+]);
+var CONTENT_ERASING_COLOURS = /* @__PURE__ */ new Set([
+  "transparent",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "revert-layer"
+]);
+var FOREGROUND_VARIABLES = /* @__PURE__ */ new Set([
+  "text",
+  "muted",
+  "accent"
+]);
+function clamp(value, low, high) {
+  if (value < low) return low;
+  if (value > high) return high;
+  return value;
+}
+function parseNumber(token) {
+  if (!NUMBER.test(token)) return null;
+  const value = Number(token);
+  return Number.isFinite(value) ? value : null;
+}
+function parsePercent(token) {
+  if (!PERCENT.test(token)) return null;
+  const value = Number(token.slice(0, token.length - 1));
+  return Number.isFinite(value) ? value / 100 : null;
+}
+function parseRgbComponent(token) {
+  const percent = parsePercent(token);
+  if (percent !== null) return clamp(percent, 0, 1) * 255;
+  const number = parseNumber(token);
+  if (number === null) return null;
+  return clamp(number, 0, 255);
+}
+function parseAlpha(token) {
+  const percent = parsePercent(token);
+  if (percent !== null) return clamp(percent, 0, 1);
+  const number = parseNumber(token);
+  if (number === null) return null;
+  return clamp(number, 0, 1);
+}
+function parseHue(token) {
+  let text = token;
+  let scale = 1;
+  if (text.endsWith("deg")) text = text.slice(0, text.length - 3);
+  else if (text.endsWith("grad")) {
+    text = text.slice(0, text.length - 4);
+    scale = 360 / 400;
+  } else if (text.endsWith("turn")) {
+    text = text.slice(0, text.length - 4);
+    scale = 360;
+  } else if (text.endsWith("rad")) {
+    text = text.slice(0, text.length - 3);
+    scale = 180 / Math.PI;
+  }
+  const number = parseNumber(text);
+  if (number === null) return null;
+  return (number * scale % 360 + 360) % 360;
+}
+function hueToChannel(p, q, tRaw) {
+  let t = tRaw;
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  if (t < 1 / 6) return p + (q - p) * 6 * t;
+  if (t < 1 / 2) return q;
+  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+  return p;
+}
+function hslToRgb(h, s, l, a) {
+  if (s === 0) {
+    const grey = l * 255;
+    return { r: grey, g: grey, b: grey, a };
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const hk = h / 360;
+  return {
+    r: hueToChannel(p, q, hk + 1 / 3) * 255,
+    g: hueToChannel(p, q, hk) * 255,
+    b: hueToChannel(p, q, hk - 1 / 3) * 255,
+    a
+  };
+}
+function splitColourComponents(body) {
+  const trimmed = body.trim();
+  if (trimmed === "") return null;
+  if (trimmed.indexOf(",") >= 0) {
+    if (trimmed.indexOf("/") >= 0) return null;
+    const parts = trimmed.split(",").map(function(part) {
+      return part.trim();
+    });
+    if (parts.length !== 3 && parts.length !== 4) return null;
+    return parts;
+  }
+  const slashParts = trimmed.split("/");
+  if (slashParts.length > 2) return null;
+  const main = slashParts[0].trim().split(/ +/);
+  if (main.length !== 3) return null;
+  if (slashParts.length === 1) return main;
+  const alpha = slashParts[1].trim();
+  if (alpha === "" || alpha.indexOf(" ") >= 0) return null;
+  return main.concat([alpha]);
+}
+function parseColourFunction(value) {
+  const match = COLOUR_FUNCTION.exec(value);
+  if (match === null) return null;
+  const fn = match[1];
+  const parts = splitColourComponents(match[2]);
+  if (parts === null) return null;
+  let alpha = 1;
+  if (parts.length === 4) {
+    const parsed = parseAlpha(parts[3]);
+    if (parsed === null) return null;
+    alpha = parsed;
+  }
+  if (fn === "rgb" || fn === "rgba") {
+    const r = parseRgbComponent(parts[0]);
+    const g = parseRgbComponent(parts[1]);
+    const b = parseRgbComponent(parts[2]);
+    if (r === null || g === null || b === null) return null;
+    return { r, g, b, a: alpha };
+  }
+  const h = parseHue(parts[0]);
+  const s = parsePercent(parts[1]);
+  const l = parsePercent(parts[2]);
+  if (h === null || s === null || l === null) return null;
+  return hslToRgb(h, clamp(s, 0, 1), clamp(l, 0, 1), alpha);
+}
+function parseHexColour(value) {
+  if (!COLOUR_HEX.test(value)) return null;
+  const digits = value.slice(1);
+  const short = digits.length === 3 || digits.length === 4;
+  const size = short ? 1 : 2;
+  const channel = function(index) {
+    const part = digits.slice(index * size, index * size + size);
+    return parseInt(short ? part + part : part, 16);
+  };
+  const hasAlpha = digits.length === 4 || digits.length === 8;
+  return {
+    r: channel(0),
+    g: channel(1),
+    b: channel(2),
+    a: hasAlpha ? channel(3) / 255 : 1
+  };
+}
+function parseColour(value) {
+  const hex = parseHexColour(value);
+  if (hex !== null) return hex;
+  const fn = parseColourFunction(value);
+  if (fn !== null) return fn;
+  const named = NAMED_COLOURS.get(value.toLowerCase());
+  return named === void 0 ? null : named;
+}
+function channelLuminance(component) {
+  const s = component / 255;
+  return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function relativeLuminance(colour) {
+  return 0.2126 * channelLuminance(colour.r) + 0.7152 * channelLuminance(colour.g) + 0.0722 * channelLuminance(colour.b);
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const light = la > lb ? la : lb;
+  const dark = la > lb ? lb : la;
+  return (light + 0.05) / (dark + 0.05);
+}
+function composite(fg, bg) {
+  if (fg.a >= 1) return fg;
+  return {
+    r: fg.r * fg.a + bg.r * (1 - fg.a),
+    g: fg.g * fg.a + bg.g * (1 - fg.a),
+    b: fg.b * fg.a + bg.b * (1 - fg.a),
+    a: 1
+  };
+}
+var MIN_THEME_CONTRAST_RATIO = 3;
+var DEFAULT_BACKDROPS = {
+  light: [
+    { r: 243, g: 250, b: 246, a: 1 },
+    // --paper
+    { r: 255, g: 255, b: 255, a: 1 }
+    // --surface (--white)
+  ],
+  dark: [
+    { r: 10, g: 22, b: 40, a: 1 },
+    // --background (--navy)
+    { r: 26, g: 40, b: 60, a: 1 }
+    // --surface (--navy-mid)
+  ]
+};
+var ACCENT_FOREGROUND = { r: 255, g: 255, b: 255, a: 1 };
+function backdropCandidates(accepted, forcedTheme) {
+  const schemes = forcedTheme === null ? ["light", "dark"] : [forcedTheme];
+  const bases = [];
+  for (let i = 0; i < schemes.length; i += 1) {
+    const scheme = DEFAULT_BACKDROPS[schemes[i]];
+    for (let j = 0; j < scheme.length; j += 1) bases.push(scheme[j]);
+  }
+  const supplied = [];
+  const names = ["surface", "background"];
+  for (let i = 0; i < names.length; i += 1) {
+    const raw = accepted[names[i]];
+    if (raw === void 0) continue;
+    const parsed = parseColour(raw);
+    if (parsed === null) continue;
+    supplied.push(parsed);
+  }
+  if (supplied.length === 0) return bases;
+  const out = [];
+  for (let i = 0; i < supplied.length; i += 1) {
+    const value = supplied[i];
+    if (value.a >= 1) {
+      out.push(value);
+      continue;
+    }
+    for (let j = 0; j < bases.length; j += 1) {
+      out.push(composite(value, bases[j]));
+    }
+  }
+  return out;
+}
+function enforceLegibilityFloor(accepted, rejections, forcedTheme) {
+  const backdrops = backdropCandidates(accepted, forcedTheme);
+  const text = accepted["text"];
+  if (text !== void 0) {
+    const parsed = parseColour(text);
+    let worst = Infinity;
+    if (parsed === null) worst = 0;
+    else {
+      for (let i = 0; i < backdrops.length; i += 1) {
+        const backdrop = backdrops[i];
+        const ratio = contrastRatio(composite(parsed, backdrop), backdrop);
+        if (ratio < worst) worst = ratio;
+      }
+    }
+    if (worst < MIN_THEME_CONTRAST_RATIO) {
+      delete accepted["text"];
+      rejections.push({ key: "text", code: "variable_contrast_too_low" });
+    }
+  }
+  const accent = accepted["accent"];
+  if (accent !== void 0) {
+    const parsed = parseColour(accent);
+    let worst = Infinity;
+    if (parsed === null) worst = 0;
+    else if (parsed.a >= 1) {
+      worst = contrastRatio(parsed, ACCENT_FOREGROUND);
+    } else {
+      for (let i = 0; i < backdrops.length; i += 1) {
+        const ratio = contrastRatio(
+          composite(parsed, backdrops[i]),
+          ACCENT_FOREGROUND
+        );
+        if (ratio < worst) worst = ratio;
+      }
+    }
+    if (worst < MIN_THEME_CONTRAST_RATIO) {
+      delete accepted["accent"];
+      rejections.push({ key: "accent", code: "variable_contrast_too_low" });
+    }
+  }
+}
+function matchesKind(kind, value) {
+  if (kind === "colour") return parseColour(value) !== null;
+  if (kind === "length") return LENGTH.test(value);
+  return FONT_FAMILY_LIST.test(value);
+}
+function classifyEntry(key, raw) {
+  const spec = VARIABLE_TARGETS.get(key);
+  if (spec === void 0) return { code: "unknown_variable", value: "" };
+  if (typeof raw !== "string")
+    return { code: "variable_not_a_string", value: "" };
+  if (raw.length > MAX_THEME_VARIABLE_VALUE_LENGTH)
+    return { code: "variable_value_too_long", value: "" };
+  if (spec.kind === "colour" && FOREGROUND_VARIABLES.has(key) && CONTENT_ERASING_COLOURS.has(raw.toLowerCase())) {
+    return { code: "variable_value_erases_content", value: "" };
+  }
+  if (!matchesKind(spec.kind, raw))
+    return { code: "variable_value_malformed", value: "" };
+  return { code: null, value: raw };
+}
+function resolveThemeVariables(raw, forcedTheme = null) {
+  const accepted = {};
+  const rejections = [];
+  if (raw === null || typeof raw !== "object" || Array.isArray(raw)) {
+    return { accepted: {}, declarations: {}, rejections: [] };
+  }
+  const entries = Object.keys(raw);
+  for (let i = 0; i < entries.length; i += 1) {
+    const key = entries[i];
+    if (i >= MAX_THEME_VARIABLE_ENTRIES) {
+      rejections.push({ key, code: "too_many_variables" });
+      break;
+    }
+    const outcome = classifyEntry(key, raw[key]);
+    if (outcome.code !== null) {
+      rejections.push({ key, code: outcome.code });
+      continue;
+    }
+    accepted[key] = outcome.value;
+  }
+  enforceLegibilityFloor(accepted, rejections, forcedTheme);
+  const declarations = {};
+  for (const name of CANOPY_THEME_VARIABLES) {
+    const value = accepted[name];
+    if (value === void 0) continue;
+    const targets = VARIABLE_TARGETS.get(name).targets;
+    for (let i = 0; i < targets.length; i += 1) {
+      declarations[targets[i]] = value;
+    }
+  }
+  return {
+    accepted,
+    declarations,
+    rejections
+  };
+}
+function normalizeForcedTheme(raw) {
+  if (raw === "light" || raw === "dark") return raw;
+  return null;
+}
+
 // src/loader.ts
-var LOADER_VERSION = "2";
+var LOADER_VERSION = "4";
 (function() {
   "use strict";
   if (typeof window === "undefined") return;
@@ -34,6 +475,7 @@ var LOADER_VERSION = "2";
   const DEFAULT_HANDSHAKE_TIMEOUT_MS = 2500;
   const DEFAULT_FALLBACK_LABEL = "Pay with Canopy";
   const POPUP_POLL_INTERVAL_MS = 500;
+  const INITIAL_FRAME_HEIGHT_PX = 420;
   const MESSAGE_SOURCE = "canopy";
   const PUBLISHABLE_KEY_PREFIX = "cnpy_pk_live_";
   function resolveOrigin() {
@@ -86,6 +528,15 @@ var LOADER_VERSION = "2";
   function buildCheckoutUrl(internal) {
     const url = new URL("/customer-pay", internal.origin);
     url.searchParams.set("merchant", internal.merchant);
+    if (internal.theme !== null) {
+      url.searchParams.set(THEME_PARAM, internal.theme);
+    }
+    for (let i = 0; i < CANOPY_THEME_VARIABLES.length; i += 1) {
+      const name = CANOPY_THEME_VARIABLES[i];
+      const value = internal.themeVariables[name];
+      if (value === void 0) continue;
+      url.searchParams.set(THEME_VARIABLE_PARAM_PREFIX + name, value);
+    }
     url.hash = "cap=" + encodeURIComponent(internal.capability || "");
     return url.toString();
   }
@@ -96,6 +547,15 @@ var LOADER_VERSION = "2";
     } catch {
     }
   }
+  function emitThemeRejections(internal, rejections) {
+    for (let i = 0; i < rejections.length; i += 1) {
+      const rejection = rejections[i];
+      emit(internal, "error", {
+        code: rejection.code,
+        variable: rejection.key
+      });
+    }
+  }
   function teardownFrame(internal) {
     if (internal.handshakeTimer) {
       clearTimeout(internal.handshakeTimer);
@@ -186,6 +646,9 @@ var LOADER_VERSION = "2";
     iframe.src = buildCheckoutUrl(internal);
     iframe.style.width = "100%";
     iframe.style.border = "none";
+    iframe.setAttribute("allow", "clipboard-write");
+    iframe.setAttribute("title", "Canopy checkout");
+    iframe.style.height = INITIAL_FRAME_HEIGHT_PX + "px";
     internal.node.appendChild(iframe);
     internal.frame = iframe;
     if (typeof ResizeObserver !== "undefined") {
@@ -265,6 +728,8 @@ var LOADER_VERSION = "2";
       }, destroy: function() {
       } };
     }
+    const forcedTheme = normalizeForcedTheme(opts.theme);
+    const themeVariables = resolveThemeVariables(opts.variables, forcedTheme);
     const node = typeof opts.target === "string" ? document.querySelector(opts.target) : opts.target;
     if (!node) {
       return { openNow: function() {
@@ -278,6 +743,8 @@ var LOADER_VERSION = "2";
       capability: opts.capability,
       merchant: opts.merchant,
       origin: originResolution.origin,
+      theme: forcedTheme,
+      themeVariables: themeVariables.accepted,
       surface: opts.surface || "popup",
       handshakeTimeoutMs: opts.handshakeTimeoutMs || DEFAULT_HANDSHAKE_TIMEOUT_MS,
       fallbackLabel: opts.fallbackLabel || DEFAULT_FALLBACK_LABEL,
@@ -298,6 +765,7 @@ var LOADER_VERSION = "2";
       handleMessage(internal, event);
     };
     window.addEventListener("message", internal.messageListener);
+    emitThemeRejections(internal, themeVariables.rejections);
     if (internal.surface === "iframe" || internal.surface === "auto") {
       createFrame(internal);
     }

package/dist/index.d.cts

@@ -1,3 +1,38 @@
+/**
+ * Canopy checkout theming -- the ONE validator behind
+ * `Canopy.mount({ theme, variables })`.
+ *
+ * Imported by BOTH `packages/checkout-sdk/src/loader.ts` (tsup bundles this
+ * relative sibling into the IIFE) and `app/customer-pay/page.tsx` (the app
+ * already imports across this package boundary; `tsconfig.json` maps `@/*`
+ * to the repo root and includes `packages/**\/*.ts`). Deliberately NOT
+ * duplicated the way `MESSAGE_SOURCE` is -- that duplication exists only
+ * because a React component cannot reach into the tsup entry graph, which
+ * is not the case here. Two copies of a grammar are two grammars.
+ *
+ * The two passes are not equals. The SERVER pass in `app/customer-pay/
+ * page.tsx` is the security boundary: those values arrive as query
+ * parameters that anyone can hand-craft, with no loader involved. The
+ * client-side pass inside `mount()` is a developer-experience courtesy --
+ * it turns a typo into an `error` event on the merchant's own console
+ * instead of a value that silently vanishes server-side.
+ *
+ * Threat register (quick 260906-qql): T-QQL-01 tampering (a value escaping
+ * its declaration), T-QQL-02 elevation (a prototype-chain key), T-QQL-03
+ * denial of service (unbounded input).
+ *
+ * Pure and browser-free: no `window`, no `document`, no DOM types. It runs
+ * inside a React Server Component, inside a `node --test` process, and
+ * inside an es2018 IIFE in a merchant's page.
+ */
+/** What a merchant may pass as `theme`. */
+type CanopyThemeOption = "light" | "dark" | "auto";
+/** The eight public names, in the order their declarations are emitted. */
+declare const CANOPY_THEME_VARIABLES: readonly ["accent", "background", "surface", "text", "muted", "border", "radius", "font"];
+type CanopyThemeVariable = (typeof CANOPY_THEME_VARIABLES)[number];
+/** What a merchant may pass as `variables`. */
+type CanopyThemeVariables = Partial<Record<CanopyThemeVariable, string>>;
+
 /**
  * Canopy checkout SDK loader.
  *
@@ -31,6 +66,16 @@
  * | "auto"`, default `"popup"`), seven events (`ready`, `resize`, `paid`,
  * `error`, `close`, `surface_unavailable`, `fallback_offered`).
  */
+
+/**
+ * `close` is POPUP-ONLY. It reports that the payer closed the checkout
+ * window, which the loader detects by polling `popupWin.closed`. An inline
+ * (`surface: "iframe"`) embed has nothing to close -- the merchant owns the
+ * container and removes it themselves -- so no `close` is ever emitted
+ * there, and none is synthesised to make the two surfaces look alike.
+ *
+ * Every other event reaches both surfaces.
+ */
 type CanopyEventType = "ready" | "resize" | "paid" | "error" | "close" | "surface_unavailable" | "fallback_offered";
 type CanopyEvent = {
     type: CanopyEventType;
@@ -59,6 +104,28 @@ type MountOptions = {
      * script tag when both are available.
      */
     canopyOrigin?: string;
+    /**
+     * Forces the checkout's colour scheme for THIS embed only, overriding the
+     * visitor's own stored preference inside the frame and nowhere else.
+     * `"auto"` and omitting it are the same thing and are the default: the
+     * visitor's preference (and their OS setting) keeps deciding. Nothing is
+     * written to the visitor's storage either way.
+     */
+    theme?: CanopyThemeOption;
+    /**
+     * Repaints the checkout through eight allowlisted names: `accent`,
+     * `background`, `surface`, `text`, `muted`, `border`, `radius` and
+     * `font`. Values are CSS -- a colour (hex, `rgb()`/`rgba()`/`hsl()`, or a
+     * bare keyword such as `transparent`) for the six colour names, a length
+     * for `radius`, a plain family list for `font`.
+     *
+     * Rejection is PER ENTRY and never fatal: an unknown name or a malformed
+     * value drops that one entry, emits an `error` event naming it, and lets
+     * every other entry through. A cosmetic option can never block a checkout.
+     * Validated again server-side, which is the authoritative pass -- this one
+     * exists so a typo reaches your console instead of vanishing silently.
+     */
+    variables?: CanopyThemeVariables;
 };
 type CanopyHandle = {
     openNow: (win: Window | null) => void;
@@ -88,4 +155,4 @@ declare function mount(opts: MountOptions): CanopyHandle;
  * `undefined` server-side / before the loader has installed the global. */
 declare function version(): string | undefined;
 
-export { type CanopyEvent, type CanopyEventType, type CanopyHandle, type MountOptions, type Surface, mount, version };
+export { type CanopyEvent, type CanopyEventType, type CanopyHandle, type CanopyThemeOption, type CanopyThemeVariable, type CanopyThemeVariables, type MountOptions, type Surface, mount, version };

package/dist/index.d.ts

@@ -1,3 +1,38 @@
+/**
+ * Canopy checkout theming -- the ONE validator behind
+ * `Canopy.mount({ theme, variables })`.
+ *
+ * Imported by BOTH `packages/checkout-sdk/src/loader.ts` (tsup bundles this
+ * relative sibling into the IIFE) and `app/customer-pay/page.tsx` (the app
+ * already imports across this package boundary; `tsconfig.json` maps `@/*`
+ * to the repo root and includes `packages/**\/*.ts`). Deliberately NOT
+ * duplicated the way `MESSAGE_SOURCE` is -- that duplication exists only
+ * because a React component cannot reach into the tsup entry graph, which
+ * is not the case here. Two copies of a grammar are two grammars.
+ *
+ * The two passes are not equals. The SERVER pass in `app/customer-pay/
+ * page.tsx` is the security boundary: those values arrive as query
+ * parameters that anyone can hand-craft, with no loader involved. The
+ * client-side pass inside `mount()` is a developer-experience courtesy --
+ * it turns a typo into an `error` event on the merchant's own console
+ * instead of a value that silently vanishes server-side.
+ *
+ * Threat register (quick 260906-qql): T-QQL-01 tampering (a value escaping
+ * its declaration), T-QQL-02 elevation (a prototype-chain key), T-QQL-03
+ * denial of service (unbounded input).
+ *
+ * Pure and browser-free: no `window`, no `document`, no DOM types. It runs
+ * inside a React Server Component, inside a `node --test` process, and
+ * inside an es2018 IIFE in a merchant's page.
+ */
+/** What a merchant may pass as `theme`. */
+type CanopyThemeOption = "light" | "dark" | "auto";
+/** The eight public names, in the order their declarations are emitted. */
+declare const CANOPY_THEME_VARIABLES: readonly ["accent", "background", "surface", "text", "muted", "border", "radius", "font"];
+type CanopyThemeVariable = (typeof CANOPY_THEME_VARIABLES)[number];
+/** What a merchant may pass as `variables`. */
+type CanopyThemeVariables = Partial<Record<CanopyThemeVariable, string>>;
+
 /**
  * Canopy checkout SDK loader.
  *
@@ -31,6 +66,16 @@
  * | "auto"`, default `"popup"`), seven events (`ready`, `resize`, `paid`,
  * `error`, `close`, `surface_unavailable`, `fallback_offered`).
  */
+
+/**
+ * `close` is POPUP-ONLY. It reports that the payer closed the checkout
+ * window, which the loader detects by polling `popupWin.closed`. An inline
+ * (`surface: "iframe"`) embed has nothing to close -- the merchant owns the
+ * container and removes it themselves -- so no `close` is ever emitted
+ * there, and none is synthesised to make the two surfaces look alike.
+ *
+ * Every other event reaches both surfaces.
+ */
 type CanopyEventType = "ready" | "resize" | "paid" | "error" | "close" | "surface_unavailable" | "fallback_offered";
 type CanopyEvent = {
     type: CanopyEventType;
@@ -59,6 +104,28 @@ type MountOptions = {
      * script tag when both are available.
      */
     canopyOrigin?: string;
+    /**
+     * Forces the checkout's colour scheme for THIS embed only, overriding the
+     * visitor's own stored preference inside the frame and nowhere else.
+     * `"auto"` and omitting it are the same thing and are the default: the
+     * visitor's preference (and their OS setting) keeps deciding. Nothing is
+     * written to the visitor's storage either way.
+     */
+    theme?: CanopyThemeOption;
+    /**
+     * Repaints the checkout through eight allowlisted names: `accent`,
+     * `background`, `surface`, `text`, `muted`, `border`, `radius` and
+     * `font`. Values are CSS -- a colour (hex, `rgb()`/`rgba()`/`hsl()`, or a
+     * bare keyword such as `transparent`) for the six colour names, a length
+     * for `radius`, a plain family list for `font`.
+     *
+     * Rejection is PER ENTRY and never fatal: an unknown name or a malformed
+     * value drops that one entry, emits an `error` event naming it, and lets
+     * every other entry through. A cosmetic option can never block a checkout.
+     * Validated again server-side, which is the authoritative pass -- this one
+     * exists so a typo reaches your console instead of vanishing silently.
+     */
+    variables?: CanopyThemeVariables;
 };
 type CanopyHandle = {
     openNow: (win: Window | null) => void;
@@ -88,4 +155,4 @@ declare function mount(opts: MountOptions): CanopyHandle;
  * `undefined` server-side / before the loader has installed the global. */
 declare function version(): string | undefined;
 
-export { type CanopyEvent, type CanopyEventType, type CanopyHandle, type MountOptions, type Surface, mount, version };
+export { type CanopyEvent, type CanopyEventType, type CanopyHandle, type CanopyThemeOption, type CanopyThemeVariable, type CanopyThemeVariables, type MountOptions, type Surface, mount, version };

package/dist/index.js

@@ -1,5 +1,446 @@
+// src/theme.ts
+var THEME_PARAM = "theme";
+var THEME_VARIABLE_PARAM_PREFIX = "v.";
+var MAX_THEME_VARIABLE_VALUE_LENGTH = 64;
+var MAX_THEME_VARIABLE_ENTRIES = 12;
+var CANOPY_THEME_VARIABLES = [
+  "accent",
+  "background",
+  "surface",
+  "text",
+  "muted",
+  "border",
+  "radius",
+  "font"
+];
+var VARIABLE_TARGETS = /* @__PURE__ */ new Map([
+  [
+    "accent",
+    {
+      kind: "colour",
+      targets: ["--leaf", "--primary", "--accent", "--ring"]
+    }
+  ],
+  [
+    "background",
+    {
+      kind: "colour",
+      targets: ["--paper", "--background", "background"]
+    }
+  ],
+  [
+    "surface",
+    {
+      kind: "colour",
+      targets: ["--surface", "--card", "--popover", "--secondary"]
+    }
+  ],
+  [
+    "text",
+    {
+      kind: "colour",
+      targets: [
+        "--ink",
+        "--foreground",
+        "--card-foreground",
+        "--popover-foreground",
+        "--secondary-foreground"
+      ]
+    }
+  ],
+  [
+    "muted",
+    {
+      kind: "colour",
+      targets: ["--ink-muted", "--muted-foreground"]
+    }
+  ],
+  [
+    "border",
+    { kind: "colour", targets: ["--line", "--border", "--input"] }
+  ],
+  ["radius", { kind: "length", targets: ["--radius"] }],
+  ["font", { kind: "font", targets: ["--font-sans"] }]
+]);
+var COLOUR_HEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var COLOUR_FUNCTION = /^(rgb|rgba|hsl|hsla)\(([0-9a-z.,%/ +-]*)\)$/;
+var NUMBER = /^[+-]?(?:[0-9]{1,4}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})$/;
+var PERCENT = /^[+-]?(?:[0-9]{1,3}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})%$/;
+var LENGTH = /^(?:0|(?:[0-9]{1,4}(?:\.[0-9]{1,4})?|\.[0-9]{1,4})(?:px|rem|em|%))$/;
+var FONT_FAMILY_LIST = /^[A-Za-z0-9 ,_-]+$/;
+var NAMED_COLOURS = /* @__PURE__ */ new Map([
+  ["transparent", { r: 0, g: 0, b: 0, a: 0 }],
+  ["black", { r: 0, g: 0, b: 0, a: 1 }],
+  ["white", { r: 255, g: 255, b: 255, a: 1 }],
+  ["silver", { r: 192, g: 192, b: 192, a: 1 }],
+  ["gray", { r: 128, g: 128, b: 128, a: 1 }],
+  ["grey", { r: 128, g: 128, b: 128, a: 1 }],
+  ["maroon", { r: 128, g: 0, b: 0, a: 1 }],
+  ["red", { r: 255, g: 0, b: 0, a: 1 }],
+  ["purple", { r: 128, g: 0, b: 128, a: 1 }],
+  ["fuchsia", { r: 255, g: 0, b: 255, a: 1 }],
+  ["magenta", { r: 255, g: 0, b: 255, a: 1 }],
+  ["green", { r: 0, g: 128, b: 0, a: 1 }],
+  ["lime", { r: 0, g: 255, b: 0, a: 1 }],
+  ["olive", { r: 128, g: 128, b: 0, a: 1 }],
+  ["yellow", { r: 255, g: 255, b: 0, a: 1 }],
+  ["navy", { r: 0, g: 0, b: 128, a: 1 }],
+  ["blue", { r: 0, g: 0, b: 255, a: 1 }],
+  ["teal", { r: 0, g: 128, b: 128, a: 1 }],
+  ["aqua", { r: 0, g: 255, b: 255, a: 1 }],
+  ["cyan", { r: 0, g: 255, b: 255, a: 1 }],
+  ["orange", { r: 255, g: 165, b: 0, a: 1 }],
+  ["pink", { r: 255, g: 192, b: 203, a: 1 }],
+  ["brown", { r: 165, g: 42, b: 42, a: 1 }],
+  ["beige", { r: 245, g: 245, b: 220, a: 1 }],
+  ["ivory", { r: 255, g: 255, b: 240, a: 1 }],
+  ["indigo", { r: 75, g: 0, b: 130, a: 1 }],
+  ["violet", { r: 238, g: 130, b: 238, a: 1 }],
+  ["gold", { r: 255, g: 215, b: 0, a: 1 }],
+  ["crimson", { r: 220, g: 20, b: 60, a: 1 }],
+  ["salmon", { r: 250, g: 128, b: 114, a: 1 }],
+  ["khaki", { r: 240, g: 230, b: 140, a: 1 }],
+  ["lavender", { r: 230, g: 230, b: 250, a: 1 }],
+  ["turquoise", { r: 64, g: 224, b: 208, a: 1 }],
+  ["tan", { r: 210, g: 180, b: 140, a: 1 }],
+  ["plum", { r: 221, g: 160, b: 221, a: 1 }],
+  ["orchid", { r: 218, g: 112, b: 214, a: 1 }],
+  ["coral", { r: 255, g: 127, b: 80, a: 1 }],
+  ["tomato", { r: 255, g: 99, b: 71, a: 1 }],
+  ["chocolate", { r: 210, g: 105, b: 30, a: 1 }],
+  ["snow", { r: 255, g: 250, b: 250, a: 1 }],
+  ["linen", { r: 250, g: 240, b: 230, a: 1 }],
+  ["azure", { r: 240, g: 255, b: 255, a: 1 }],
+  ["wheat", { r: 245, g: 222, b: 179, a: 1 }],
+  ["thistle", { r: 216, g: 191, b: 216, a: 1 }]
+]);
+var CONTENT_ERASING_COLOURS = /* @__PURE__ */ new Set([
+  "transparent",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "revert-layer"
+]);
+var FOREGROUND_VARIABLES = /* @__PURE__ */ new Set([
+  "text",
+  "muted",
+  "accent"
+]);
+function clamp(value, low, high) {
+  if (value < low) return low;
+  if (value > high) return high;
+  return value;
+}
+function parseNumber(token) {
+  if (!NUMBER.test(token)) return null;
+  const value = Number(token);
+  return Number.isFinite(value) ? value : null;
+}
+function parsePercent(token) {
+  if (!PERCENT.test(token)) return null;
+  const value = Number(token.slice(0, token.length - 1));
+  return Number.isFinite(value) ? value / 100 : null;
+}
+function parseRgbComponent(token) {
+  const percent = parsePercent(token);
+  if (percent !== null) return clamp(percent, 0, 1) * 255;
+  const number = parseNumber(token);
+  if (number === null) return null;
+  return clamp(number, 0, 255);
+}
+function parseAlpha(token) {
+  const percent = parsePercent(token);
+  if (percent !== null) return clamp(percent, 0, 1);
+  const number = parseNumber(token);
+  if (number === null) return null;
+  return clamp(number, 0, 1);
+}
+function parseHue(token) {
+  let text = token;
+  let scale = 1;
+  if (text.endsWith("deg")) text = text.slice(0, text.length - 3);
+  else if (text.endsWith("grad")) {
+    text = text.slice(0, text.length - 4);
+    scale = 360 / 400;
+  } else if (text.endsWith("turn")) {
+    text = text.slice(0, text.length - 4);
+    scale = 360;
+  } else if (text.endsWith("rad")) {
+    text = text.slice(0, text.length - 3);
+    scale = 180 / Math.PI;
+  }
+  const number = parseNumber(text);
+  if (number === null) return null;
+  return (number * scale % 360 + 360) % 360;
+}
+function hueToChannel(p, q, tRaw) {
+  let t = tRaw;
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  if (t < 1 / 6) return p + (q - p) * 6 * t;
+  if (t < 1 / 2) return q;
+  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+  return p;
+}
+function hslToRgb(h, s, l, a) {
+  if (s === 0) {
+    const grey = l * 255;
+    return { r: grey, g: grey, b: grey, a };
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const hk = h / 360;
+  return {
+    r: hueToChannel(p, q, hk + 1 / 3) * 255,
+    g: hueToChannel(p, q, hk) * 255,
+    b: hueToChannel(p, q, hk - 1 / 3) * 255,
+    a
+  };
+}
+function splitColourComponents(body) {
+  const trimmed = body.trim();
+  if (trimmed === "") return null;
+  if (trimmed.indexOf(",") >= 0) {
+    if (trimmed.indexOf("/") >= 0) return null;
+    const parts = trimmed.split(",").map(function(part) {
+      return part.trim();
+    });
+    if (parts.length !== 3 && parts.length !== 4) return null;
+    return parts;
+  }
+  const slashParts = trimmed.split("/");
+  if (slashParts.length > 2) return null;
+  const main = slashParts[0].trim().split(/ +/);
+  if (main.length !== 3) return null;
+  if (slashParts.length === 1) return main;
+  const alpha = slashParts[1].trim();
+  if (alpha === "" || alpha.indexOf(" ") >= 0) return null;
+  return main.concat([alpha]);
+}
+function parseColourFunction(value) {
+  const match = COLOUR_FUNCTION.exec(value);
+  if (match === null) return null;
+  const fn = match[1];
+  const parts = splitColourComponents(match[2]);
+  if (parts === null) return null;
+  let alpha = 1;
+  if (parts.length === 4) {
+    const parsed = parseAlpha(parts[3]);
+    if (parsed === null) return null;
+    alpha = parsed;
+  }
+  if (fn === "rgb" || fn === "rgba") {
+    const r = parseRgbComponent(parts[0]);
+    const g = parseRgbComponent(parts[1]);
+    const b = parseRgbComponent(parts[2]);
+    if (r === null || g === null || b === null) return null;
+    return { r, g, b, a: alpha };
+  }
+  const h = parseHue(parts[0]);
+  const s = parsePercent(parts[1]);
+  const l = parsePercent(parts[2]);
+  if (h === null || s === null || l === null) return null;
+  return hslToRgb(h, clamp(s, 0, 1), clamp(l, 0, 1), alpha);
+}
+function parseHexColour(value) {
+  if (!COLOUR_HEX.test(value)) return null;
+  const digits = value.slice(1);
+  const short = digits.length === 3 || digits.length === 4;
+  const size = short ? 1 : 2;
+  const channel = function(index) {
+    const part = digits.slice(index * size, index * size + size);
+    return parseInt(short ? part + part : part, 16);
+  };
+  const hasAlpha = digits.length === 4 || digits.length === 8;
+  return {
+    r: channel(0),
+    g: channel(1),
+    b: channel(2),
+    a: hasAlpha ? channel(3) / 255 : 1
+  };
+}
+function parseColour(value) {
+  const hex = parseHexColour(value);
+  if (hex !== null) return hex;
+  const fn = parseColourFunction(value);
+  if (fn !== null) return fn;
+  const named = NAMED_COLOURS.get(value.toLowerCase());
+  return named === void 0 ? null : named;
+}
+function channelLuminance(component) {
+  const s = component / 255;
+  return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function relativeLuminance(colour) {
+  return 0.2126 * channelLuminance(colour.r) + 0.7152 * channelLuminance(colour.g) + 0.0722 * channelLuminance(colour.b);
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const light = la > lb ? la : lb;
+  const dark = la > lb ? lb : la;
+  return (light + 0.05) / (dark + 0.05);
+}
+function composite(fg, bg) {
+  if (fg.a >= 1) return fg;
+  return {
+    r: fg.r * fg.a + bg.r * (1 - fg.a),
+    g: fg.g * fg.a + bg.g * (1 - fg.a),
+    b: fg.b * fg.a + bg.b * (1 - fg.a),
+    a: 1
+  };
+}
+var MIN_THEME_CONTRAST_RATIO = 3;
+var DEFAULT_BACKDROPS = {
+  light: [
+    { r: 243, g: 250, b: 246, a: 1 },
+    // --paper
+    { r: 255, g: 255, b: 255, a: 1 }
+    // --surface (--white)
+  ],
+  dark: [
+    { r: 10, g: 22, b: 40, a: 1 },
+    // --background (--navy)
+    { r: 26, g: 40, b: 60, a: 1 }
+    // --surface (--navy-mid)
+  ]
+};
+var ACCENT_FOREGROUND = { r: 255, g: 255, b: 255, a: 1 };
+function backdropCandidates(accepted, forcedTheme) {
+  const schemes = forcedTheme === null ? ["light", "dark"] : [forcedTheme];
+  const bases = [];
+  for (let i = 0; i < schemes.length; i += 1) {
+    const scheme = DEFAULT_BACKDROPS[schemes[i]];
+    for (let j = 0; j < scheme.length; j += 1) bases.push(scheme[j]);
+  }
+  const supplied = [];
+  const names = ["surface", "background"];
+  for (let i = 0; i < names.length; i += 1) {
+    const raw = accepted[names[i]];
+    if (raw === void 0) continue;
+    const parsed = parseColour(raw);
+    if (parsed === null) continue;
+    supplied.push(parsed);
+  }
+  if (supplied.length === 0) return bases;
+  const out = [];
+  for (let i = 0; i < supplied.length; i += 1) {
+    const value = supplied[i];
+    if (value.a >= 1) {
+      out.push(value);
+      continue;
+    }
+    for (let j = 0; j < bases.length; j += 1) {
+      out.push(composite(value, bases[j]));
+    }
+  }
+  return out;
+}
+function enforceLegibilityFloor(accepted, rejections, forcedTheme) {
+  const backdrops = backdropCandidates(accepted, forcedTheme);
+  const text = accepted["text"];
+  if (text !== void 0) {
+    const parsed = parseColour(text);
+    let worst = Infinity;
+    if (parsed === null) worst = 0;
+    else {
+      for (let i = 0; i < backdrops.length; i += 1) {
+        const backdrop = backdrops[i];
+        const ratio = contrastRatio(composite(parsed, backdrop), backdrop);
+        if (ratio < worst) worst = ratio;
+      }
+    }
+    if (worst < MIN_THEME_CONTRAST_RATIO) {
+      delete accepted["text"];
+      rejections.push({ key: "text", code: "variable_contrast_too_low" });
+    }
+  }
+  const accent = accepted["accent"];
+  if (accent !== void 0) {
+    const parsed = parseColour(accent);
+    let worst = Infinity;
+    if (parsed === null) worst = 0;
+    else if (parsed.a >= 1) {
+      worst = contrastRatio(parsed, ACCENT_FOREGROUND);
+    } else {
+      for (let i = 0; i < backdrops.length; i += 1) {
+        const ratio = contrastRatio(
+          composite(parsed, backdrops[i]),
+          ACCENT_FOREGROUND
+        );
+        if (ratio < worst) worst = ratio;
+      }
+    }
+    if (worst < MIN_THEME_CONTRAST_RATIO) {
+      delete accepted["accent"];
+      rejections.push({ key: "accent", code: "variable_contrast_too_low" });
+    }
+  }
+}
+function matchesKind(kind, value) {
+  if (kind === "colour") return parseColour(value) !== null;
+  if (kind === "length") return LENGTH.test(value);
+  return FONT_FAMILY_LIST.test(value);
+}
+function classifyEntry(key, raw) {
+  const spec = VARIABLE_TARGETS.get(key);
+  if (spec === void 0) return { code: "unknown_variable", value: "" };
+  if (typeof raw !== "string")
+    return { code: "variable_not_a_string", value: "" };
+  if (raw.length > MAX_THEME_VARIABLE_VALUE_LENGTH)
+    return { code: "variable_value_too_long", value: "" };
+  if (spec.kind === "colour" && FOREGROUND_VARIABLES.has(key) && CONTENT_ERASING_COLOURS.has(raw.toLowerCase())) {
+    return { code: "variable_value_erases_content", value: "" };
+  }
+  if (!matchesKind(spec.kind, raw))
+    return { code: "variable_value_malformed", value: "" };
+  return { code: null, value: raw };
+}
+function resolveThemeVariables(raw, forcedTheme = null) {
+  const accepted = {};
+  const rejections = [];
+  if (raw === null || typeof raw !== "object" || Array.isArray(raw)) {
+    return { accepted: {}, declarations: {}, rejections: [] };
+  }
+  const entries = Object.keys(raw);
+  for (let i = 0; i < entries.length; i += 1) {
+    const key = entries[i];
+    if (i >= MAX_THEME_VARIABLE_ENTRIES) {
+      rejections.push({ key, code: "too_many_variables" });
+      break;
+    }
+    const outcome = classifyEntry(key, raw[key]);
+    if (outcome.code !== null) {
+      rejections.push({ key, code: outcome.code });
+      continue;
+    }
+    accepted[key] = outcome.value;
+  }
+  enforceLegibilityFloor(accepted, rejections, forcedTheme);
+  const declarations = {};
+  for (const name of CANOPY_THEME_VARIABLES) {
+    const value = accepted[name];
+    if (value === void 0) continue;
+    const targets = VARIABLE_TARGETS.get(name).targets;
+    for (let i = 0; i < targets.length; i += 1) {
+      declarations[targets[i]] = value;
+    }
+  }
+  return {
+    accepted,
+    declarations,
+    rejections
+  };
+}
+function normalizeForcedTheme(raw) {
+  if (raw === "light" || raw === "dark") return raw;
+  return null;
+}
+
 // src/loader.ts
-var LOADER_VERSION = "2";
+var LOADER_VERSION = "4";
 (function() {
   "use strict";
   if (typeof window === "undefined") return;
@@ -7,6 +448,7 @@ var LOADER_VERSION = "2";
   const DEFAULT_HANDSHAKE_TIMEOUT_MS = 2500;
   const DEFAULT_FALLBACK_LABEL = "Pay with Canopy";
   const POPUP_POLL_INTERVAL_MS = 500;
+  const INITIAL_FRAME_HEIGHT_PX = 420;
   const MESSAGE_SOURCE = "canopy";
   const PUBLISHABLE_KEY_PREFIX = "cnpy_pk_live_";
   function resolveOrigin() {
@@ -59,6 +501,15 @@ var LOADER_VERSION = "2";
   function buildCheckoutUrl(internal) {
     const url = new URL("/customer-pay", internal.origin);
     url.searchParams.set("merchant", internal.merchant);
+    if (internal.theme !== null) {
+      url.searchParams.set(THEME_PARAM, internal.theme);
+    }
+    for (let i = 0; i < CANOPY_THEME_VARIABLES.length; i += 1) {
+      const name = CANOPY_THEME_VARIABLES[i];
+      const value = internal.themeVariables[name];
+      if (value === void 0) continue;
+      url.searchParams.set(THEME_VARIABLE_PARAM_PREFIX + name, value);
+    }
     url.hash = "cap=" + encodeURIComponent(internal.capability || "");
     return url.toString();
   }
@@ -69,6 +520,15 @@ var LOADER_VERSION = "2";
     } catch {
     }
   }
+  function emitThemeRejections(internal, rejections) {
+    for (let i = 0; i < rejections.length; i += 1) {
+      const rejection = rejections[i];
+      emit(internal, "error", {
+        code: rejection.code,
+        variable: rejection.key
+      });
+    }
+  }
   function teardownFrame(internal) {
     if (internal.handshakeTimer) {
       clearTimeout(internal.handshakeTimer);
@@ -159,6 +619,9 @@ var LOADER_VERSION = "2";
     iframe.src = buildCheckoutUrl(internal);
     iframe.style.width = "100%";
     iframe.style.border = "none";
+    iframe.setAttribute("allow", "clipboard-write");
+    iframe.setAttribute("title", "Canopy checkout");
+    iframe.style.height = INITIAL_FRAME_HEIGHT_PX + "px";
     internal.node.appendChild(iframe);
     internal.frame = iframe;
     if (typeof ResizeObserver !== "undefined") {
@@ -238,6 +701,8 @@ var LOADER_VERSION = "2";
       }, destroy: function() {
       } };
     }
+    const forcedTheme = normalizeForcedTheme(opts.theme);
+    const themeVariables = resolveThemeVariables(opts.variables, forcedTheme);
     const node = typeof opts.target === "string" ? document.querySelector(opts.target) : opts.target;
     if (!node) {
       return { openNow: function() {
@@ -251,6 +716,8 @@ var LOADER_VERSION = "2";
       capability: opts.capability,
       merchant: opts.merchant,
       origin: originResolution.origin,
+      theme: forcedTheme,
+      themeVariables: themeVariables.accepted,
       surface: opts.surface || "popup",
       handshakeTimeoutMs: opts.handshakeTimeoutMs || DEFAULT_HANDSHAKE_TIMEOUT_MS,
       fallbackLabel: opts.fallbackLabel || DEFAULT_FALLBACK_LABEL,
@@ -271,6 +738,7 @@ var LOADER_VERSION = "2";
       handleMessage(internal, event);
     };
     window.addEventListener("message", internal.messageListener);
+    emitThemeRejections(internal, themeVariables.rejections);
     if (internal.surface === "iframe" || internal.surface === "auto") {
       createFrame(internal);
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canopypay/checkout-sdk",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -30,7 +30,7 @@
     "prepublishOnly": "npm --prefix ../.. run sdk:build && npm run build:npm"
   },
   "canopy": {
-    "loaderVersion": "2",
+    "loaderVersion": "4",
     "apiVersion": "2026-09-01"
   },
   "publishConfig": {