Payment transaction fee comparison

<div class="fee-compare"><div class="head"><b>PAYMENT FEES</b><strong id="scenario">$50 × 100</strong></div><div class="rows"><div class="fee-row"><span>Stripe</span><i id="fee-bar-0"></i><b id="fee-value-0">$0</b></div><div class="fee-row"><span>Lemon Squeezy</span><i id="fee-bar-1"></i><b id="fee-value-1">$0</b></div><div class="fee-row"><span>Paddle</span><i id="fee-bar-2"></i><b id="fee-value-2">$0</b></div></div><div class="controls"><label>ORDERS <input id="orders" type="range" min="0" max="1000" step="25" value="100"></label><label>ORDER USD <input id="price" type="range" min="10" max="100" step="10" value="50"></label></div><div class="caveat">US card basics; Stripe processing vs MoR scope differs</div><small>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</small></div>

.fee-compare{width:min(94vw,780px);height:min(88vh,325px);padding:clamp(8px,2.2vmin,17px);border:1px solid var(--line);border-radius:14px;background:var(--surface);font:600 clamp(12px,2.5vmin,17px)/1.2 var(--font-sans,system-ui);display:flex;flex-direction:column;gap:clamp(3px,1.1vmin,8px);overflow:hidden}.head,.fee-row{display:flex;align-items:center;justify-content:space-between;gap:6px}.head b{color:var(--accent);font-size:1.1em}.head strong{color:var(--accent-2);font:800 clamp(12px,3.5vmin,22px)/1 ui-monospace,monospace}.rows{flex:1;min-height:45px;display:flex;flex-direction:column;justify-content:space-around;gap:4px}.fee-row{height:clamp(19px,5vmin,35px)}.fee-row span{width:28%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fee-row i{display:block;height:70%;width:0;flex:none;max-width:40%;border-radius:3px;background:var(--accent);transition:width .35s}.fee-row:nth-child(2) i{background:var(--accent-2)}.fee-row:nth-child(3) i{background:var(--accent-3)}.fee-row b{width:25%;text-align:right;font:800 clamp(11px,2.7vmin,18px)/1 ui-monospace,monospace}.controls{display:flex;gap:7px}.controls label{flex:1;min-width:0;color:var(--muted);font-size:clamp(10px,2vmin,13px)}.controls input{display:block;width:100%;height:16px;accent-color:var(--accent)}.caveat,.fee-compare small{color:var(--muted);font-size:clamp(10px,2vmin,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

const orders=document.getElementById('orders'),price=document.getElementById('price');let index=0,timer;const samples=[[100,50],[250,20],[500,50],[1000,100]];function draw(n,p){orders.value=String(n);price.value=String(p);document.getElementById('scenario').textContent='$'+p+' × '+n.toLocaleString();const values=[n*(p*.029+.3),n*(p*.05+.5),n*(p*.05+.5)],largest=Math.max(1,...values);values.forEach((v,i)=>{document.getElementById('fee-value-'+i).textContent='$'+v.toLocaleString('en-US',{maximumFractionDigits:2});document.getElementById('fee-bar-'+i).style.width=Math.max(2,v/largest*40)+'%'})}draw(...samples[0]);timer=setInterval(()=>{index=(index+1)%samples.length;draw(...samples[index])},1100);for(const input of [orders,price])input.addEventListener('input',()=>{clearInterval(timer);draw(Number(orders.value),Number(price.value))})