https://arcpay.finance/embed.js

1/*! ArcPay Embed SDK v0.1 — https://arcpay.finance/embed.js
2 * Usage:
3 *   <script src="https://arcpay.finance/embed.js" defer></script>
4 *   <div data-arcpay="tip" data-user="gavin" data-theme="dark" data-amount="0.05"></div>
5 *
6 * Button mode:
7 *   <button data-arcpay-button data-user="gavin">Tip me</button>
8 */
9(function () {
10  'use strict';
11  var BASE = 'https://arcpay.finance';
12
13  function qs(params) {
14    return Object.keys(params)
15      .filter(function (k) { return params[k]; })
16      .map(function (k) { return encodeURIComponent(k) + '=' + encodeURIComponent(params[k]); })
17      .join('&');
18  }
19
20  function renderInline(el) {
21    var user = el.getAttribute('data-user');
22    if (!user) return;
23    var theme = el.getAttribute('data-theme') || '';
24    var amount = el.getAttribute('data-amount') || '';
25    var query = qs({ theme: theme, amount: amount });
26    var src = BASE + '/embed/tip/' + encodeURIComponent(user) + (query ? '?' + query : '');
27    var iframe = document.createElement('iframe');
28    iframe.src = src;
29    iframe.style.border = '0';
30    iframe.style.width = '100%';
31    iframe.style.maxWidth = '420px';
32    iframe.style.height = '320px';
33    iframe.style.display = 'block';
34    iframe.setAttribute('title', 'ArcPay · Tip @' + user);
35    iframe.setAttribute('loading', 'lazy');
36    iframe.setAttribute('allowtransparency', 'true');
37    el.innerHTML = '';
38    el.appendChild(iframe);
39  }
40
41  function openModal(user, theme, amount) {
42    var overlay = document.createElement('div');
43    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2147483647;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);';
44
45    var wrapper = document.createElement('div');
46    wrapper.style.cssText = 'position:relative;max-width:440px;width:92%;';
47
48    var iframe = document.createElement('iframe');
49    iframe.src = BASE + '/embed/tip/' + encodeURIComponent(user) + (qs({ theme: theme, amount: amount }) ? '?' + qs({ theme: theme, amount: amount }) : '');
50    iframe.style.cssText = 'width:100%;height:380px;border:0;border-radius:16px;background:white;';
51    iframe.setAttribute('title', 'ArcPay · Tip @' + user);
52
53    var close = document.createElement('button');
54    close.innerHTML = '✕';
55    close.style.cssText = 'position:absolute;top:-36px;right:0;width:28px;height:28px;border-radius:14px;border:0;background:white;cursor:pointer;font-size:14px;line-height:1;';
56    close.setAttribute('aria-label', 'Close');
57
58    function dismiss() { document.body.removeChild(overlay); }
59    close.addEventListener('click', dismiss);
60    overlay.addEventListener('click', function (e) { if (e.target === overlay) dismiss(); });
61    document.addEventListener('keydown', function esc(e) {
62      if (e.key === 'Escape') { dismiss(); document.removeEventListener('keydown', esc); }
63    });
64
65    wrapper.appendChild(iframe);
66    wrapper.appendChild(close);
67    overlay.appendChild(wrapper);
68    document.body.appendChild(overlay);
69  }
70
71  function wireButtons() {
72    var btns = document.querySelectorAll('[data-arcpay-button]');
73    btns.forEach(function (b) {
74      if (b.__arcpayWired) return;
75      b.__arcpayWired = true;
76      b.addEventListener('click', function (e) {
77        e.preventDefault();
78        var user = b.getAttribute('data-user');
79        if (!user) return;
80        openModal(user, b.getAttribute('data-theme') || '', b.getAttribute('data-amount') || '');
81      });
82    });
83  }
84
85  function renderAll() {
86    document.querySelectorAll('[data-arcpay="tip"]').forEach(renderInline);
87    wireButtons();
88  }
89
90  // Expose small programmatic API
91  window.ArcPay = {
92    open: openModal,
93    render: renderAll,
94  };
95
96  if (document.readyState === 'loading') {
97    document.addEventListener('DOMContentLoaded', renderAll);
98  } else {
99    renderAll();
100  }
101})();