turnstile

payment-button.js (6508B)

---

 /**
  * @file payment-button.js
  * @brief Paivana-style paywall client for the GNU Taler Turnstile module.
  *
  * Generates a fresh "paivana_id" client-side, builds a
  * taler://pay-template/... URI from the merchant backend + template
  * advertised on the page, long-polls the merchant's session endpoint,
  * and then asks the Drupal site to mint an access cookie once payment
  * was observed.
  *
  * @license LGPLv3+
  */
 
 (function ($, Drupal, once) {
   'use strict';
 
   function waitMs(ms) {
     return new Promise(function (resolve) { setTimeout(resolve, ms); });
   }
 
   function toBase64Url(bytes) {
     var binary = '';
     for (var i = 0; i < bytes.length; i++) {
       binary += String.fromCharCode(bytes[i]);
     }
     return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
   }
 
   function sha256b64(str) {
     return crypto.subtle.digest('SHA-256', new TextEncoder().encode(str))
       .then(function (buf) { return toBase64Url(new Uint8Array(buf)); });
   }
 
   function makePaivanaId(curTime, nonce, website) {
     return sha256b64(nonce + website + String(curTime)).then(function (hash) {
       return curTime + '-' + hash;
     });
   }
 
   function buildTalerUri(paivanaUri, paivanaId, fulfillmentUrl) {
     var sep = paivanaUri.indexOf('?') === -1 ? '?' : '&';
     return paivanaUri + sep
          + 'session_id=' + encodeURIComponent(paivanaId)
          + '&fulfillment_url=' + encodeURIComponent(fulfillmentUrl);
   }
 
   function setStatus($container, msg) {
     $container.find('.taler-turnstile-status-message').text(msg);
   }
 
   function startFlow(container) {
     var $container = $(container);
     var merchantBackend = $container.data('merchant-backend');
     var templateId = $container.data('template-id');
     var fulfillmentUrl = $container.data('fulfillment-url');
     var confirmUrl = $container.data('confirm-url');
     var paivanaUri = $container.data('paivana-uri');
     var maxPickupDelay = parseInt($container.data('max-pickup-delay'), 10) || 86400;
     if (!merchantBackend || !templateId || !confirmUrl || !paivanaUri) {
       console.error('[turnstile] required data attributes missing on payment container', $container[0]);
       return;
     }
     // Cap the pickup window so we don't overflow time math, but
     // otherwise honor what the server template advertised.
     var pickup = Math.min(maxPickupDelay, 60 * 60 * 24 * 365 * 100);
     var curTime = Math.floor(Date.now() / 1000) + pickup;
     var nonceArr = new Uint8Array(32);
     crypto.getRandomValues(nonceArr);
     var nonce = Array.from(nonceArr)
       .map(function (b) { return b.toString(16).padStart(2, '0'); })
       .join('');
 
     makePaivanaId(curTime, nonce, fulfillmentUrl).then(function (paivanaId) {
       var talerUri = buildTalerUri(paivanaUri, paivanaId, fulfillmentUrl);
 
       // QR + click-through link.
       var $qr = $container.find('.taler-turnstile-qr-code-container').first();
       $qr.empty();
       if (typeof QRCode !== 'undefined') {
         new QRCode($qr[0], {
           text: talerUri,
           width: 200,
           height: 200,
           colorDark: '#000000',
           colorLight: '#ffffff',
           correctLevel: QRCode.CorrectLevel.M
         });
       }
       $container.find('.taler-turnstile-pay-button').attr('href', talerUri);
 
       pollSession({
         $container: $container,
         merchantBackend: merchantBackend,
         paivanaId: paivanaId,
         nonce: nonce,
         curTime: curTime,
         fulfillmentUrl: fulfillmentUrl,
         confirmUrl: confirmUrl
       });
     }).catch(function (e) {
       console.error('[turnstile] failed to compute paivana id:', e);
       setStatus($container, Drupal.t('Could not initialize payment.'));
     });
   }
 
   function pollSession(ctx) {
     var pollUrl = ctx.merchantBackend.replace(/\/$/, '')
                 + '/sessions/' + encodeURIComponent(ctx.paivanaId)
                 + '?timeout_ms=30000'
                 + '&fulfillment_url=' + encodeURIComponent(ctx.fulfillmentUrl);
     var start = performance.now();
     fetch(pollUrl, { cache: 'no-store' })
       .then(function (res) {
         if (res.status === 200) {
           return res.json().then(function (j) {
             return confirmPayment(ctx, j.order_id);
           });
         }
         // 202 = unpaid (long poll returned), 404 = no order yet,
         // anything else is treated as transient.
         var rem = 30000 - (performance.now() - start);
         if (rem < 0) rem = 0;
         return waitMs(rem).then(function () { pollSession(ctx); });
       })
       .catch(function (e) {
         console.warn('[turnstile] poll error:', e);
         setStatus(ctx.$container, Drupal.t('Network error. Retrying...'));
         waitMs(5000).then(function () { pollSession(ctx); });
       });
   }
 
   function confirmPayment(ctx, orderId) {
     setStatus(ctx.$container, Drupal.t('Payment confirmed! Loading page...'));
     return fetch(ctx.confirmUrl, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       credentials: 'same-origin',
       body: JSON.stringify({
         order_id: orderId,
         nonce: ctx.nonce,
         cur_time: ctx.curTime,
         website: ctx.fulfillmentUrl
       })
     }).then(function (res) {
       // Server responds 303 with the cookie + Location; fetch follows
       // redirects transparently, so res.url is the final destination.
       var dest = (res.redirected && res.url) ? res.url : ctx.fulfillmentUrl;
       window.location.href = dest;
     }).catch(function (e) {
       console.warn('[turnstile] confirm error:', e);
       setStatus(ctx.$container, Drupal.t('Could not reach the server.'));
     });
   }
 
   Drupal.behaviors.talerTurnstilePaymentButton = {
     attach: function (context, settings) {
       // Detect taler:// support exactly once.
       once('taler-support', 'html').forEach(function () {
         window.talerCallback = function (res) {
           if (res && res.present) {
             $('.show-if-taler-supported').removeClass('hidden');
           } else {
             $('.show-if-taler-supported').addClass('hidden');
           }
         };
         var meta = document.createElement('meta');
         meta.name = 'taler-support';
         meta.content = 'api,callback';
         document.getElementsByTagName('head')[0].appendChild(meta);
       });
       var containers = once('taler-turnstile-payment-init', '.taler-turnstile-payment-container', context);
       containers.forEach(function (c) { startFlow(c); });
     }
   };
 
 })(jQuery, Drupal, once);