paivana

HTTP paywall reverse proxy
Log | Files | Refs | Submodules | README | LICENSE
commit b29730ee3730d02e6c7fbdab65e3baf914eca850
parent df4c80e3f215cc0793552b733e3e6670f2024f2e
Author: Florian Dold <dold@taler.net>
Date:   Mon, 22 Jun 2026 14:18:12 +0200

put frontend under src/frontend and refactor

There were various type errors in the JavaScript of the mustache file.
We now template the mustache template with jinja2 a compile time.

The JavaScript lives in a separate file that can by typechecked via
TypeScript.

Introducing jinja2 is also a first step towards proper i18n of the
frontend. Future versions should just have a paywall.must.j2, and the
language-specific versions will be generated from that.

Diffstat:

M.gitignore | 2++


MREADME | 2+-


Mcontrib/meson.build | 5+----


Dcontrib/paywall.en.must | 652-------------------------------------------------------------------------------


Asrc/frontend/generate-paywall.py | 43+++++++++++++++++++++++++++++++++++++++++++


Asrc/frontend/global.d.ts | 44++++++++++++++++++++++++++++++++++++++++++++


Asrc/frontend/meson.build | 14++++++++++++++


Asrc/frontend/paywall.en.must.j2 | 465+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


Asrc/frontend/paywall.js | 252+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


Asrc/frontend/typecheck.sh | 11+++++++++++


Msrc/meson.build | 1+


11 files changed, 834 insertions(+), 657 deletions(-)

diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,5 @@ libtool
 paivana_config.h
 stamp-h1
 Makefile.in
+contrib/paywall.en.must
+build/
diff --git a/README b/README
@@ -155,7 +155,7 @@ Source layout
       paivana_pd.c              GNUnet project-data descriptor
     src/include/platform.h  GNUnet-style platform header (include first)
     src/tests/              Automated reverse-proxy tests
-    contrib/paywall.en.must Default Mustache paywall template
+    contrib/paywall.en.must.j2 Default Mustache paywall template source (Jinja2)
     doc/prebuilt/           Git submodule: taler-docs (man pages)
 
 
diff --git a/contrib/meson.build b/contrib/meson.build
@@ -1,4 +1 @@
-install_data(
-    'paywall.en.must',
-    install_dir: get_option('datadir') / 'paivana' / 'templates',
-)
+# Nothing to be done for contrib yet.
diff --git a/contrib/paywall.en.must b/contrib/paywall.en.must
@@ -1,652 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Payment Required</title>
-    <meta http-equiv="content-type" content="text/html;CHARSET=utf-8" />
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="taler-support" content="uri" />
-    <script>
-      const QR_WIDTH = 300;
-      const QR_HEIGHT = 300;
-      const I18N_PAYMENT_CONFIRMED_LOADING = 'Payment confirmed! Loading page...';
-      const I18N_PAYMENT_CONFIRMED_PROBLEM = 'Payment confirmed, but something went wrong when we tried to obtain the access token. This is a bug, please contact the operator if the issue persists.';
-      const I18N_PAYMENT_CONFIRMED_ERROR = 'Could not reach the server!';
-      const I18N_PAYMENT_CONFIRMED_NO_ORDER = 'Unexpected 200 OK response without an order_id. Trying again.';
-      const I18N_PAYMENT_NETWORK_PROBLEM = 'Network error! Retrying...';
-      const MERCHANT_BACKEND = '{{ merchant_backend }}';
-      const MERCHANT_TEMPLATE_ID = '{{ template_id }}';
-      const MAX_PICKUP_DELAY = {{ max_pickup_delay }}; // in seconds
-      const TEMPLATE_SUMMARY = '{{ summary }}';
-      const TEMPLATE_CHOICES = '{{{ choices }}}';
-      const POLL_WAIT_MS = 30000;
-    </script>
-    <script>
-      const encTable = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
-      function encodeCrock(data) {
-        const dataBytes = new Uint8Array(data);
-        let sb = "";
-        const size = data.byteLength;
-        let bitBuf = 0;
-        let numBits = 0;
-        let pos = 0;
-        while (pos < size || numBits > 0) {
-          if (pos < size && numBits < 5) {
-            const d = dataBytes[pos++];
-            bitBuf = (bitBuf << 8) | d;
-            numBits += 8;
-          }
-          if (numBits < 5) {
-            bitBuf = bitBuf << (5 - numBits);
-            numBits = 5;
-          }
-          const v = (bitBuf >>> (numBits - 5)) & 31;
-          sb += encTable[v];
-          numBits -= 5;
-        }
-        return sb;
-      }
-      function timestampRoundedToBuffer(sec) {
-        const b = new ArrayBuffer(8);
-        const v = new DataView(b);
-        const numVal = BigInt(sec) * 1000n * 1000n;
-        // The buffer we sign over represents the timestamp in microseconds.
-        if (typeof v.setBigUint64 !== "undefined") {
-          v.setBigUint64(0, numVal);
-        } else {
-          const s = bigint(sec).multiply(1000 * 1000);
-          const arr = s.toArray(2 ** 8).value;
-          let offset = 8 - arr.length;
-          for (let i = 0; i < arr.length; i++) {
-            v.setUint8(offset++, arr[i]);
-          }
-        }
-        return new Uint8Array(b);
-      }
-      function waitMs(ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
-      }
-      async function sha256b64(data) {
-        const buf = await crypto.subtle.digest("SHA-256", data);
-        return new Uint8Array(buf)
-          .toBase64({ alphabet: "base64url" })
-          .replace(/=+$/, "");
-      }
-      async function makePaivanaId(curTime, nonceBuf, website) {
-        const websiteBuf = new TextEncoder().encode(`${website}\0`);
-        const curTimeBuf = timestampRoundedToBuffer(curTime);
-
-        const length = nonceBuf.length + websiteBuf.length + curTimeBuf.length;
-        const buf = new Uint8Array(length);
-        buf.set(nonceBuf, 0);
-        buf.set(websiteBuf, nonceBuf.length);
-        buf.set(curTimeBuf, nonceBuf.length + websiteBuf.length);
-        const hash = await sha256b64(buf);
-        return `${curTime}-${hash}`;
-      }
-      async function confirmPayment(order_id, linkEl, errorEl, nonce) {
-        linkEl.textContent = I18N_PAYMENT_CONFIRMED_LOADING;
-        linkEl.href = '#';
-        try {
-          const res = await fetch(`${origin}/.well-known/paivana`, {
-            method:  'POST',
-            headers: { 'Content-Type': 'application/json' },
-            redirect: "manual",
-            body:    JSON.stringify({ order_id, nonce, cur_time: { t_s: expTime }, website }),
-          });
-          if (res.status >= 400) {
-            linkEl.textContent = I18N_PAYMENT_CONFIRMED_PROBLEM;
-            errorEl.textContent = JSON.stringify(await res.json());
-          }
-          const dest = res.redirected ? res.url : website;
-          location.href = dest;
-        } catch (e) {
-          console.warn('[paivana] Error trying to confirm payment:', e);
-          errorEl.textContent = I18N_PAYMENT_CONFIRMED_ERROR;
-        }
-      }
-
-      function toggleDescription(el) {
-        for (const a of el.getElementsByClassName("arrow")) {
-          a.classList.toggle("upside-down")
-        }
-        for (const a of el.getElementsByClassName("price-list")) {
-          a.classList.toggle("hidden")
-        }
-      }
-
-    </script>
-    <script>
-      async function main() {
-        const website = atob(window.location.hash.substring(1));
-        const origin = window.location.origin;
-
-        // cap at 100 years, we don't deal well with 'forever' otherwise
-        const usePickupDelay = Math.min(MAX_PICKUP_DELAY, 60*60*24*356*100);
-
-        // Strip trailing slash so we can append /templateId cleanly.
-        const merchantBase  = MERCHANT_BACKEND.replace(/\/$/, '');
-        const merchantUrl   = new URL(merchantBase);
-        const merchantProto = merchantUrl.protocol;
-        const suffix        = merchantProto === 'http:' ? '+http' : '';
-        const merchantHost  = merchantUrl.host;
-        const merchantPath  = merchantUrl.path;
-
-        const expTime  = Math.floor(Date.now() / 1000) + usePickupDelay;
-        const nonceBuf = new Uint8Array(16);
-        crypto.getRandomValues(nonceBuf);
-        const nonce = encodeCrock(nonceBuf.buffer);
-
-        const paivanaId = await makePaivanaId(expTime, nonceBuf, website);
-
-        // finally we can compute the talerURI and polling URL
-        const TALER_URI = [
-          `taler${suffix}://pay-template/`,
-          merchantHost,
-          merchantPath,
-          `/`,
-          MERCHANT_TEMPLATE_ID,
-          `?session_id=${encodeURIComponent(paivanaId)}`,
-          `&fulfillment_url=${encodeURIComponent(website)}`
-        ].join('');
-
-        const PAIVANA_POLL_URL = [
-          merchantBase,
-          "/sessions/",
-          encodeURIComponent(paivanaId),
-          "?fulfillment_url=",
-          encodeURIComponent(website),
-          "&timeout_ms=",
-          POLL_WAIT_MS
-        ].join("");
-
-
-        // grab all the html element we need
-        const talerLink = document.getElementById('taler-link');
-        const errorMessageLabel = document.getElementById('error-message');
-        const qrDiv = document.getElementById('qrcode');
-
-        // show the taler URI as a link
-        // because we want the user to be able to use the webex
-        talerLink.href        = TALER_URI;
-
-        // show the qr code
-        new QRCode(qrDiv, {
-          text:         TALER_URI,
-          width:        QR_WIDTH,
-          height:       QR_HEIGHT,
-          correctLevel: QRCode.CorrectLevel.M
-        });
-
-        // From here we just poll. Whe the request from polling
-        // returns that the order has been paid we show to the
-        // proxy that we hold the nonce and it should return
-        // us a valid cookie.
-        while (true) {
-          const start = performance.now();
-          try {
-            const res = await fetch(PAIVANA_POLL_URL, { cache: 'no-store' });
-            if (res.status === 200) {
-              let info = null;
-              try   { info = await res.json() } catch (_) {}
-              console.log("[paivana] Got reponse from backend", res, info);
-              if (info.order_id) {
-                await confirmPayment(info.order_id, talerLink, errorMessageLabel, nonce);
-              } else {
-                talerLink.textContent = I18N_PAYMENT_CONFIRMED_NO_ORDER;
-                const remMs = Math.round(POLL_WAIT_MS - (performance.now() - start));
-                if (remMs > 0) await waitMs(remMs);
-                location.href = website;
-              }
-              return;
-            }
-          } catch (e) {
-            console.warn('[paivana] poll error:', e);
-            talerLink.href = '#';
-            talerLink.textContent = I18N_PAYMENT_NETWORK_PROBLEM;
-          }
-          const remMs = Math.round(POLL_WAIT_MS - (performance.now() - start));
-          if (remMs > 0) await waitMs(remMs);
-        }
-        return;
-      };
-    </script>
-    <style>
-      *,
-      *::before,
-      *::after {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-
-      :root {
-        --bg: rgb(226, 232, 240);
-        --surface: white;
-        --border: rgba(255, 255, 255, 0.07);
-        --border-md: rgba(255, 255, 255, 0.13);
-        --text: black;
-        --muted: #7a7d8a;
-        --primary: #0042b3;
-        --primary-container: #d3deff;
-        --on-primary-container: #00134a;
-        --on-primary: #ffffff;
-        --primary-dim: #7a7d8a;
-        --radius-lg: 18px;
-        --radius-md: 10px;
-        --radius-sm: 7px;
-      }
-
-      body {
-        font-family: sans-serif;
-        background: var(--bg);
-        color: var(--text);
-        min-height: 100vh;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-      }
-
-      .card {
-        position: relative;
-        z-index: 1;
-        background: var(--surface);
-        border: 1px solid var(--border-md);
-        border-radius: var(--radius-lg);
-        padding: 1rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1rem;
-        box-shadow:
-          0 0 0 1px rgba(0, 0, 0, 0.4),
-          0 32px 80px rgba(0, 0, 0, 0.5);
-      }
-      .card-container {
-        padding: 10px;
-        width: 100%;
-        max-width: 400px;
-        margin: auto;
-        margin-top: 0px;
-      }
-
-      /* compact header row */
-      .header {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        width: 100%;
-      }
-      .lock-icon {
-        width: 28px;
-        height: 28px;
-        flex-shrink: 0;
-        opacity: 0.9;
-      }
-      .header-text h1 {
-        font-size: 15px;
-        font-weight: 500;
-        color: var(--text);
-        line-height: 1.2;
-      }
-      .header-text p {
-        font-size: 12px;
-        color: var(--muted);
-        margin-top: 2px;
-      }
-
-      /* QR section */
-      .qr-wrap {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-      }
-      .qr-frame {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .qr-frame svg {
-        display: block;
-      }
-      .qr-taler-logo {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        align-content: center;
-        display: flex;
-        background-color: transparent;
-      }
-      .qr-taler-frame {
-        max-width: 400px;
-        margin: auto;
-        padding: 10px;
-        border-radius: 20px;
-        background: conic-gradient(
-            from var(--angle),
-            #0042b3 0deg,
-            #f1f1f4 20deg,
-            #f1f1f4 150deg,
-            #f1f1f4 160deg,
-            #0042b3 180deg,
-            #f1f1f4 200deg,
-            #f1f1f4 330deg,
-            #f1f1f4 340deg,
-            #0042b3
-          )
-          padding-box;
-        animation: 10s linear 0s infinite normal none running rotate;
-        position: relative;
-      }
-      .qr-label {
-        font-size: 11px;
-        color: var(--muted);
-        letter-spacing: 0.06em;
-      }
-      .qr-legend {
-        text-align: center;
-      }
-
-      /* amount badge */
-      .amount-badge {
-        background: rgba(200, 241, 53, 0.08);
-        border: 1px solid rgba(200, 241, 53, 0.2);
-        border-radius: 99px;
-        padding: 5px 14px;
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--primary);
-        letter-spacing: 0.04em;
-      }
-      .merchant-host {
-        font-size: small;
-        color: gray;
-      }
-      .template-summary {
-        text-align: center;
-      }
-      .pay-choices {
-        cursor: pointer;
-      }
-      .upside-down {
-        rotate: 180deg;
-      }
-      .hidden {
-        display: none;
-      }
-
-      /* steps */
-      .steps {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-      .step {
-        display: flex;
-        align-items: flex-start;
-        gap: 11px;
-        color: var(--on-primary-container);
-        background: var(--primary-container);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-md);
-        padding: 11px 13px;
-        transition: border-color 0.2s;
-      }
-      a.step {
-        border: 1px solid var(--primary);
-      }
-      .step:hover {
-        border-color: var(--border-md);
-      }
-      .step-num {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: var(--primary-container);
-        border: 1px solid var(--primary);
-        color: var(--primary);
-        font-size: 11px;
-        font-weight: 500;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        margin-top: 1px;
-      }
-      .step-body {
-      }
-      .step-title {
-        font-size: 18px;
-        font-weight: 500;
-        color: var(--text);
-        margin-bottom: 2px;
-        display: flex;
-        justify-content: space-between;
-      }
-      .step-desc {
-        font-size: 12px;
-        color: var(--muted);
-        line-height: 1.55;
-      }
-
-      /* cta button */
-      .cta {
-        padding-top: 13px;
-        padding-bottom: 13px;
-        padding-left: 26px;
-        padding-right: 26px;
-        border-radius: var(--radius-md);
-        background: var(--primary);
-        color: var(--on-primary);
-        border: none;
-        font-size: 20px;
-        font-weight: 500;
-        cursor: pointer;
-        letter-spacing: 0.01em;
-      }
-      .cta:hover {
-        background: var(--primary-dim);
-      }
-      .cta:active {
-        transform: scale(0.98);
-      }
-      .button-cta {
-        display: flex;
-        margin: auto;
-      }
-
-      /* footer note */
-      .footer-note {
-        font-size: 11px;
-        color: var(--muted);
-        text-align: center;
-        line-height: 1.6;
-      }
-      .footer-note a {
-        color: var(--muted);
-        text-decoration: underline;
-        text-underline-offset: 2px;
-      }
-      .header {
-        width: 100%;
-        padding: 8px;
-        margin-bottom: 10px;
-        display: flex;
-        background-color: white;
-        border: 1px black solid;
-      }
-      .footer {
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-        padding: 8px;
-        display: flex;
-        justify-content: center;
-        background-color: white;
-        border: 1px black solid;
-        z-index: 2;
-        flex-direction: column;
-      }
-      .footer p {
-        text-wrap-mode: wrap;
-      }
-      body {
-        margin-bottom: 60px;
-      }
-      svg.lock-icon {
-        fill: var(--primary-container);
-        stroke: var(--primary);
-      }
-      @property --angle {
-        syntax: "<angle>";
-        initial-value: 0deg;
-        inherits: false;
-      }
-
-      @keyframes rotate {
-        to {
-          --angle: 360deg;
-        }
-      }
-    </style>
-    <!-- download from https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js -->
-    <script integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==">
-var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this.parsedData=[];for(var b=[],d=0,e=this.data.length;e>d;d++){var f=this.data.charCodeAt(d);f>65536?(b[0]=240|(1835008&f)>>>18,b[1]=128|(258048&f)>>>12,b[2]=128|(4032&f)>>>6,b[3]=128|63&f):f>2048?(b[0]=224|(61440&f)>>>12,b[1]=128|(4032&f)>>>6,b[2]=128|63&f):f>128?(b[0]=192|(1984&f)>>>6,b[1]=128|63&f):b[0]=f,this.parsedData=this.parsedData.concat(b)}this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(a,b){this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}function i(a,b){if(void 0==a.length)throw new Error(a.length+"/"+b);for(var c=0;c<a.length&&0==a[c];)c++;this.num=new Array(a.length-c+b);for(var d=0;d<a.length-c;d++)this.num[d]=a[d+c]}function j(a,b){this.totalCount=a,this.dataCount=b}function k(){this.buffer=[],this.length=0}function m(){return"undefined"!=typeof CanvasRenderingContext2D}function n(){var a=!1,b=navigator.userAgent;return/android/i.test(b)&&(a=!0,aMat=b.toString().match(/android ([0-9]\.[0-9])/i),aMat&&aMat[1]&&(a=parseFloat(aMat[1]))),a}function r(a,b){for(var c=1,e=s(a),f=0,g=l.length;g>=f;f++){var h=0;switch(b){case d.L:h=l[f][0];break;case d.M:h=l[f][1];break;case d.Q:h=l[f][2];break;case d.H:h=l[f][3]}if(h>=e)break;c++}if(c>l.length)throw new Error("Too long data");return c}function s(a){var b=encodeURI(a).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return b.length+(b.length!=a?3:0)}a.prototype={getLength:function(){return this.parsedData.length},write:function(a){for(var b=0,c=this.parsedData.length;c>b;b++)a.put(this.parsedData[b],8)}},b.prototype={addData:function(b){var c=new a(b);this.dataList.push(c),this.dataCache=null},isDark:function(a,b){if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b)throw new Error(a+","+b);return this.modules[a][b]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=new Array(this.moduleCount);for(var e=0;e<this.moduleCount;e++)this.modules[d][e]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(a,c),this.typeNumber>=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=b.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,b){for(var c=-1;7>=c;c++)if(!(-1>=a+c||this.moduleCount<=a+c))for(var d=-1;7>=d;d++)-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)},getBestMaskPattern:function(){for(var a=0,b=0,c=0;8>c;c++){this.makeImpl(!0,c);var d=f.getLostPoint(this);(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){var d=a.createEmptyMovieClip(b,c),e=1;this.make();for(var f=0;f<this.modules.length;f++)for(var g=f*e,h=0;h<this.modules[f].length;h++){var i=h*e,j=this.modules[f][h];j&&(d.beginFill(0,100),d.moveTo(i,g),d.lineTo(i+e,g),d.lineTo(i+e,g+e),d.lineTo(i,g+e),d.endFill())}return d},setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(var b=8;b<this.moduleCount-8;b++)null==this.modules[6][b]&&(this.modules[6][b]=0==b%2)},setupPositionAdjustPattern:function(){for(var a=f.getPatternPosition(this.typeNumber),b=0;b<a.length;b++)for(var c=0;c<a.length;c++){var d=a[b],e=a[c];if(null==this.modules[d][e])for(var g=-2;2>=g;g++)for(var h=-2;2>=h;h++)this.modules[d+g][e+h]=-2==g||2==g||-2==h||2==h||0==g&&0==h?!0:!1}},setupTypeNumber:function(a){for(var b=f.getBCHTypeNumber(this.typeNumber),c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[Math.floor(c/3)][c%3+this.moduleCount-8-3]=d}for(var c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[c%3+this.moduleCount-8-3][Math.floor(c/3)]=d}},setupTypeInfo:function(a,b){for(var c=this.errorCorrectLevel<<3|b,d=f.getBCHTypeInfo(c),e=0;15>e;e++){var g=!a&&1==(1&d>>e);6>e?this.modules[e][8]=g:8>e?this.modules[e+1][8]=g:this.modules[this.moduleCount-15+e][8]=g}for(var e=0;15>e;e++){var g=!a&&1==(1&d>>e);8>e?this.modules[8][this.moduleCount-e-1]=g:9>e?this.modules[8][15-e-1+1]=g:this.modules[8][15-e-1]=g}this.modules[this.moduleCount-8][8]=!a},mapData:function(a,b){for(var c=-1,d=this.moduleCount-1,e=7,g=0,h=this.moduleCount-1;h>0;h-=2)for(6==h&&h--;;){for(var i=0;2>i;i++)if(null==this.modules[d][h-i]){var j=!1;g<a.length&&(j=1==(1&a[g]>>>e));var k=f.getMask(b,d,h-i);k&&(j=!j),this.modules[d][h-i]=j,e--,-1==e&&(g++,e=7)}if(d+=c,0>d||this.moduleCount<=d){d-=c,c=-c;break}}}},b.PAD0=236,b.PAD1=17,b.createData=function(a,c,d){for(var e=j.getRSBlocks(a,c),g=new k,h=0;h<d.length;h++){var i=d[h];g.put(i.mode,4),g.put(i.getLength(),f.getLengthInBits(i.mode,a)),i.write(g)}for(var l=0,h=0;h<e.length;h++)l+=e[h].dataCount;if(g.getLengthInBits()>8*l)throw new Error("code length overflow. ("+g.getLengthInBits()+">"+8*l+")");for(g.getLengthInBits()+4<=8*l&&g.put(0,4);0!=g.getLengthInBits()%8;)g.putBit(!1);for(;;){if(g.getLengthInBits()>=8*l)break;if(g.put(b.PAD0,8),g.getLengthInBits()>=8*l)break;g.put(b.PAD1,8)}return b.createBytes(g,e)},b.createBytes=function(a,b){for(var c=0,d=0,e=0,g=new Array(b.length),h=new Array(b.length),j=0;j<b.length;j++){var k=b[j].dataCount,l=b[j].totalCount-k;d=Math.max(d,k),e=Math.max(e,l),g[j]=new Array(k);for(var m=0;m<g[j].length;m++)g[j][m]=255&a.buffer[m+c];c+=k;var n=f.getErrorCorrectPolynomial(l),o=new i(g[j],n.getLength()-1),p=o.mod(n);h[j]=new Array(n.getLength()-1);for(var m=0;m<h[j].length;m++){var q=m+p.getLength()-h[j].length;h[j][m]=q>=0?p.get(q):0}}for(var r=0,m=0;m<b.length;m++)r+=b[m].totalCount;for(var s=new Array(r),t=0,m=0;d>m;m++)for(var j=0;j<b.length;j++)m<g[j].length&&(s[t++]=g[j][m]);for(var m=0;e>m;m++)for(var j=0;j<b.length;j++)m<h[j].length&&(s[t++]=h[j][m]);return s};for(var c={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},d={L:1,M:0,Q:3,H:2},e={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7},f={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(a){for(var b=a<<10;f.getBCHDigit(b)-f.getBCHDigit(f.G15)>=0;)b^=f.G15<<f.getBCHDigit(b)-f.getBCHDigit(f.G15);return(a<<10|b)^f.G15_MASK},getBCHTypeNumber:function(a){for(var b=a<<12;f.getBCHDigit(b)-f.getBCHDigit(f.G18)>=0;)b^=f.G18<<f.getBCHDigit(b)-f.getBCHDigit(f.G18);return a<<12|b},getBCHDigit:function(a){for(var b=0;0!=a;)b++,a>>>=1;return b},getPatternPosition:function(a){return f.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,b,c){switch(a){case e.PATTERN000:return 0==(b+c)%2;case e.PATTERN001:return 0==b%2;case e.PATTERN010:return 0==c%3;case e.PATTERN011:return 0==(b+c)%3;case e.PATTERN100:return 0==(Math.floor(b/2)+Math.floor(c/3))%2;case e.PATTERN101:return 0==b*c%2+b*c%3;case e.PATTERN110:return 0==(b*c%2+b*c%3)%2;case e.PATTERN111:return 0==(b*c%3+(b+c)%2)%2;default:throw new Error("bad maskPattern:"+a)}},getErrorCorrectPolynomial:function(a){for(var b=new i([1],0),c=0;a>c;c++)b=b.multiply(new i([1,g.gexp(c)],0));return b},getLengthInBits:function(a,b){if(b>=1&&10>b)switch(a){case c.MODE_NUMBER:return 10;case c.MODE_ALPHA_NUM:return 9;case c.MODE_8BIT_BYTE:return 8;case c.MODE_KANJI:return 8;default:throw new Error("mode:"+a)}else if(27>b)switch(a){case c.MODE_NUMBER:return 12;case c.MODE_ALPHA_NUM:return 11;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 10;default:throw new Error("mode:"+a)}else{if(!(41>b))throw new Error("type:"+b);switch(a){case c.MODE_NUMBER:return 14;case c.MODE_ALPHA_NUM:return 13;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 12;default:throw new Error("mode:"+a)}}},getLostPoint:function(a){for(var b=a.getModuleCount(),c=0,d=0;b>d;d++)for(var e=0;b>e;e++){for(var f=0,g=a.isDark(d,e),h=-1;1>=h;h++)if(!(0>d+h||d+h>=b))for(var i=-1;1>=i;i++)0>e+i||e+i>=b||(0!=h||0!=i)&&g==a.isDark(d+h,e+i)&&f++;f>5&&(c+=3+f-5)}for(var d=0;b-1>d;d++)for(var e=0;b-1>e;e++){var j=0;a.isDark(d,e)&&j++,a.isDark(d+1,e)&&j++,a.isDark(d,e+1)&&j++,a.isDark(d+1,e+1)&&j++,(0==j||4==j)&&(c+=3)}for(var d=0;b>d;d++)for(var e=0;b-6>e;e++)a.isDark(d,e)&&!a.isDark(d,e+1)&&a.isDark(d,e+2)&&a.isDark(d,e+3)&&a.isDark(d,e+4)&&!a.isDark(d,e+5)&&a.isDark(d,e+6)&&(c+=40);for(var e=0;b>e;e++)for(var d=0;b-6>d;d++)a.isDark(d,e)&&!a.isDark(d+1,e)&&a.isDark(d+2,e)&&a.isDark(d+3,e)&&a.isDark(d+4,e)&&!a.isDark(d+5,e)&&a.isDark(d+6,e)&&(c+=40);for(var k=0,e=0;b>e;e++)for(var d=0;b>d;d++)a.isDark(d,e)&&k++;var l=Math.abs(100*k/b/b-50)/5;return c+=10*l}},g={glog:function(a){if(1>a)throw new Error("glog("+a+")");return g.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;a>=256;)a-=255;return g.EXP_TABLE[a]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},h=0;8>h;h++)g.EXP_TABLE[h]=1<<h;for(var h=8;256>h;h++)g.EXP_TABLE[h]=g.EXP_TABLE[h-4]^g.EXP_TABLE[h-5]^g.EXP_TABLE[h-6]^g.EXP_TABLE[h-8];for(var h=0;255>h;h++)g.LOG_TABLE[g.EXP_TABLE[h]]=h;i.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var b=new Array(this.getLength()+a.getLength()-1),c=0;c<this.getLength();c++)for(var d=0;d<a.getLength();d++)b[c+d]^=g.gexp(g.glog(this.get(c))+g.glog(a.get(d)));return new i(b,0)},mod:function(a){if(this.getLength()-a.getLength()<0)return this;for(var b=g.glog(this.get(0))-g.glog(a.get(0)),c=new Array(this.getLength()),d=0;d<this.getLength();d++)c[d]=this.get(d);for(var d=0;d<a.getLength();d++)c[d]^=g.gexp(g.glog(a.get(d))+b);return new i(c,0).mod(a)}},j.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],j.getRSBlocks=function(a,b){var c=j.getRsBlockTable(a,b);if(void 0==c)throw new Error("bad rs block @ typeNumber:"+a+"/errorCorrectLevel:"+b);for(var d=c.length/3,e=[],f=0;d>f;f++)for(var g=c[3*f+0],h=c[3*f+1],i=c[3*f+2],k=0;g>k;k++)e.push(new j(h,i));return e},j.getRsBlockTable=function(a,b){switch(b){case d.L:return j.RS_BLOCK_TABLE[4*(a-1)+0];case d.M:return j.RS_BLOCK_TABLE[4*(a-1)+1];case d.Q:return j.RS_BLOCK_TABLE[4*(a-1)+2];case d.H:return j.RS_BLOCK_TABLE[4*(a-1)+3];default:return void 0}},k.prototype={get:function(a){var b=Math.floor(a/8);return 1==(1&this.buffer[b]>>>7-a%8)},put:function(a,b){for(var c=0;b>c;c++)this.putBit(1==(1&a>>>b-c-1))},getLengthInBits:function(){return this.length},putBit:function(a){var b=Math.floor(this.length/8);this.buffer.length<=b&&this.buffer.push(0),a&&(this.buffer[b]|=128>>>this.length%8),this.length++}};var l=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]],o=function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){function g(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",a);for(var d in b)b.hasOwnProperty(d)&&c.setAttribute(d,b[d]);return c}var b=this._htOption,c=this._el,d=a.getModuleCount();Math.floor(b.width/d),Math.floor(b.height/d),this.clear();var h=g("svg",{viewBox:"0 0 "+String(d)+" "+String(d),width:"100%",height:"100%",fill:b.colorLight});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),c.appendChild(h),h.appendChild(g("rect",{fill:b.colorDark,width:"1",height:"1",id:"template"}));for(var i=0;d>i;i++)for(var j=0;d>j;j++)if(a.isDark(i,j)){var k=g("use",{x:String(i),y:String(j)});k.setAttributeNS("http://www.w3.org/1999/xlink","href","#template"),h.appendChild(k)}},a.prototype.clear=function(){for(;this._el.hasChildNodes();)this._el.removeChild(this._el.lastChild)},a}(),p="svg"===document.documentElement.tagName.toLowerCase(),q=p?o:m()?function(){function a(){this._elImage.src=this._elCanvas.toDataURL("image/png"),this._elImage.style.display="block",this._elCanvas.style.display="none"}function d(a,b){var c=this;if(c._fFail=b,c._fSuccess=a,null===c._bSupportDataURI){var d=document.createElement("img"),e=function(){c._bSupportDataURI=!1,c._fFail&&_fFail.call(c)},f=function(){c._bSupportDataURI=!0,c._fSuccess&&c._fSuccess.call(c)};return d.onabort=e,d.onerror=e,d.onload=f,d.src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",void 0}c._bSupportDataURI===!0&&c._fSuccess?c._fSuccess.call(c):c._bSupportDataURI===!1&&c._fFail&&c._fFail.call(c)}if(this._android&&this._android<=2.1){var b=1/window.devicePixelRatio,c=CanvasRenderingContext2D.prototype.drawImage;CanvasRenderingContext2D.prototype.drawImage=function(a,d,e,f,g,h,i,j){if("nodeName"in a&&/img/i.test(a.nodeName))for(var l=arguments.length-1;l>=1;l--)arguments[l]=arguments[l]*b;else"undefined"==typeof j&&(arguments[1]*=b,arguments[2]*=b,arguments[3]*=b,arguments[4]*=b);c.apply(this,arguments)}}var e=function(a,b){this._bIsPainted=!1,this._android=n(),this._htOption=b,this._elCanvas=document.createElement("canvas"),this._elCanvas.width=b.width,this._elCanvas.height=b.height,a.appendChild(this._elCanvas),this._el=a,this._oContext=this._elCanvas.getContext("2d"),this._bIsPainted=!1,this._elImage=document.createElement("img"),this._elImage.style.display="none",this._el.appendChild(this._elImage),this._bSupportDataURI=null};return e.prototype.draw=function(a){var b=this._elImage,c=this._oContext,d=this._htOption,e=a.getModuleCount(),f=d.width/e,g=d.height/e,h=Math.round(f),i=Math.round(g);b.style.display="none",this.clear();for(var j=0;e>j;j++)for(var k=0;e>k;k++){var l=a.isDark(j,k),m=k*f,n=j*g;c.strokeStyle=l?d.colorDark:d.colorLight,c.lineWidth=1,c.fillStyle=l?d.colorDark:d.colorLight,c.fillRect(m,n,f,g),c.strokeRect(Math.floor(m)+.5,Math.floor(n)+.5,h,i),c.strokeRect(Math.ceil(m)-.5,Math.ceil(n)-.5,h,i)}this._bIsPainted=!0},e.prototype.makeImage=function(){this._bIsPainted&&d.call(this,a)},e.prototype.isPainted=function(){return this._bIsPainted},e.prototype.clear=function(){this._oContext.clearRect(0,0,this._elCanvas.width,this._elCanvas.height),this._bIsPainted=!1},e.prototype.round=function(a){return a?Math.floor(1e3*a)/1e3:a},e}():function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){for(var b=this._htOption,c=this._el,d=a.getModuleCount(),e=Math.floor(b.width/d),f=Math.floor(b.height/d),g=['<table style="border:0;border-collapse:collapse;">'],h=0;d>h;h++){g.push("<tr>");for(var i=0;d>i;i++)g.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:'+e+"px;height:"+f+"px;background-color:"+(a.isDark(h,i)?b.colorDark:b.colorLight)+';"></td>');g.push("</tr>")}g.push("</table>"),c.innerHTML=g.join("");var j=c.childNodes[0],k=(b.width-j.offsetWidth)/2,l=(b.height-j.offsetHeight)/2;k>0&&l>0&&(j.style.margin=l+"px "+k+"px")},a.prototype.clear=function(){this._el.innerHTML=""},a}();QRCode=function(a,b){if(this._htOption={width:256,height:256,typeNumber:4,colorDark:"#000000",colorLight:"#ffffff",correctLevel:d.H},"string"==typeof b&&(b={text:b}),b)for(var c in b)this._htOption[c]=b[c];"string"==typeof a&&(a=document.getElementById(a)),this._android=n(),this._el=a,this._oQRCode=null,this._oDrawing=new q(this._el,this._htOption),this._htOption.text&&this.makeCode(this._htOption.text)},QRCode.prototype.makeCode=function(a){this._oQRCode=new b(r(a,this._htOption.correctLevel),this._htOption.correctLevel),this._oQRCode.addData(a),this._oQRCode.make(),this._el.title=a,this._oDrawing.draw(this._oQRCode),this.makeImage()},QRCode.prototype.makeImage=function(){"function"==typeof this._oDrawing.makeImage&&(!this._android||this._android>=3)&&this._oDrawing.makeImage()},QRCode.prototype.clear=function(){this._oDrawing.clear()},QRCode.CorrectLevel=d}();
-  </script>
-  </head>
-  <body>
-    <div class="header">
-      <svg
-        class="lock-icon"
-        viewBox="0 0 28 28"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect x="5" y="12" width="18" height="13" rx="3" stroke-width="1" />
-        <path
-          d="M9.5 12V9a4.5 4.5 0 0 1 9 0v3"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          fill="none"
-        />
-        <circle cx="14" cy="18" r="2" />
-        <line
-          x1="14"
-          y1="20"
-          x2="14"
-          y2="22"
-          stroke-width="1.5"
-          stroke-linecap="round"
-        />
-      </svg>
-      <div class="header-text">
-        <h1>Paivana paywall</h1>
-        <p>The resource requires a payment to access.</p>
-      </div>
-    </div>
-
-    <div class="card-container">
-      <div class="card">
-        <!-- QR code + amount -->
-        <div class="qr-wrap">
-          {{#summary}}
-          <p class="template-summary">{{ summary }}</p>
-          {{/summary}}
-          <p class="merchant-host">{{ merchant_backend }}</p>
-
-          <div class="qr-taler-frame">
-            <div style="padding: 10px; border-radius: 20px; background-color: white">
-              <div class="qr-frame" id="qrcode" style="margin: 5px" >
-                </div>
-            </div>
-            <div class="qr-taler-logo">
-              <!-- Taler Logo -->
-              <div style="width: 100px; height: 50px" >
-                <svg xmlns="http://www.w3.org/2000/svg"  id="screenshot-b8718ead-4592-805f-8007-a9ef55f0a41b" viewBox="0 0 200 95" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41b"><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g fill="none"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a41b"><rect width="200" height="95" class="frame-background" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(255, 255, 255); fill-opacity: 1;" ry="47.5" rx="47.5" y="0"/></g><g class="frame-children"><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41c" width="670" height="300" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41d" style="display: none;"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a41d"><rect width="180" height="80.76923076923094" x="10" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="7.115384615384301"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41e" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a424"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a424"><path d="M87.60791015625,8.12158203125C101.56881713867188,8.12158203125,113.69378662109375,16.55859375,119.81179809570312,28.943603515625L114.60223388671875,28.943603515625C108.9432373046875,19.34130859375,98.96926879882812,12.96484375,87.60791015625,12.96484375C69.97454833984375,12.96484375,55.679962158203125,28.32177734375,55.679962158203125,47.265380859375C55.679962158203125,56.53759765625,59.105865478515625,64.94921875,64.67062377929688,71.121826171875C63.468505859375,72.1279296875,62.188629150390625,73.031494140625,60.841827392578125,73.8203125C54.84014892578125,66.8427734375,51.1715087890625,57.515380859375,51.1715087890625,47.265380859375C51.1715087890625,25.64697265625,67.48464965820312,8.12158203125,87.60791015625,8.12158203125ZM119.71417236328125,65.7861328125C113.56512451171875,78.06298828125,101.49423217773438,86.409423828125,87.60791015625,86.409423828125C86.66519165039062,86.409423828125,85.73080444335938,86.370849609375,84.80609130859375,86.29541015625C87.53939819335938,84.894287109375,90.10183715820312,83.171875,92.45233154296875,81.17333984375C101.69497680664062,79.661865234375,109.63381958007812,73.891845703125,114.48382568359375,65.7861328125Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a425"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a425"><path d="M67.50363159179688,8.12158203125C68.44625854492188,8.12158203125,69.380615234375,8.16015625,70.305419921875,8.235595703125C67.57211303710938,9.63671875,65.00958251953125,11.35888671875,62.659088134765625,13.357666015625C47.324951171875,15.865234375,35.575653076171875,30.091064453125,35.575653076171875,47.265380859375C35.575653076171875,60.06689453125,42.10455322265625,71.228759765625,51.77911376953125,77.1220703125C50.351959228515625,77.362060546875,48.8892822265625,77.4873046875,47.399322509765625,77.4873046875C46.289306640625,77.4873046875,45.19500732421875,77.416015625,44.118560791015625,77.281494140625C36.14129638671875,70.10107421875,31.067230224609375,59.32080078125,31.067230224609375,47.265380859375C31.067230224609375,25.64697265625,47.38037109375,8.12158203125,67.50363159179688,8.12158203125ZM72.34814453125,81.17333984375C81.5909423828125,79.661865234375,89.52969360351562,73.8916015625,94.3797607421875,65.78564453125L99.61007690429688,65.78564453125C93.46109008789062,78.062744140625,81.39016723632812,86.409423828125,67.50363159179688,86.409423828125C66.56088256835938,86.409423828125,65.62661743164062,86.370849609375,64.70181274414062,86.29541015625C67.4349365234375,84.89404296875,69.99777221679688,83.172119140625,72.34814453125,81.17333984375ZM94.497802734375,28.943603515625C91.6864013671875,24.174072265625,87.81045532226562,20.2001953125,83.22808837890625,17.40869140625C84.65524291992188,17.1689453125,86.11785888671875,17.04345703125,87.60791015625,17.04345703125C88.71786499023438,17.04345703125,89.81222534179688,17.114990234375,90.888671875,17.249267578125C94.485107421875,20.486572265625,97.49151611328125,24.455810546875,99.70870971679688,28.943603515625Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a426"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a426"><path d="M47.399322509765625,8.12158203125C48.352447509765625,8.12158203125,49.296783447265625,8.161376953125,50.23150634765625,8.238525390625C47.5032958984375,9.637451171875,44.945098876953125,11.356689453125,42.59844970703125,13.35107421875C27.242950439453125,15.839111328125,15.47137451171875,30.074951171875,15.47137451171875,47.265380859375C15.47137451171875,66.208984375,29.766082763671875,81.56591796875,47.399322509765625,81.56591796875C58.68267822265625,81.56591796875,68.59854125976562,75.277587890625,74.27731323242188,65.78564453125L79.50582885742188,65.78564453125C73.35687255859375,78.062744140625,61.285888671875,86.409423828125,47.399322509765625,86.409423828125C27.276123046875,86.409423828125,10.963043212890625,68.884033203125,10.963043212890625,47.265380859375C10.963043212890625,25.64697265625,27.276123046875,8.12158203125,47.399322509765625,8.12158203125ZM74.39288330078125,28.943603515625C73.218017578125,26.950927734375,71.857666015625,25.096435546875,70.337158203125,23.40966796875C71.53936767578125,22.40380859375,72.81900024414062,21.49951171875,74.1656494140625,20.7109375C76.29071044921875,23.181640625,78.12283325195312,25.947021484375,79.60369873046875,28.943603515625Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41f"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a41f"><path d="M78.18096923828125,37.995361328125L86.3848876953125,37.995361328125L86.3848876953125,33.469482421875L65.39480590820312,33.469482421875L65.39480590820312,37.995361328125L73.59881591796875,37.995361328125L73.59881591796875,61.259765625L78.18096923828125,61.259765625Z"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a420"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a420"><path d="M92.96798706054688,54.550537109375L105.19992065429688,54.550537109375L107.82388305664062,61.259765625L112.62802124023438,61.259765625L101.24588012695312,33.27099609375L97.03329467773438,33.27099609375L85.651123046875,61.259765625L90.30743408203125,61.259765625ZM103.53701782226562,50.222900390625L94.63125610351562,50.222900390625L99.06564331054688,39.10693359375Z"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a421"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a421"><path d="M120.87139892578125,33.469482421875L116.76959228515625,33.469482421875L116.76959228515625,61.259765625L135.17013549804688,61.259765625L135.17013549804688,56.853271484375C130.4039306640625,56.853271484375,125.63763427734375,56.853271484375,120.87139892578125,56.853271484375Z"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a422"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a422"><path d="M159.07958984375,33.469482421875L139.93722534179688,33.469482421875L139.93722534179688,61.259765625L159.264404296875,61.259765625L159.264404296875,56.853271484375L144.445556640625,56.853271484375L144.445556640625,49.428955078125L157.41665649414062,49.428955078125L157.41665649414062,45.0224609375L144.445556640625,45.0224609375L144.445556640625,37.876220703125L159.07958984375,37.876220703125Z"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a423"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a423"><path d="M181.21524047851562,42.541259765625C181.21524047851562,43.976806640625,180.73483276367188,45.121826171875,179.767822265625,45.968505859375C178.80709838867188,46.822265625,177.5074462890625,47.245361328125,175.87518310546875,47.245361328125L169.20486450195312,47.245361328125L169.20486450195312,37.876220703125L175.83828735351562,37.876220703125C177.54434204101562,37.876220703125,178.86849975585938,38.2666015625,179.80490112304688,39.053955078125C180.74722290039062,39.8349609375,181.21524047851562,40.999267578125,181.21524047851562,42.541259765625ZM186.64749145507812,61.259765625L179.6632080078125,50.739013671875C180.5745849609375,50.474365234375,181.40618896484375,50.09765625,182.15771484375,49.607666015625C182.908935546875,49.1181640625,183.55581665039062,48.5224609375,184.09768676757812,47.8212890625C184.63983154296875,47.11962890625,185.06466674804688,46.312744140625,185.37261962890625,45.399658203125C185.68048095703125,44.486572265625,185.83438110351562,43.447509765625,185.83438110351562,42.282958984375C185.83438110351562,40.93310546875,185.61279296875,39.709228515625,185.16928100585938,38.610595703125C184.72586059570312,37.512451171875,184.09158325195312,36.5859375,183.26632690429688,35.83154296875C182.44088745117188,35.077392578125,181.43087768554688,34.4951171875,180.236083984375,34.084716796875C179.04104614257812,33.67431640625,177.70452880859375,33.469482421875,176.22647094726562,33.469482421875L164.696533203125,33.469482421875L164.696533203125,61.259765625L169.20486450195312,61.259765625L169.20486450195312,51.572998046875L174.91445922851562,51.572998046875L181.28903198242188,61.259765625Z"/></g></g></g></g></g></g></g></g></g></svg>
-              </div>
-            </div>
-          </div>
-
-          <p class="qr-legend">Scan the QR with a GNU Taler wallet</p>
-        </div>
-
-        <!-- instructions -->
-        <div class="steps">
-          <a href="https://www.taler.net/wallet" target="_blank" class="step">
-            <div class="step-num">1</div>
-            <div class="step-body">
-              <p class="step-title">Install</p>
-              <p class="step-desc">
-                If you don't have one yet you can follow the instruction on
-                www.taler.net.
-              </p>
-            </div>
-          </a>
-          {{#has_choices}}
-          <div class="step pay-choices" onclick="toggleDescription(this)">
-            <div class="step-num">2</div>
-            <div class="step-body ">
-              <p class="step-title">
-              <span>Pay {{default_choice.amount}} or see options</span>
-              <svg name="toggle-arrow" data-accordion-icon="" class="arrow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"></path></svg>
-              </p>
-              <p class="step-desc">
-                Your wallet will display the details of the transaction.
-                <ul class="price-list hidden">
-                  {{#choices}}
-                  {{#description}}
-                  <li>{{amount}}: {{description}}</li>
-                  {{/description}}
-                  {{^description}}
-                  <li>{{amount}}</li>
-                  {{/description}}
-                  {{/choices}}
-                </ul>
-              </p>
-            </div>
-          </div>
-          {{/has_choices}}
-          {{^has_choices}}
-          <div class="step">
-            <div class="step-num">2</div>
-            <div class="step-body">
-              <p class="step-title">Pay {{default_choice.amount}}</p>
-              <p class="step-desc">
-                Your wallet will display the details of the transaction.
-              </p>
-            </div>
-          </div>
-          {{/has_choices}}
-          <div class="step">
-            <div class="step-num">3</div>
-            <div class="step-body">
-              <p class="step-title">Access</p>
-              <p class="step-desc">
-                You will be automatically redirected when confirmed.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <p class="footer-note">
-          Access is granted automatically once the transaction confirms.<br />
-          Need help? <a href="https://www.taler.net/en/">Contact support</a>
-        </p>
-      </div>
-    </div>
-
-    <div class="footer">
-      <p id="error-message"> </p>
-      <div class="button-cta">
-        <a target="_blank" id="taler-link" href="" class="cta">Pay now</a>
-      </div>
-    </div>
-
-    <script>
-      main();
-    </script>
-  </body>
-</html>
diff --git a/src/frontend/generate-paywall.py b/src/frontend/generate-paywall.py
@@ -0,0 +1,43 @@
+#!/usr/bin/env python3
+import sys
+import os
+import jinja2
+
+
+def main():
+    if len(sys.argv) < 3:
+        print(f"Usage: {sys.argv[0]} <input_template> <output_file>", file=sys.stderr)
+        sys.exit(1)
+
+    input_template = sys.argv[1]
+    output_file = sys.argv[2]
+
+    # We resolve included files relative to the input template's directory.
+    search_dir = os.path.dirname(os.path.abspath(input_template))
+
+    # Set up jinja2 environment with custom delimiters.
+    # Delimiters are changed to avoid conflict with Mustache tags like {{ merchant_backend }}.
+    env = jinja2.Environment(
+        loader=jinja2.FileSystemLoader(search_dir),
+        variable_start_string="@@",
+        variable_end_string="@@",
+        block_start_string="@<",
+        block_end_string=">@",
+        comment_start_string="@#",
+        comment_end_string="#@",
+    )
+
+    template_name = os.path.basename(input_template)
+    template = env.get_template(template_name)
+
+    rendered = template.render()
+
+    # Ensure parent directory of output_file exists (especially in build directories).
+    os.makedirs(os.path.dirname(os.path.abspath(output_file)), exist_ok=True)
+
+    with open(output_file, "w", encoding="utf-8") as f:
+        f.write(rendered)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/src/frontend/global.d.ts b/src/frontend/global.d.ts
@@ -0,0 +1,44 @@
+/*
+ This file is part of GNU Taler
+ (C) 2026 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU Affero General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License along with
+ GNU Anastasis; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+declare const QR_WIDTH: number;
+declare const QR_HEIGHT: number;
+declare const I18N_PAYMENT_CONFIRMED_LOADING: string;
+declare const I18N_PAYMENT_CONFIRMED_PROBLEM: string;
+declare const I18N_PAYMENT_CONFIRMED_ERROR: string;
+declare const I18N_PAYMENT_CONFIRMED_NO_ORDER: string;
+declare const I18N_PAYMENT_NETWORK_PROBLEM: string;
+declare const MERCHANT_BACKEND: string;
+declare const MERCHANT_TEMPLATE_ID: string;
+declare const MAX_PICKUP_DELAY: number;
+declare const TEMPLATE_SUMMARY: string;
+declare const TEMPLATE_CHOICES: string;
+declare const POLL_WAIT_MS: number;
+
+declare class QRCode {
+  constructor(el: HTMLElement | null, options: {
+    text: string;
+    width: number;
+    height: number;
+    correctLevel: number;
+  });
+  static CorrectLevel: {
+    L: number;
+    M: number;
+    Q: number;
+    H: number;
+  };
+}
diff --git a/src/frontend/meson.build b/src/frontend/meson.build
@@ -0,0 +1,14 @@
+paywall_must = custom_target(
+    'paywall.en.must',
+    input: 'paywall.en.must.j2',
+    output: 'paywall.en.must',
+    command: [
+        find_program('python3'),
+        meson.current_source_dir() / 'generate-paywall.py',
+        '@INPUT@',
+        '@OUTPUT@',
+    ],
+    depend_files: files('paywall.js'),
+    install: true,
+    install_dir: get_option('datadir') / 'paivana' / 'templates',
+)
diff --git a/src/frontend/paywall.en.must.j2 b/src/frontend/paywall.en.must.j2
@@ -0,0 +1,465 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Payment Required</title>
+    <meta http-equiv="content-type" content="text/html;CHARSET=utf-8" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="taler-support" content="uri" />
+    <script>
+      const QR_WIDTH = 300;
+      const QR_HEIGHT = 300;
+      const I18N_PAYMENT_CONFIRMED_LOADING = 'Payment confirmed! Loading page...';
+      const I18N_PAYMENT_CONFIRMED_PROBLEM = 'Payment confirmed, but something went wrong when we tried to obtain the access token. This is a bug, please contact the operator if the issue persists.';
+      const I18N_PAYMENT_CONFIRMED_ERROR = 'Could not reach the server!';
+      const I18N_PAYMENT_CONFIRMED_NO_ORDER = 'Unexpected 200 OK response without an order_id. Trying again.';
+      const I18N_PAYMENT_NETWORK_PROBLEM = 'Network error! Retrying...';
+      const MERCHANT_BACKEND = '{{ merchant_backend }}';
+      const MERCHANT_TEMPLATE_ID = '{{ template_id }}';
+      const MAX_PICKUP_DELAY = {{ max_pickup_delay }}; // in seconds
+      const TEMPLATE_SUMMARY = '{{ summary }}';
+      const TEMPLATE_CHOICES = '{{{ choices }}}';
+      const POLL_WAIT_MS = 30000;
+    </script>
+    <script>
+@< include 'paywall.js' >@
+    </script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      :root {
+        --bg: rgb(226, 232, 240);
+        --surface: white;
+        --border: rgba(255, 255, 255, 0.07);
+        --border-md: rgba(255, 255, 255, 0.13);
+        --text: black;
+        --muted: #7a7d8a;
+        --primary: #0042b3;
+        --primary-container: #d3deff;
+        --on-primary-container: #00134a;
+        --on-primary: #ffffff;
+        --primary-dim: #7a7d8a;
+        --radius-lg: 18px;
+        --radius-md: 10px;
+        --radius-sm: 7px;
+      }
+
+      body {
+        font-family: sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      .card {
+        position: relative;
+        z-index: 1;
+        background: var(--surface);
+        border: 1px solid var(--border-md);
+        border-radius: var(--radius-lg);
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        box-shadow:
+          0 0 0 1px rgba(0, 0, 0, 0.4),
+          0 32px 80px rgba(0, 0, 0, 0.5);
+      }
+      .card-container {
+        padding: 10px;
+        width: 100%;
+        max-width: 400px;
+        margin: auto;
+        margin-top: 0px;
+      }
+
+      /* compact header row */
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        width: 100%;
+      }
+      .lock-icon {
+        width: 28px;
+        height: 28px;
+        flex-shrink: 0;
+        opacity: 0.9;
+      }
+      .header-text h1 {
+        font-size: 15px;
+        font-weight: 500;
+        color: var(--text);
+        line-height: 1.2;
+      }
+      .header-text p {
+        font-size: 12px;
+        color: var(--muted);
+        margin-top: 2px;
+      }
+
+      /* QR section */
+      .qr-wrap {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+      }
+      .qr-frame {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .qr-frame svg {
+        display: block;
+      }
+      .qr-taler-logo {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        align-content: center;
+        display: flex;
+        background-color: transparent;
+      }
+      .qr-taler-frame {
+        max-width: 400px;
+        margin: auto;
+        padding: 10px;
+        border-radius: 20px;
+        background: conic-gradient(
+            from var(--angle),
+            #0042b3 0deg,
+            #f1f1f4 20deg,
+            #f1f1f4 150deg,
+            #f1f1f4 160deg,
+            #0042b3 180deg,
+            #f1f1f4 200deg,
+            #f1f1f4 330deg,
+            #f1f1f4 340deg,
+            #0042b3
+          )
+          padding-box;
+        animation: 10s linear 0s infinite normal none running rotate;
+        position: relative;
+      }
+      .qr-label {
+        font-size: 11px;
+        color: var(--muted);
+        letter-spacing: 0.06em;
+      }
+      .qr-legend {
+        text-align: center;
+      }
+
+      /* amount badge */
+      .amount-badge {
+        background: rgba(200, 241, 53, 0.08);
+        border: 1px solid rgba(200, 241, 53, 0.2);
+        border-radius: 99px;
+        padding: 5px 14px;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--primary);
+        letter-spacing: 0.04em;
+      }
+      .merchant-host {
+        font-size: small;
+        color: gray;
+      }
+      .template-summary {
+        text-align: center;
+      }
+      .pay-choices {
+        cursor: pointer;
+      }
+      .upside-down {
+        rotate: 180deg;
+      }
+      .hidden {
+        display: none;
+      }
+
+      /* steps */
+      .steps {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .step {
+        display: flex;
+        align-items: flex-start;
+        gap: 11px;
+        color: var(--on-primary-container);
+        background: var(--primary-container);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: 11px 13px;
+        transition: border-color 0.2s;
+      }
+      a.step {
+        border: 1px solid var(--primary);
+      }
+      .step:hover {
+        border-color: var(--border-md);
+      }
+      .step-num {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--primary-container);
+        border: 1px solid var(--primary);
+        color: var(--primary);
+        font-size: 11px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-top: 1px;
+      }
+      .step-body {
+      }
+      .step-title {
+        font-size: 18px;
+        font-weight: 500;
+        color: var(--text);
+        margin-bottom: 2px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .step-desc {
+        font-size: 12px;
+        color: var(--muted);
+        line-height: 1.55;
+      }
+
+      /* cta button */
+      .cta {
+        padding-top: 13px;
+        padding-bottom: 13px;
+        padding-left: 26px;
+        padding-right: 26px;
+        border-radius: var(--radius-md);
+        background: var(--primary);
+        color: var(--on-primary);
+        border: none;
+        font-size: 20px;
+        font-weight: 500;
+        cursor: pointer;
+        letter-spacing: 0.01em;
+      }
+      .cta:hover {
+        background: var(--primary-dim);
+      }
+      .cta:active {
+        transform: scale(0.98);
+      }
+      .button-cta {
+        display: flex;
+        margin: auto;
+      }
+
+      /* footer note */
+      .footer-note {
+        font-size: 11px;
+        color: var(--muted);
+        text-align: center;
+        line-height: 1.6;
+      }
+      .footer-note a {
+        color: var(--muted);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
+      .header {
+        width: 100%;
+        padding: 8px;
+        margin-bottom: 10px;
+        display: flex;
+        background-color: white;
+        border: 1px black solid;
+      }
+      .footer {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        padding: 8px;
+        display: flex;
+        justify-content: center;
+        background-color: white;
+        border: 1px black solid;
+        z-index: 2;
+        flex-direction: column;
+      }
+      .footer p {
+        text-wrap-mode: wrap;
+      }
+      body {
+        margin-bottom: 60px;
+      }
+      svg.lock-icon {
+        fill: var(--primary-container);
+        stroke: var(--primary);
+      }
+      @property --angle {
+        syntax: "<angle>";
+        initial-value: 0deg;
+        inherits: false;
+      }
+
+      @keyframes rotate {
+        to {
+          --angle: 360deg;
+        }
+      }
+    </style>
+    <!-- download from https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js -->
+    <script integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==">
+var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this.parsedData=[];for(var b=[],d=0,e=this.data.length;e>d;d++){var f=this.data.charCodeAt(d);f>65536?(b[0]=240|(1835008&f)>>>18,b[1]=128|(258048&f)>>>12,b[2]=128|(4032&f)>>>6,b[3]=128|63&f):f>2048?(b[0]=224|(61440&f)>>>12,b[1]=128|(4032&f)>>>6,b[2]=128|63&f):f>128?(b[0]=192|(1984&f)>>>6,b[1]=128|63&f):b[0]=f,this.parsedData=this.parsedData.concat(b)}this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(a,b){this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}function i(a,b){if(void 0==a.length)throw new Error(a.length+"/"+b);for(var c=0;c<a.length&&0==a[c];)c++;this.num=new Array(a.length-c+b);for(var d=0;d<a.length-c;d++)this.num[d]=a[d+c]}function j(a,b){this.totalCount=a,this.dataCount=b}function k(){this.buffer=[],this.length=0}function m(){return"undefined"!=typeof CanvasRenderingContext2D}function n(){var a=!1,b=navigator.userAgent;return/android/i.test(b)&&(a=!0,aMat=b.toString().match(/android ([0-9]\.[0-9])/i),aMat&&aMat[1]&&(a=parseFloat(aMat[1]))),a}function r(a,b){for(var c=1,e=s(a),f=0,g=l.length;g>=f;f++){var h=0;switch(b){case d.L:h=l[f][0];break;case d.M:h=l[f][1];break;case d.Q:h=l[f][2];break;case d.H:h=l[f][3]}if(h>=e)break;c++}if(c>l.length)throw new Error("Too long data");return c}function s(a){var b=encodeURI(a).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return b.length+(b.length!=a?3:0)}a.prototype={getLength:function(){return this.parsedData.length},write:function(a){for(var b=0,c=this.parsedData.length;c>b;b++)a.put(this.parsedData[b],8)}},b.prototype={addData:function(b){var c=new a(b);this.dataList.push(c),this.dataCache=null},isDark:function(a,b){if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b)throw new Error(a+","+b);return this.modules[a][b]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=new Array(this.moduleCount);for(var e=0;e<this.moduleCount;e++)this.modules[d][e]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(a,c),this.typeNumber>=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=b.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,b){for(var c=-1;7>=c;c++)if(!(-1>=a+c||this.moduleCount<=a+c))for(var d=-1;7>=d;d++)-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)},getBestMaskPattern:function(){for(var a=0,b=0,c=0;8>c;c++){this.makeImpl(!0,c);var d=f.getLostPoint(this);(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){var d=a.createEmptyMovieClip(b,c),e=1;this.make();for(var f=0;f<this.modules.length;f++)for(var g=f*e,h=0;h<this.modules[f].length;h++){var i=h*e,j=this.modules[f][h];j&&(d.beginFill(0,100),d.moveTo(i,g),d.lineTo(i+e,g),d.lineTo(i+e,g+e),d.lineTo(i,g+e),d.endFill())}return d},setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(var b=8;b<this.moduleCount-8;b++)null==this.modules[6][b]&&(this.modules[6][b]=0==b%2)},setupPositionAdjustPattern:function(){for(var a=f.getPatternPosition(this.typeNumber),b=0;b<a.length;b++)for(var c=0;c<a.length;c++){var d=a[b],e=a[c];if(null==this.modules[d][e])for(var g=-2;2>=g;g++)for(var h=-2;2>=h;h++)this.modules[d+g][e+h]=-2==g||2==g||-2==h||2==h||0==g&&0==h?!0:!1}},setupTypeNumber:function(a){for(var b=f.getBCHTypeNumber(this.typeNumber),c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[Math.floor(c/3)][c%3+this.moduleCount-8-3]=d}for(var c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[c%3+this.moduleCount-8-3][Math.floor(c/3)]=d}},setupTypeInfo:function(a,b){for(var c=this.errorCorrectLevel<<3|b,d=f.getBCHTypeInfo(c),e=0;15>e;e++){var g=!a&&1==(1&d>>e);6>e?this.modules[e][8]=g:8>e?this.modules[e+1][8]=g:this.modules[this.moduleCount-15+e][8]=g}for(var e=0;15>e;e++){var g=!a&&1==(1&d>>e);8>e?this.modules[8][this.moduleCount-e-1]=g:9>e?this.modules[8][15-e-1+1]=g:this.modules[8][15-e-1]=g}this.modules[this.moduleCount-8][8]=!a},mapData:function(a,b){for(var c=-1,d=this.moduleCount-1,e=7,g=0,h=this.moduleCount-1;h>0;h-=2)for(6==h&&h--;;){for(var i=0;2>i;i++)if(null==this.modules[d][h-i]){var j=!1;g<a.length&&(j=1==(1&a[g]>>>e));var k=f.getMask(b,d,h-i);k&&(j=!j),this.modules[d][h-i]=j,e--,-1==e&&(g++,e=7)}if(d+=c,0>d||this.moduleCount<=d){d-=c,c=-c;break}}}},b.PAD0=236,b.PAD1=17,b.createData=function(a,c,d){for(var e=j.getRSBlocks(a,c),g=new k,h=0;h<d.length;h++){var i=d[h];g.put(i.mode,4),g.put(i.getLength(),f.getLengthInBits(i.mode,a)),i.write(g)}for(var l=0,h=0;h<e.length;h++)l+=e[h].dataCount;if(g.getLengthInBits()>8*l)throw new Error("code length overflow. ("+g.getLengthInBits()+">"+8*l+")");for(g.getLengthInBits()+4<=8*l&&g.put(0,4);0!=g.getLengthInBits()%8;)g.putBit(!1);for(;;){if(g.getLengthInBits()>=8*l)break;if(g.put(b.PAD0,8),g.getLengthInBits()>=8*l)break;g.put(b.PAD1,8)}return b.createBytes(g,e)},b.createBytes=function(a,b){for(var c=0,d=0,e=0,g=new Array(b.length),h=new Array(b.length),j=0;j<b.length;j++){var k=b[j].dataCount,l=b[j].totalCount-k;d=Math.max(d,k),e=Math.max(e,l),g[j]=new Array(k);for(var m=0;m<g[j].length;m++)g[j][m]=255&a.buffer[m+c];c+=k;var n=f.getErrorCorrectPolynomial(l),o=new i(g[j],n.getLength()-1),p=o.mod(n);h[j]=new Array(n.getLength()-1);for(var m=0;m<h[j].length;m++){var q=m+p.getLength()-h[j].length;h[j][m]=q>=0?p.get(q):0}}for(var r=0,m=0;m<b.length;m++)r+=b[m].totalCount;for(var s=new Array(r),t=0,m=0;d>m;m++)for(var j=0;j<b.length;j++)m<g[j].length&&(s[t++]=g[j][m]);for(var m=0;e>m;m++)for(var j=0;j<b.length;j++)m<h[j].length&&(s[t++]=h[j][m]);return s};for(var c={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},d={L:1,M:0,Q:3,H:2},e={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7},f={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(a){for(var b=a<<10;f.getBCHDigit(b)-f.getBCHDigit(f.G15)>=0;)b^=f.G15<<f.getBCHDigit(b)-f.getBCHDigit(f.G15);return(a<<10|b)^f.G15_MASK},getBCHTypeNumber:function(a){for(var b=a<<12;f.getBCHDigit(b)-f.getBCHDigit(f.G18)>=0;)b^=f.G18<<f.getBCHDigit(b)-f.getBCHDigit(f.G18);return a<<12|b},getBCHDigit:function(a){for(var b=0;0!=a;)b++,a>>>=1;return b},getPatternPosition:function(a){return f.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,b,c){switch(a){case e.PATTERN000:return 0==(b+c)%2;case e.PATTERN001:return 0==b%2;case e.PATTERN010:return 0==c%3;case e.PATTERN011:return 0==(b+c)%3;case e.PATTERN100:return 0==(Math.floor(b/2)+Math.floor(c/3))%2;case e.PATTERN101:return 0==b*c%2+b*c%3;case e.PATTERN110:return 0==(b*c%2+b*c%3)%2;case e.PATTERN111:return 0==(b*c%3+(b+c)%2)%2;default:throw new Error("bad maskPattern:"+a)}},getErrorCorrectPolynomial:function(a){for(var b=new i([1],0),c=0;a>c;c++)b=b.multiply(new i([1,g.gexp(c)],0));return b},getLengthInBits:function(a,b){if(b>=1&&10>b)switch(a){case c.MODE_NUMBER:return 10;case c.MODE_ALPHA_NUM:return 9;case c.MODE_8BIT_BYTE:return 8;case c.MODE_KANJI:return 8;default:throw new Error("mode:"+a)}else if(27>b)switch(a){case c.MODE_NUMBER:return 12;case c.MODE_ALPHA_NUM:return 11;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 10;default:throw new Error("mode:"+a)}else{if(!(41>b))throw new Error("type:"+b);switch(a){case c.MODE_NUMBER:return 14;case c.MODE_ALPHA_NUM:return 13;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 12;default:throw new Error("mode:"+a)}}},getLostPoint:function(a){for(var b=a.getModuleCount(),c=0,d=0;b>d;d++)for(var e=0;b>e;e++){for(var f=0,g=a.isDark(d,e),h=-1;1>=h;h++)if(!(0>d+h||d+h>=b))for(var i=-1;1>=i;i++)0>e+i||e+i>=b||(0!=h||0!=i)&&g==a.isDark(d+h,e+i)&&f++;f>5&&(c+=3+f-5)}for(var d=0;b-1>d;d++)for(var e=0;b-1>e;e++){var j=0;a.isDark(d,e)&&j++,a.isDark(d+1,e)&&j++,a.isDark(d,e+1)&&j++,a.isDark(d+1,e+1)&&j++,(0==j||4==j)&&(c+=3)}for(var d=0;b>d;d++)for(var e=0;b-6>e;e++)a.isDark(d,e)&&!a.isDark(d,e+1)&&a.isDark(d,e+2)&&a.isDark(d,e+3)&&a.isDark(d,e+4)&&!a.isDark(d,e+5)&&a.isDark(d,e+6)&&(c+=40);for(var e=0;b>e;e++)for(var d=0;b-6>d;d++)a.isDark(d,e)&&!a.isDark(d+1,e)&&a.isDark(d+2,e)&&a.isDark(d+3,e)&&a.isDark(d+4,e)&&!a.isDark(d+5,e)&&a.isDark(d+6,e)&&(c+=40);for(var k=0,e=0;b>e;e++)for(var d=0;b>d;d++)a.isDark(d,e)&&k++;var l=Math.abs(100*k/b/b-50)/5;return c+=10*l}},g={glog:function(a){if(1>a)throw new Error("glog("+a+")");return g.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;a>=256;)a-=255;return g.EXP_TABLE[a]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},h=0;8>h;h++)g.EXP_TABLE[h]=1<<h;for(var h=8;256>h;h++)g.EXP_TABLE[h]=g.EXP_TABLE[h-4]^g.EXP_TABLE[h-5]^g.EXP_TABLE[h-6]^g.EXP_TABLE[h-8];for(var h=0;255>h;h++)g.LOG_TABLE[g.EXP_TABLE[h]]=h;i.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var b=new Array(this.getLength()+a.getLength()-1),c=0;c<this.getLength();c++)for(var d=0;d<a.getLength();d++)b[c+d]^=g.gexp(g.glog(this.get(c))+g.glog(a.get(d)));return new i(b,0)},mod:function(a){if(this.getLength()-a.getLength()<0)return this;for(var b=g.glog(this.get(0))-g.glog(a.get(0)),c=new Array(this.getLength()),d=0;d<this.getLength();d++)c[d]=this.get(d);for(var d=0;d<a.getLength();d++)c[d]^=g.gexp(g.glog(a.get(d))+b);return new i(c,0).mod(a)}},j.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],j.getRSBlocks=function(a,b){var c=j.getRsBlockTable(a,b);if(void 0==c)throw new Error("bad rs block @ typeNumber:"+a+"/errorCorrectLevel:"+b);for(var d=c.length/3,e=[],f=0;d>f;f++)for(var g=c[3*f+0],h=c[3*f+1],i=c[3*f+2],k=0;g>k;k++)e.push(new j(h,i));return e},j.getRsBlockTable=function(a,b){switch(b){case d.L:return j.RS_BLOCK_TABLE[4*(a-1)+0];case d.M:return j.RS_BLOCK_TABLE[4*(a-1)+1];case d.Q:return j.RS_BLOCK_TABLE[4*(a-1)+2];case d.H:return j.RS_BLOCK_TABLE[4*(a-1)+3];default:return void 0}},k.prototype={get:function(a){var b=Math.floor(a/8);return 1==(1&this.buffer[b]>>>7-a%8)},put:function(a,b){for(var c=0;b>c;c++)this.putBit(1==(1&a>>>b-c-1))},getLengthInBits:function(){return this.length},putBit:function(a){var b=Math.floor(this.length/8);this.buffer.length<=b&&this.buffer.push(0),a&&(this.buffer[b]|=128>>>this.length%8),this.length++}};var l=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]],o=function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){function g(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",a);for(var d in b)b.hasOwnProperty(d)&&c.setAttribute(d,b[d]);return c}var b=this._htOption,c=this._el,d=a.getModuleCount();Math.floor(b.width/d),Math.floor(b.height/d),this.clear();var h=g("svg",{viewBox:"0 0 "+String(d)+" "+String(d),width:"100%",height:"100%",fill:b.colorLight});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),c.appendChild(h),h.appendChild(g("rect",{fill:b.colorDark,width:"1",height:"1",id:"template"}));for(var i=0;d>i;i++)for(var j=0;d>j;j++)if(a.isDark(i,j)){var k=g("use",{x:String(i),y:String(j)});k.setAttributeNS("http://www.w3.org/1999/xlink","href","#template"),h.appendChild(k)}},a.prototype.clear=function(){for(;this._el.hasChildNodes();)this._el.removeChild(this._el.lastChild)},a}(),p="svg"===document.documentElement.tagName.toLowerCase(),q=p?o:m()?function(){function a(){this._elImage.src=this._elCanvas.toDataURL("image/png"),this._elImage.style.display="block",this._elCanvas.style.display="none"}function d(a,b){var c=this;if(c._fFail=b,c._fSuccess=a,null===c._bSupportDataURI){var d=document.createElement("img"),e=function(){c._bSupportDataURI=!1,c._fFail&&_fFail.call(c)},f=function(){c._bSupportDataURI=!0,c._fSuccess&&c._fSuccess.call(c)};return d.onabort=e,d.onerror=e,d.onload=f,d.src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",void 0}c._bSupportDataURI===!0&&c._fSuccess?c._fSuccess.call(c):c._bSupportDataURI===!1&&c._fFail&&c._fFail.call(c)}if(this._android&&this._android<=2.1){var b=1/window.devicePixelRatio,c=CanvasRenderingContext2D.prototype.drawImage;CanvasRenderingContext2D.prototype.drawImage=function(a,d,e,f,g,h,i,j){if("nodeName"in a&&/img/i.test(a.nodeName))for(var l=arguments.length-1;l>=1;l--)arguments[l]=arguments[l]*b;else"undefined"==typeof j&&(arguments[1]*=b,arguments[2]*=b,arguments[3]*=b,arguments[4]*=b);c.apply(this,arguments)}}var e=function(a,b){this._bIsPainted=!1,this._android=n(),this._htOption=b,this._elCanvas=document.createElement("canvas"),this._elCanvas.width=b.width,this._elCanvas.height=b.height,a.appendChild(this._elCanvas),this._el=a,this._oContext=this._elCanvas.getContext("2d"),this._bIsPainted=!1,this._elImage=document.createElement("img"),this._elImage.style.display="none",this._el.appendChild(this._elImage),this._bSupportDataURI=null};return e.prototype.draw=function(a){var b=this._elImage,c=this._oContext,d=this._htOption,e=a.getModuleCount(),f=d.width/e,g=d.height/e,h=Math.round(f),i=Math.round(g);b.style.display="none",this.clear();for(var j=0;e>j;j++)for(var k=0;e>k;k++){var l=a.isDark(j,k),m=k*f,n=j*g;c.strokeStyle=l?d.colorDark:d.colorLight,c.lineWidth=1,c.fillStyle=l?d.colorDark:d.colorLight,c.fillRect(m,n,f,g),c.strokeRect(Math.floor(m)+.5,Math.floor(n)+.5,h,i),c.strokeRect(Math.ceil(m)-.5,Math.ceil(n)-.5,h,i)}this._bIsPainted=!0},e.prototype.makeImage=function(){this._bIsPainted&&d.call(this,a)},e.prototype.isPainted=function(){return this._bIsPainted},e.prototype.clear=function(){this._oContext.clearRect(0,0,this._elCanvas.width,this._elCanvas.height),this._bIsPainted=!1},e.prototype.round=function(a){return a?Math.floor(1e3*a)/1e3:a},e}():function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){for(var b=this._htOption,c=this._el,d=a.getModuleCount(),e=Math.floor(b.width/d),f=Math.floor(b.height/d),g=['<table style="border:0;border-collapse:collapse;">'],h=0;d>h;h++){g.push("<tr>");for(var i=0;d>i;i++)g.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:'+e+"px;height:"+f+"px;background-color:"+(a.isDark(h,i)?b.colorDark:b.colorLight)+';"></td>');g.push("</tr>")}g.push("</table>"),c.innerHTML=g.join("");var j=c.childNodes[0],k=(b.width-j.offsetWidth)/2,l=(b.height-j.offsetHeight)/2;k>0&&l>0&&(j.style.margin=l+"px "+k+"px")},a.prototype.clear=function(){this._el.innerHTML=""},a}();QRCode=function(a,b){if(this._htOption={width:256,height:256,typeNumber:4,colorDark:"#000000",colorLight:"#ffffff",correctLevel:d.H},"string"==typeof b&&(b={text:b}),b)for(var c in b)this._htOption[c]=b[c];"string"==typeof a&&(a=document.getElementById(a)),this._android=n(),this._el=a,this._oQRCode=null,this._oDrawing=new q(this._el,this._htOption),this._htOption.text&&this.makeCode(this._htOption.text)},QRCode.prototype.makeCode=function(a){this._oQRCode=new b(r(a,this._htOption.correctLevel),this._htOption.correctLevel),this._oQRCode.addData(a),this._oQRCode.make(),this._el.title=a,this._oDrawing.draw(this._oQRCode),this.makeImage()},QRCode.prototype.makeImage=function(){"function"==typeof this._oDrawing.makeImage&&(!this._android||this._android>=3)&&this._oDrawing.makeImage()},QRCode.prototype.clear=function(){this._oDrawing.clear()},QRCode.CorrectLevel=d}();
+  </script>
+  </head>
+  <body>
+    <div class="header">
+      <svg
+        class="lock-icon"
+        viewBox="0 0 28 28"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect x="5" y="12" width="18" height="13" rx="3" stroke-width="1" />
+        <path
+          d="M9.5 12V9a4.5 4.5 0 0 1 9 0v3"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          fill="none"
+        />
+        <circle cx="14" cy="18" r="2" />
+        <line
+          x1="14"
+          y1="20"
+          x2="14"
+          y2="22"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+      </svg>
+      <div class="header-text">
+        <h1>Paivana paywall</h1>
+        <p>The resource requires a payment to access.</p>
+      </div>
+    </div>
+
+    <div class="card-container">
+      <div class="card">
+        <!-- QR code + amount -->
+        <div class="qr-wrap">
+          {{#summary}}
+          <p class="template-summary">{{ summary }}</p>
+          {{/summary}}
+          <p class="merchant-host">{{ merchant_backend }}</p>
+
+          <div class="qr-taler-frame">
+            <div style="padding: 10px; border-radius: 20px; background-color: white">
+              <div class="qr-frame" id="qrcode" style="margin: 5px" >
+                </div>
+            </div>
+            <div class="qr-taler-logo">
+              <!-- Taler Logo -->
+              <div style="width: 100px; height: 50px" >
+                <svg xmlns="http://www.w3.org/2000/svg"  id="screenshot-b8718ead-4592-805f-8007-a9ef55f0a41b" viewBox="0 0 200 95" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41b"><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g fill="none"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a41b"><rect width="200" height="95" class="frame-background" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(255, 255, 255); fill-opacity: 1;" ry="47.5" rx="47.5" y="0"/></g><g class="frame-children"><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41c" width="670" height="300" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41d" style="display: none;"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a41d"><rect width="180" height="80.76923076923094" x="10" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="7.115384615384301"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41e" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a424"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a424"><path d="M87.60791015625,8.12158203125C101.56881713867188,8.12158203125,113.69378662109375,16.55859375,119.81179809570312,28.943603515625L114.60223388671875,28.943603515625C108.9432373046875,19.34130859375,98.96926879882812,12.96484375,87.60791015625,12.96484375C69.97454833984375,12.96484375,55.679962158203125,28.32177734375,55.679962158203125,47.265380859375C55.679962158203125,56.53759765625,59.105865478515625,64.94921875,64.67062377929688,71.121826171875C63.468505859375,72.1279296875,62.188629150390625,73.031494140625,60.841827392578125,73.8203125C54.84014892578125,66.8427734375,51.1715087890625,57.515380859375,51.1715087890625,47.265380859375C51.1715087890625,25.64697265625,67.48464965820312,8.12158203125,87.60791015625,8.12158203125ZM119.71417236328125,65.7861328125C113.56512451171875,78.06298828125,101.49423217773438,86.409423828125,87.60791015625,86.409423828125C86.66519165039062,86.409423828125,85.73080444335938,86.370849609375,84.80609130859375,86.29541015625C87.53939819335938,84.894287109375,90.10183715820312,83.171875,92.45233154296875,81.17333984375C101.69497680664062,79.661865234375,109.63381958007812,73.891845703125,114.48382568359375,65.7861328125Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a425"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a425"><path d="M67.50363159179688,8.12158203125C68.44625854492188,8.12158203125,69.380615234375,8.16015625,70.305419921875,8.235595703125C67.57211303710938,9.63671875,65.00958251953125,11.35888671875,62.659088134765625,13.357666015625C47.324951171875,15.865234375,35.575653076171875,30.091064453125,35.575653076171875,47.265380859375C35.575653076171875,60.06689453125,42.10455322265625,71.228759765625,51.77911376953125,77.1220703125C50.351959228515625,77.362060546875,48.8892822265625,77.4873046875,47.399322509765625,77.4873046875C46.289306640625,77.4873046875,45.19500732421875,77.416015625,44.118560791015625,77.281494140625C36.14129638671875,70.10107421875,31.067230224609375,59.32080078125,31.067230224609375,47.265380859375C31.067230224609375,25.64697265625,47.38037109375,8.12158203125,67.50363159179688,8.12158203125ZM72.34814453125,81.17333984375C81.5909423828125,79.661865234375,89.52969360351562,73.8916015625,94.3797607421875,65.78564453125L99.61007690429688,65.78564453125C93.46109008789062,78.062744140625,81.39016723632812,86.409423828125,67.50363159179688,86.409423828125C66.56088256835938,86.409423828125,65.62661743164062,86.370849609375,64.70181274414062,86.29541015625C67.4349365234375,84.89404296875,69.99777221679688,83.172119140625,72.34814453125,81.17333984375ZM94.497802734375,28.943603515625C91.6864013671875,24.174072265625,87.81045532226562,20.2001953125,83.22808837890625,17.40869140625C84.65524291992188,17.1689453125,86.11785888671875,17.04345703125,87.60791015625,17.04345703125C88.71786499023438,17.04345703125,89.81222534179688,17.114990234375,90.888671875,17.249267578125C94.485107421875,20.486572265625,97.49151611328125,24.455810546875,99.70870971679688,28.943603515625Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a426"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a426"><path d="M47.399322509765625,8.12158203125C48.352447509765625,8.12158203125,49.296783447265625,8.161376953125,50.23150634765625,8.238525390625C47.5032958984375,9.637451171875,44.945098876953125,11.356689453125,42.59844970703125,13.35107421875C27.242950439453125,15.839111328125,15.47137451171875,30.074951171875,15.47137451171875,47.265380859375C15.47137451171875,66.208984375,29.766082763671875,81.56591796875,47.399322509765625,81.56591796875C58.68267822265625,81.56591796875,68.59854125976562,75.277587890625,74.27731323242188,65.78564453125L79.50582885742188,65.78564453125C73.35687255859375,78.062744140625,61.285888671875,86.409423828125,47.399322509765625,86.409423828125C27.276123046875,86.409423828125,10.963043212890625,68.884033203125,10.963043212890625,47.265380859375C10.963043212890625,25.64697265625,27.276123046875,8.12158203125,47.399322509765625,8.12158203125ZM74.39288330078125,28.943603515625C73.218017578125,26.950927734375,71.857666015625,25.096435546875,70.337158203125,23.40966796875C71.53936767578125,22.40380859375,72.81900024414062,21.49951171875,74.1656494140625,20.7109375C76.29071044921875,23.181640625,78.12283325195312,25.947021484375,79.60369873046875,28.943603515625Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a41f"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a41f"><path d="M78.18096923828125,37.995361328125L86.3848876953125,37.995361328125L86.3848876953125,33.469482421875L65.39480590820312,33.469482421875L65.39480590820312,37.995361328125L73.59881591796875,37.995361328125L73.59881591796875,61.259765625L78.18096923828125,61.259765625Z"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a420"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a420"><path d="M92.96798706054688,54.550537109375L105.19992065429688,54.550537109375L107.82388305664062,61.259765625L112.62802124023438,61.259765625L101.24588012695312,33.27099609375L97.03329467773438,33.27099609375L85.651123046875,61.259765625L90.30743408203125,61.259765625ZM103.53701782226562,50.222900390625L94.63125610351562,50.222900390625L99.06564331054688,39.10693359375Z"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a421"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a421"><path d="M120.87139892578125,33.469482421875L116.76959228515625,33.469482421875L116.76959228515625,61.259765625L135.17013549804688,61.259765625L135.17013549804688,56.853271484375C130.4039306640625,56.853271484375,125.63763427734375,56.853271484375,120.87139892578125,56.853271484375Z"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a422"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a422"><path d="M159.07958984375,33.469482421875L139.93722534179688,33.469482421875L139.93722534179688,61.259765625L159.264404296875,61.259765625L159.264404296875,56.853271484375L144.445556640625,56.853271484375L144.445556640625,49.428955078125L157.41665649414062,49.428955078125L157.41665649414062,45.0224609375L144.445556640625,45.0224609375L144.445556640625,37.876220703125L159.07958984375,37.876220703125Z"/></g></g><g id="shape-b8718ead-4592-805f-8007-a9ef55f0a423"><g class="fills" id="fills-b8718ead-4592-805f-8007-a9ef55f0a423"><path d="M181.21524047851562,42.541259765625C181.21524047851562,43.976806640625,180.73483276367188,45.121826171875,179.767822265625,45.968505859375C178.80709838867188,46.822265625,177.5074462890625,47.245361328125,175.87518310546875,47.245361328125L169.20486450195312,47.245361328125L169.20486450195312,37.876220703125L175.83828735351562,37.876220703125C177.54434204101562,37.876220703125,178.86849975585938,38.2666015625,179.80490112304688,39.053955078125C180.74722290039062,39.8349609375,181.21524047851562,40.999267578125,181.21524047851562,42.541259765625ZM186.64749145507812,61.259765625L179.6632080078125,50.739013671875C180.5745849609375,50.474365234375,181.40618896484375,50.09765625,182.15771484375,49.607666015625C182.908935546875,49.1181640625,183.55581665039062,48.5224609375,184.09768676757812,47.8212890625C184.63983154296875,47.11962890625,185.06466674804688,46.312744140625,185.37261962890625,45.399658203125C185.68048095703125,44.486572265625,185.83438110351562,43.447509765625,185.83438110351562,42.282958984375C185.83438110351562,40.93310546875,185.61279296875,39.709228515625,185.16928100585938,38.610595703125C184.72586059570312,37.512451171875,184.09158325195312,36.5859375,183.26632690429688,35.83154296875C182.44088745117188,35.077392578125,181.43087768554688,34.4951171875,180.236083984375,34.084716796875C179.04104614257812,33.67431640625,177.70452880859375,33.469482421875,176.22647094726562,33.469482421875L164.696533203125,33.469482421875L164.696533203125,61.259765625L169.20486450195312,61.259765625L169.20486450195312,51.572998046875L174.91445922851562,51.572998046875L181.28903198242188,61.259765625Z"/></g></g></g></g></g></g></g></g></g></svg>
+              </div>
+            </div>
+          </div>
+
+          <p class="qr-legend">Scan the QR with a GNU Taler wallet</p>
+        </div>
+
+        <!-- instructions -->
+        <div class="steps">
+          <a href="https://www.taler.net/wallet" target="_blank" class="step">
+            <div class="step-num">1</div>
+            <div class="step-body">
+              <p class="step-title">Install</p>
+              <p class="step-desc">
+                If you don't have one yet you can follow the instruction on
+                www.taler.net.
+              </p>
+            </div>
+          </a>
+          {{#has_choices}}
+          <div class="step pay-choices" onclick="toggleDescription(this)">
+            <div class="step-num">2</div>
+            <div class="step-body ">
+              <p class="step-title">
+              <span>Pay {{default_choice.amount}} or see options</span>
+              <svg name="toggle-arrow" data-accordion-icon="" class="arrow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"></path></svg>
+              </p>
+              <p class="step-desc">
+                Your wallet will display the details of the transaction.
+                <ul class="price-list hidden">
+                  {{#choices}}
+                  {{#description}}
+                  <li>{{amount}}: {{description}}</li>
+                  {{/description}}
+                  {{^description}}
+                  <li>{{amount}}</li>
+                  {{/description}}
+                  {{/choices}}
+                </ul>
+              </p>
+            </div>
+          </div>
+          {{/has_choices}}
+          {{^has_choices}}
+          <div class="step">
+            <div class="step-num">2</div>
+            <div class="step-body">
+              <p class="step-title">Pay {{default_choice.amount}}</p>
+              <p class="step-desc">
+                Your wallet will display the details of the transaction.
+              </p>
+            </div>
+          </div>
+          {{/has_choices}}
+          <div class="step">
+            <div class="step-num">3</div>
+            <div class="step-body">
+              <p class="step-title">Access</p>
+              <p class="step-desc">
+                You will be automatically redirected when confirmed.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <p class="footer-note">
+          Access is granted automatically once the transaction confirms.<br />
+          Need help? <a href="https://www.taler.net/en/">Contact support</a>
+        </p>
+      </div>
+    </div>
+
+    <div class="footer">
+      <p id="error-message"> </p>
+      <div class="button-cta">
+        <a target="_blank" id="taler-link" href="" class="cta">Pay now</a>
+      </div>
+    </div>
+
+    <script>
+      main();
+    </script>
+  </body>
+</html>
diff --git a/src/frontend/paywall.js b/src/frontend/paywall.js
@@ -0,0 +1,252 @@
+/*
+ This file is part of GNU Taler
+ (C) 2026 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU Affero General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License along with
+ GNU Anastasis; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+// @ts-check
+
+const website = atob(window.location.hash.substring(1));
+const encTable = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
+// cap at 100 years, we don't deal well with 'forever' otherwise
+const usePickupDelay = Math.min(MAX_PICKUP_DELAY, 60 * 60 * 24 * 356 * 100);
+
+// Strip trailing slash so we can append /templateId cleanly.
+const merchantBase = MERCHANT_BACKEND.replace(/\/$/, "");
+const merchantUrl = new URL(merchantBase);
+const merchantProto = merchantUrl.protocol;
+const suffix = merchantProto === "http:" ? "+http" : "";
+const merchantHost = merchantUrl.host;
+const merchantPath = merchantUrl.pathname;
+const expTime = Math.floor(Date.now() / 1000) + usePickupDelay;
+
+/**
+ * @param {ArrayBuffer} data
+ * @returns {string}
+ */
+function encodeCrock(data) {
+  const dataBytes = new Uint8Array(data);
+  let sb = "";
+  const size = data.byteLength;
+  let bitBuf = 0;
+  let numBits = 0;
+  let pos = 0;
+  while (pos < size || numBits > 0) {
+    if (pos < size && numBits < 5) {
+      const d = dataBytes[pos++];
+      bitBuf = (bitBuf << 8) | d;
+      numBits += 8;
+    }
+    if (numBits < 5) {
+      bitBuf = bitBuf << (5 - numBits);
+      numBits = 5;
+    }
+    const v = (bitBuf >>> (numBits - 5)) & 31;
+    sb += encTable[v];
+    numBits -= 5;
+  }
+  return sb;
+}
+
+/**
+ * @param {number} sec
+ * @returns {Uint8Array}
+ */
+function timestampRoundedToBuffer(sec) {
+  const b = new ArrayBuffer(8);
+  const v = new DataView(b);
+  const numVal = BigInt(sec) * 1000n * 1000n;
+  // The buffer we sign over represents the timestamp in microseconds.
+  v.setBigUint64(0, numVal);
+  return new Uint8Array(b);
+}
+
+/**
+ * @param {number} ms
+ * @returns {Promise<void>}
+ */
+function waitMs(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * @param {BufferSource} data
+ * @returns {Promise<string>}
+ */
+async function sha256b64(data) {
+  const buf = await crypto.subtle.digest("SHA-256", data);
+  return new Uint8Array(buf)
+    .toBase64({ alphabet: "base64url" })
+    .replace(/=+$/, "");
+}
+
+/**
+ * @param {number} curTime
+ * @param {Uint8Array} nonceBuf
+ * @param {string} website
+ * @returns {Promise<string>}
+ */
+async function makePaivanaId(curTime, nonceBuf, website) {
+  const websiteBuf = new TextEncoder().encode(`${website}\0`);
+  const curTimeBuf = timestampRoundedToBuffer(curTime);
+
+  const length = nonceBuf.length + websiteBuf.length + curTimeBuf.length;
+  const buf = new Uint8Array(length);
+  buf.set(nonceBuf, 0);
+  buf.set(websiteBuf, nonceBuf.length);
+  buf.set(curTimeBuf, nonceBuf.length + websiteBuf.length);
+  const hash = await sha256b64(buf);
+  return `${curTime}-${hash}`;
+}
+
+/**
+ * @param {string} order_id
+ * @param {HTMLElement} linkEl
+ * @param {HTMLElement} errorEl
+ * @param {string} nonce
+ * @returns {Promise<void>}
+ */
+async function confirmPayment(order_id, linkEl, errorEl, nonce) {
+  linkEl.textContent = I18N_PAYMENT_CONFIRMED_LOADING;
+  // @ts-ignore
+  linkEl.href = "#";
+  try {
+    const res = await fetch(`${window.location.origin}/.well-known/paivana`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      redirect: "manual",
+      body: JSON.stringify({
+        order_id,
+        nonce,
+        cur_time: { t_s: expTime },
+        website,
+      }),
+    });
+    if (res.status >= 400) {
+      linkEl.textContent = I18N_PAYMENT_CONFIRMED_PROBLEM;
+      errorEl.textContent = JSON.stringify(await res.json());
+    }
+    const dest = res.redirected ? res.url : website;
+    location.href = dest;
+  } catch (e) {
+    console.warn("[paivana] Error trying to confirm payment:", e);
+    errorEl.textContent = I18N_PAYMENT_CONFIRMED_ERROR;
+  }
+}
+
+/**
+ * @param {HTMLElement} el
+ * @returns {void}
+ */
+function toggleDescription(el) {
+  for (const a of el.getElementsByClassName("arrow")) {
+    a.classList.toggle("upside-down");
+  }
+  for (const a of el.getElementsByClassName("price-list")) {
+    a.classList.toggle("hidden");
+  }
+}
+
+async function main() {
+  const nonceBuf = new Uint8Array(16);
+  crypto.getRandomValues(nonceBuf);
+  const nonce = encodeCrock(nonceBuf.buffer);
+
+  const paivanaId = await makePaivanaId(expTime, nonceBuf, website);
+
+  // finally we can compute the talerURI and polling URL
+  const TALER_URI = [
+    `taler${suffix}://pay-template/`,
+    merchantHost,
+    merchantPath,
+    `/`,
+    MERCHANT_TEMPLATE_ID,
+    `?session_id=${encodeURIComponent(paivanaId)}`,
+    `&fulfillment_url=${encodeURIComponent(website)}`,
+  ].join("");
+
+  const PAIVANA_POLL_URL = [
+    merchantBase,
+    "/sessions/",
+    encodeURIComponent(paivanaId),
+    "?fulfillment_url=",
+    encodeURIComponent(website),
+    "&timeout_ms=",
+    POLL_WAIT_MS,
+  ].join("");
+
+  // grab all the html element we need
+  const talerLink = document.getElementById("taler-link");
+  const errorMessageLabel = document.getElementById("error-message");
+  const qrDiv = document.getElementById("qrcode");
+
+  if (talerLink) {
+    // show the taler URI as a link
+    // because we want the user to be able to use the webex
+    // @ts-ignore
+    talerLink.href = TALER_URI;
+  }
+
+  // show the qr code
+  new QRCode(qrDiv, {
+    text: TALER_URI,
+    width: QR_WIDTH,
+    height: QR_HEIGHT,
+    correctLevel: QRCode.CorrectLevel.M,
+  });
+
+  // From here we just poll. Whe the request from polling
+  // returns that the order has been paid we show to the
+  // proxy that we hold the nonce and it should return
+  // us a valid cookie.
+  while (true) {
+    const start = performance.now();
+    try {
+      const res = await fetch(PAIVANA_POLL_URL, { cache: "no-store" });
+      if (res.status === 200) {
+        let info = null;
+        try {
+          info = await res.json();
+        } catch (_) {}
+        console.log("[paivana] Got reponse from backend", res, info);
+        if (info && info.order_id) {
+          if (talerLink && errorMessageLabel) {
+            await confirmPayment(
+              info.order_id,
+              talerLink,
+              errorMessageLabel,
+              nonce,
+            );
+          }
+        } else {
+          if (talerLink) {
+            talerLink.textContent = I18N_PAYMENT_CONFIRMED_NO_ORDER;
+          }
+          const remMs = Math.round(POLL_WAIT_MS - (performance.now() - start));
+          if (remMs > 0) await waitMs(remMs);
+          location.href = website;
+        }
+        return;
+      }
+    } catch (e) {
+      console.warn("[paivana] poll error:", e);
+      if (talerLink) {
+        // @ts-ignore
+        talerLink.href = "#";
+        talerLink.textContent = I18N_PAYMENT_NETWORK_PROBLEM;
+      }
+    }
+    const remMs = Math.round(POLL_WAIT_MS - (performance.now() - start));
+    if (remMs > 0) await waitMs(remMs);
+  }
+}
diff --git a/src/frontend/typecheck.sh b/src/frontend/typecheck.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+if tsc --version &>/dev/null; then
+  TSC=tsc
+elif npx --version &>/dev/null; then
+  TSC="npx --package typescript tsc"
+else
+  echo "TypeScript compiler not found" >&2
+fi
+
+$TSC --allowJs --checkJs --noEmit --target esnext --lib esnext,esnext.bigint,dom paywall.js global.d.ts
diff --git a/src/meson.build b/src/meson.build
@@ -1,3 +1,4 @@
 # This file is in the public domain
 subdir('backend')
 subdir('tests')
+subdir('frontend')