MediaWiki:CommonPayPal.js

/* MediaWiki:CommonPayPal.js */
(function () {
  'use strict';

  // === CONFIG ===
  // Client ID PUBLIC (ok metterlo qui)
  var PAYPAL_CLIENT_ID = 'Abm0N3btfDpPMXhhmfWJYVdOhNbfRBiCBp5x5FUEWUdvXUI6yKAtuEjodfPjQfvxNl0Ax0e3ukzzNBXT';

  // Carica PayPal SDK UNA SOLA VOLTA
  var sdkPromise = null;

  function loadPayPalSdk() {
    if (sdkPromise) return sdkPromise;

    sdkPromise = new Promise(function (resolve, reject) {
      // Se già presente, fine
      if (window.paypal && window.paypal.Buttons) {
        resolve();
        return;
      }

      // Evita doppioni
      var existing = document.querySelector('script[data-mp-paypal-sdk="1"]');
      if (existing) {
        existing.addEventListener('load', function () { resolve(); });
        existing.addEventListener('error', function () { reject(new Error('PayPal SDK load error')); });
        return;
      }

      var s = document.createElement('script');
      s.setAttribute('data-mp-paypal-sdk', '1');
      s.src =
        'https://www.paypal.com/sdk/js' +
        '?client-id=' + encodeURIComponent(PAYPAL_CLIENT_ID) +
        '&vault=true&intent=subscription';
      s.async = true;

      s.onload = function () { resolve(); };
      s.onerror = function () { reject(new Error('PayPal SDK load error')); };

      document.head.appendChild(s);
    });

    return sdkPromise;
  }

  // API pubblica: renderPayPalSubscription(selector, planId)
  window.renderPayPalSubscription = function (selector, planId, options) {
    options = options || {};

    var el = document.querySelector(selector);
    if (!el) return;

    // Evita doppio render sullo stesso contenitore
    if (el.getAttribute('data-paypal-rendered') === '1') return;
    el.setAttribute('data-paypal-rendered', '1');

    // Stile default (puoi cambiare dopo)
    var style = options.style || {
      shape: 'pill',
      color: 'gold',
      layout: 'vertical',
      label: 'subscribe'
    };

    loadPayPalSdk()
      .then(function () {
        if (!window.paypal || !window.paypal.Buttons) {
          throw new Error('PayPal Buttons not available');
        }

        window.paypal.Buttons({
          style: style,

          createSubscription: function (data, actions) {
            return actions.subscription.create({
              plan_id: planId
            });
          },

          onApprove: function (data) {
            // Niente alert (più pulito): messaggio sotto al bottone
            var msg = document.createElement('div');
            msg.style.marginTop = '8px';
            msg.style.fontSize = '12px';
            msg.style.textAlign = 'center';
            msg.textContent = 'Subscription activated. Thank you!';
            el.appendChild(msg);

            // Se vuoi in futuro: invio a pagina "grazie" o log server.
            // window.location.href = '/wiki/Thank_you';
          },

          onError: function (err) {
            console.error('PayPal error:', err);
            el.innerHTML = '<div style="font-size:12px;text-align:center;color:#b00020;">PayPal button error. Check console.</div>';
          }
        }).render(selector);
      })
      .catch(function (e) {
        console.error('PayPal SDK error:', e);
        el.innerHTML = '<div style="font-size:12px;text-align:center;color:#b00020;">PayPal SDK failed to load.</div>';
      });
  };

  // Auto-render: se trovi div con data-paypal-plan, lo renderizzi senza script inline
  function autoRenderAll() {
    var nodes = document.querySelectorAll('[data-paypal-plan]');
    nodes.forEach(function (node) {
      var plan = node.getAttribute('data-paypal-plan');
      if (!plan) return;

      // Se non ha id, glielo diamo
      if (!node.id) {
        node.id = 'paypal_' + Math.random().toString(36).slice(2);
      }
      window.renderPayPalSubscription('#' + node.id, plan);
    });
  }

  // Quando la pagina è pronta
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', autoRenderAll);
  } else {
    autoRenderAll();
  }
})();