ucashpay-button.js

/*
 * ucashpay-button.js
 *
 * Drop-in snippet for Teachable's "Code Snippets" feature
 * (Settings -> Code Snippets), or any page where you can inject HTML/JS.
 *
 * Renders a "Pay with U.CASH" button next to an external offer price and
 * opens the U.CASH hosted checkout (embed.php) in a new tab on click.
 *
 * Non-custodial: the Store Cloud Token is publishable (safe to expose in the
 * browser). U.CASH never holds funds; payments settle directly to the receive
 * addresses you configure in your pay.u.cash store.
 *
 * ----------------------------------------------------------------------
 * Contract used (client-side hosted pay link):
 *   GET https://pay.u.cash/embed.php?cloud=<CLOUD>&amount=<AMOUNT>&currency=<CCY>
 *       &title=<TITLE>&external_reference=<REF>&redirect=<REDIRECT>
 * ----------------------------------------------------------------------
 */

(function () {
  'use strict';

  // Optional global config: set window.UCASHPAY_CONFIG once before this script
  // loads, or rely on data-* attributes on each button (recommended).
  var GLOBAL_CONFIG = (typeof window !== 'undefined' && window.UCASHPAY_CONFIG) || {};

  var PAY_BASE = 'https://pay.u.cash/embed.php';

  function safe(value, fallback) {
    var v = (value === null || value === undefined) ? '' : String(value).trim();
    return v === '' ? (fallback || '') : v;
  }

  function buildPayUrl(opts) {
    var params = {
      cloud: safe(opts.cloud),
      amount: safe(opts.amount),
      currency: safe(opts.currency, 'USD'),
      title: safe(opts.title, 'Pay with U.CASH'),
      external_reference: safe(opts.external_reference, ''),
      redirect: safe(opts.redirect, window.location ? window.location.href : '')
    };

    if (!params.cloud) {
      throw new Error('[U.CASH] Missing required "cloud" (Store Cloud Token).');
    }
    if (!params.amount || isNaN(Number(params.amount)) || Number(params.amount) <= 0) {
      throw new Error('[U.CASH] Missing or invalid "amount".');
    }

    var qs = [];
    for (var k in params) {
      if (params.hasOwnProperty(k) && params[k] !== '') {
        qs.push(encodeURIComponent(k) + '=' + encodeURIComponent(params[k]));
      }
    }
    return PAY_BASE + '?' + qs.join('&');
  }

  function resolveOptions(button) {
    // data-* attributes win, then per-element config, then global config.
    var ds = button.dataset || {};
    return {
      cloud: safe(ds.cloud, GLOBAL_CONFIG.cloud),
      amount: safe(ds.amount, GLOBAL_CONFIG.amount),
      currency: safe(ds.currency, GLOBAL_CONFIG.currency),
      title: safe(ds.title, GLOBAL_CONFIG.title),
      external_reference: safe(ds.externalReference || ds.externalreference, GLOBAL_CONFIG.externalReference),
      redirect: safe(ds.redirect, GLOBAL_CONFIG.redirect)
    };
  }

  function applyButtonStyle(button, label) {
    button.type = 'button';
    button.innerHTML = '';
    var span = document.createElement('span');
    span.textContent = label || 'Pay with U.CASH';
    button.appendChild(span);
    button.style.display = 'inline-flex';
    button.style.alignItems = 'center';
    button.style.justifyContent = 'center';
    button.style.gap = '6px';
    button.style.padding = '12px 22px';
    button.style.fontSize = '15px';
    button.style.fontWeight = '600';
    button.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
    button.style.color = '#ffffff';
    button.style.background = 'linear-gradient(135deg, #0a0a0a 0%, #2b2b2b 100%)';
    button.style.border = '1px solid #1a1a1a';
    button.style.borderRadius = '8px';
    button.style.cursor = 'pointer';
    button.style.textDecoration = 'none';
    button.style.lineHeight = '1';
    button.style.boxShadow = '0 1px 2px rgba(0,0,0,0.08)';
    button.style.transition = 'transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease';
  }

  function attach(button) {
    if (button.__ucashpayBound) return;
    button.__ucashpayBound = true;

    var opts = resolveOptions(button);

    applyButtonStyle(button, opts.title);

    button.addEventListener('mouseenter', function () {
      button.style.transform = 'translateY(-1px)';
      button.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    });
    button.addEventListener('mouseleave', function () {
      button.style.transform = '';
      button.style.boxShadow = '0 1px 2px rgba(0,0,0,0.08)';
    });

    button.addEventListener('click', function (e) {
      e.preventDefault();
      try {
        var url = buildPayUrl(opts);
        window.open(url, '_blank', 'noopener,noreferrer');
      } catch (err) {
        // Surface configuration errors so merchants can see what is wrong.
        console.error(err.message);
        if (button.reportValidity) {
          button.setCustomValidity && button.setCustomValidity(err.message);
        }
      }
    });
  }

  function init(scope) {
    var root = scope || document;
    // Primary: declarative buttons.
    var buttons = root.querySelectorAll('[data-ucashpay]');
    buttons.forEach(function (b) { attach(b); });

    // Convenience: render a button into a placeholder container.
    var slots = root.querySelectorAll('[data-ucashpay-slot]');
    slots.forEach(function (slot) {
      if (slot.querySelector('[data-ucashpay]')) return;
      var btn = document.createElement('button');
      btn.setAttribute('data-ucashpay', '');
      for (var i = 0; i < slot.attributes.length; i++) {
        var attr = slot.attributes[i];
        if (attr.name.indexOf('data-') === 0 && attr.name !== 'data-ucashpay-slot') {
          btn.setAttribute(attr.name, attr.value);
        }
      }
      attach(btn);
      slot.appendChild(btn);
    });
  }

  function onReady(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else {
      fn();
    }
  }

  // Auto-init on load.
  onReady(function () { init(document); });

  // Expose a tiny API for dynamic rendering (e.g. after a SPA route change).
  window.UCASHPAY = {
    init: init,
    buildPayUrl: buildPayUrl,
    render: function (target, opts) {
      var btn = target instanceof HTMLElement
        ? target
        : document.querySelector(target);
      if (!btn) return;
      if (opts) {
        for (var k in opts) {
          if (opts.hasOwnProperty(k)) {
            var attr = ({
              externalReference: 'data-external-reference'
            })[k] || ('data-' + k.replace(/([A-Z])/g, '-$1').toLowerCase());
            btn.setAttribute(attr, opts[k]);
          }
        }
      }
      btn.setAttribute('data-ucashpay', '');
      attach(btn);
      return btn;
    }
  };
})();