rfpay-button.js

const RED_FANCY_PAY_URL = 'https://api.redfancy.org/api/widgets';
const DEFAULT_BTN_TEXT = 'Pay with';
const RED_FANCY_BUTTON_COLOR = '#FB3747';
const RED_FANCY_BUTTON_LOGO = `<svg width="72" height="32" viewBox="0 0 72 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="72" height="32" rx="16" fill="#FAFAFA"/>
<path d="M19.0001 24.9688L8 14.2187L14.4376 16.7187L19.0001 24.9688Z" fill="url(#paint0_linear_19006_23058)"/>
<path d="M18.9999 24.9688L30 14.2187L23.5624 16.7187L18.9999 24.9688Z" fill="url(#paint1_linear_19006_23058)"/>
<path d="M14.4375 16.7186L19 24.9687L23.5626 16.7186H14.4375Z" fill="url(#paint2_linear_19006_23058)"/>
<path d="M12.375 8.40613L8 14.2187L14.4376 16.7187L12.375 8.40613Z" fill="url(#paint3_linear_19006_23058)"/>
<path d="M25.625 8.40619L30 14.2188L23.5624 16.7188L25.625 8.40619Z" fill="url(#paint4_linear_19006_23058)"/>
<path d="M19 11.5938L23.5626 16.7188H14.4375L19 11.5938Z" fill="url(#paint5_linear_19006_23058)"/>
<path d="M25.628 8.40619L19.0029 11.5937L23.5655 16.7188L25.628 8.40619Z" fill="url(#paint6_linear_19006_23058)"/>
<path d="M12.3779 8.40619L19.0029 11.5937L14.4404 16.7188L12.3779 8.40619Z" fill="url(#paint7_linear_19006_23058)"/>
<path d="M33.343 22V9.981H37.865C38.7717 9.981 39.5537 10.1227 40.211 10.406C40.8797 10.678 41.3953 11.1143 41.758 11.715C42.132 12.3157 42.319 13.1033 42.319 14.078C42.319 15.0073 42.115 15.7837 41.707 16.407C41.299 17.0303 40.7437 17.5007 40.041 17.818C39.3383 18.124 38.5337 18.277 37.627 18.277H35.468V22H33.343ZM35.468 16.373H37.593C38.375 16.373 39.004 16.186 39.48 15.812C39.956 15.438 40.194 14.8487 40.194 14.044C40.194 13.3413 39.9957 12.8143 39.599 12.463C39.2023 12.1003 38.5903 11.919 37.763 11.919H35.468V16.373ZM41.8051 22L46.4121 9.981H48.9451L53.5351 22H51.2401L50.4411 19.773H44.8991L44.0831 22H41.8051ZM45.5791 17.852H49.7441L47.6701 12.123L45.5791 17.852ZM56.7936 22V17.512L52.3906 9.981H54.8556L57.8816 15.489L60.9076 9.981H63.3216L58.9186 17.495V22H56.7936Z" fill="#09090B"/>
<defs>
<linearGradient id="paint0_linear_19006_23058" x1="7.59375" y1="16.25" x2="19.2669" y2="21.5752" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFA0AA"/>
<stop offset="0.830213" stop-color="#FF3145"/>
</linearGradient>
<linearGradient id="paint1_linear_19006_23058" x1="30.4063" y1="16.25" x2="18.7331" y2="21.5752" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFA0AA"/>
<stop offset="0.830213" stop-color="#FF3145"/>
</linearGradient>
<linearGradient id="paint2_linear_19006_23058" x1="19.1563" y1="31.5625" x2="19.1563" y2="13.5936" gradientUnits="userSpaceOnUse">
<stop offset="0.0211318" stop-color="#FF3145"/>
<stop offset="1" stop-color="#FFA0AA"/>
</linearGradient>
<linearGradient id="paint3_linear_19006_23058" x1="14.4376" y1="16.7187" x2="1.96458" y2="10.1434" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFA0AA"/>
<stop offset="0.578669" stop-color="#FF3145"/>
</linearGradient>
<linearGradient id="paint4_linear_19006_23058" x1="23.5624" y1="16.7188" x2="36.0354" y2="10.1435" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFA0AA"/>
<stop offset="0.578669" stop-color="#FF3145"/>
</linearGradient>
<linearGradient id="paint5_linear_19006_23058" x1="19" y1="18.8751" x2="19" y2="10.7812" gradientUnits="userSpaceOnUse">
<stop offset="0.0211318" stop-color="#FF3145"/>
<stop offset="1" stop-color="#FFA0AA"/>
</linearGradient>
<linearGradient id="paint6_linear_19006_23058" x1="33.5656" y1="14.2188" x2="20.1592" y2="5.09365" gradientUnits="userSpaceOnUse">
<stop offset="0.511431" stop-color="#FF3145"/>
<stop offset="1" stop-color="#FFA0AA"/>
</linearGradient>
<linearGradient id="paint7_linear_19006_23058" x1="4.44027" y1="14.2188" x2="17.8467" y2="5.09365" gradientUnits="userSpaceOnUse">
<stop offset="0.511431" stop-color="#FF3145"/>
<stop offset="1" stop-color="#FFA0AA"/>
</linearGradient>
</defs>
</svg>
`;

export async function fpsFetch(url, {method = 'GET', headers = {}, body, timeout = 15000} = {}) {
    const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
    const timer = controller ? setTimeout(() => controller.abort(), timeout) : null;

    try {
        const res = await fetch(url, {
            method, headers, body, signal: controller?.signal, credentials: 'same-origin'
        });
        if (timer) clearTimeout(timer);

        const ct = res.headers?.get?.('content-type') || '';
        const data = ct.includes('json') ? await res.json() : await res.text();
        if (!res.ok) throw {status: res.status, data};
        return {status: res.status, data};
    } catch (err) {
        if (timer) clearTimeout(timer);
        if (err?.name === 'AbortError') {
            throw {status: 'timeout', error: new Error('Request timed out')};
        }
        if (err instanceof TypeError) {
            throw {status: 'network', error: err};
        }
        throw err;
    }
}

export function fpsRedirect(amount, widgetId) {
    if (amount == null || amount === '') throw new Error('amount is required');
    if (!widgetId) throw new Error('widgetId is required');

    const url = `${RED_FANCY_PAY_URL}?widgetId=${encodeURIComponent(widgetId)}` + `&amount=${encodeURIComponent(amount)}`;

    window.location.href = url;
}

if (typeof window !== 'undefined') {
    window.FPSPay = window.FPSPay || {};
    window.FPSPay.fetch = (u, o) => fpsFetch(u, o);
    window.FPSPay.redirect = (a, w) => fpsRedirect(a, w);
}

class RFPayElement extends HTMLElement {
    static get observedAttributes() {
        return ['amount', 'widget-id', 'disabled', 'text', 'fullwidth'];
    }

    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this._onHostClick = this._onHostClick.bind(this);
        this._onHostKey = this._onHostKey.bind(this);
        this._render();
    }

    attributeChangedCallback() {
        this._render();
    }

    connectedCallback() {
        this._bindHost();
    }

    disconnectedCallback() {
        this._unbindHost();
    }

    get amount() {
        return this.getAttribute('amount');
    }

    set amount(v) {
        v == null ? this.removeAttribute('amount') : this.setAttribute('amount', String(v));
    }

    get widgetId() {
        return this.getAttribute('widget-id');
    }

    set widgetId(v) {
        v == null ? this.removeAttribute('widget-id') : this.setAttribute('widget-id', String(v));
    }

    get disabled() {
        return this.hasAttribute('disabled');
    }

    set disabled(v) {
        v ? this.setAttribute('disabled', '') : this.removeAttribute('disabled');
    }

    get text() {
        return this.getAttribute('text') || DEFAULT_BTN_TEXT;
    }

    set text(v) {
        v == null ? this.removeAttribute('text') : this.setAttribute('text', String(v));
    }

    get fullwidth() {
        return this.hasAttribute('fullwidth');
    }

    set fullwidth(v) {
        v ? this.setAttribute('fullwidth', '') : this.removeAttribute('fullwidth');
    }

    _render() {
        const disabled = this.disabled ? 'true' : 'false';

        this.setAttribute('role', 'button');
        if (!this.hasAttribute('tabindex')) this.tabIndex = 0;

        this.shadowRoot.innerHTML = `
      <style>
     :host {
          display: block;
          width: 100%;
          outline: none;
          -webkit-tap-highlight-color: transparent;
        }

:host([fullwidth]) {
    display: block;
    width: 100%;
}

:host([fullwidth]) .btn {
    width: 100%;
    max-width: 100%;
}

.btn {
    box-sizing: border-box;
    width: 100%;               /* fill host by default */
    min-width: max-content;    /* hug по контенту */
    max-width: 100%;    /* prevent expanding past container */
    height: 48px;
    min-height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 16px;           /* горизонтальные отступы */
  border-radius: 12px;
  background: ${RED_FANCY_BUTTON_COLOR};
  color: #fff;

  font-family: "Onest", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
  user-select: none;
}

.btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
}

.logo svg {
  height: 32px;
  width: auto;
  display: block;
}

      </style>

      <div class="btn" aria-disabled="${disabled}">
        <span class="label">${this._escapeHtml(this.text)}</span>
        <span class="logo">${RED_FANCY_BUTTON_LOGO}</span>
      </div>
    `;
    }

    _escapeHtml(str) {
        return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    _bindHost() {
        this._unbindHost();
        this.addEventListener('click', this._onHostClick);
        this.addEventListener('keydown', this._onHostKey);
    }

    _unbindHost() {
        this.removeEventListener('click', this._onHostClick);
        this.removeEventListener('keydown', this._onHostKey);
    }

    _onHostClick(e) {
        if (this.disabled) return;
        if (e.button !== undefined && e.button !== 0) return;
        e.preventDefault();
        fpsRedirect(this.amount, this.widgetId);
    }

    _onHostKey(e) {
        if (this.disabled) return;
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            fpsRedirect(this.amount, this.widgetId);
        }
    }
}

export function defineFPSPay() {
    if (typeof window !== 'undefined' && !customElements.get('rfpay-button')) {
        customElements.define('rfpay-button', RFPayElement);
    }
}

if (typeof window !== 'undefined') defineFPSPay();