landings: QR center logo as PNG for Android (full Taler wordmark)

Android WebView often failed the official Penpot SVG: root fill=none
and wordmark paths only inherited black from a parent <g>, so the blue
T showed without the "taler" letters. Serve taler-assets qr-logo.png,
keep fixed SVG as fallback, explicit logo size/alt.

configs/bank-landing/index.html

@@ -1437,18 +1437,33 @@ tw balance</pre>
     var WITHDRAW_EXCHANGE = "taler://withdraw-exchange/exchange.hacktivism.ch/";
 
     /* QR_Taler: off-DOM encode → PNG img + center logo (same as shop-pay / merchant) */
+    /* Prefer PNG: Android WebView often fails the official Penpot SVG
+       (root fill="none" + wordmark paths inherit black from a parent <g>
+       → blue T only, missing "taler"). PNG matches taler-assets qr-logo.png. */
     function logoSrc() {
       try {
         var b = document.querySelector("base");
-        if (b && b.href) return new URL("qr-logo.svg", b.href).href;
+        if (b && b.href) return new URL("qr-logo.png", b.href).href;
       } catch (e) {}
-      return "/intro/qr-logo.svg";
+      return "/intro/qr-logo.png";
     }
     function setQrLogo(imgEl) {
       if (!imgEl) return;
+      imgEl.alt = "Taler";
+      imgEl.width = 100;
+      imgEl.height = 50;
+      imgEl.decoding = "async";
       imgEl.src = logoSrc();
       imgEl.onerror = function () {
-        imgEl.style.display = "none";
+        /* fallback to fixed SVG if PNG missing */
+        try {
+          var b = document.querySelector("base");
+          imgEl.src = b && b.href
+            ? new URL("qr-logo.svg", b.href).href
+            : "/intro/qr-logo.svg";
+        } catch (e2) {
+          imgEl.style.display = "none";
+        }
       };
       imgEl.style.display = "";
     }

configs/bank-landing/shop-pay.css

@@ -123,7 +123,7 @@ button.shop-item {
   background: #fff;
   image-rendering: pixelated;
 }
-/* Center logo plate — official qr-logo (webui uses ~100×50 on large QR) */
+/* Center logo plate — official qr-logo.png (webui ~100×50; PNG for Android) */
 .goa-pay-taler-qr__logo {
   position: absolute;
   top: 50%;
@@ -132,8 +132,11 @@ button.shop-item {
   width: 28%;
   height: auto;
   max-width: 100px;
+  aspect-ratio: 200 / 95;
+  object-fit: contain;
   pointer-events: none;
-  background: transparent;
+  background: #fff;
+  border-radius: 4px;
 }
 
 /* Settlement: collapsed by default, expand on click */

configs/bank-landing/shop-pay.js

@@ -3,7 +3,7 @@
  * Flow: POST templates/{id} → taler://pay/… + payto links.
  *
  * QR display matches taler-merchant-webui QR_Taler
- * (@gnu-taler/web-util QR.tsx): animated #0042B3 conic ring + qr-logo.svg.
+ * (@gnu-taler/web-util QR.tsx): animated #0042B3 conic ring + qr-logo.png.
  * Uses qrcode-generator (same lib as webui) via global QRCode if present,
  * else falls back to canvas from qrcode.min.js (davidshimjs).
  */
@@ -21,7 +21,8 @@
   }
 
   function logoSrc() {
-    return introBase() + "qr-logo.svg";
+    /* PNG: Android often drops SVG wordmark fill inheritance (missing "taler") */
+    return introBase() + "qr-logo.png";
   }
 
   function templateHttps(productId) {
@@ -214,9 +215,13 @@
 
   function setLogo(imgEl) {
     if (!imgEl) return;
+    imgEl.alt = "Taler";
+    imgEl.width = 100;
+    imgEl.height = 50;
+    imgEl.decoding = "async";
     imgEl.src = logoSrc();
     imgEl.onerror = function () {
-      imgEl.style.display = "none";
+      imgEl.src = introBase() + "qr-logo.svg";
     };
     imgEl.style.display = "";
   }

configs/merchant-landing/shop-pay.css

@@ -123,7 +123,7 @@ button.shop-item {
   background: #fff;
   image-rendering: pixelated;
 }
-/* Center logo plate — official qr-logo (webui uses ~100×50 on large QR) */
+/* Center logo plate — official qr-logo.png (webui ~100×50; PNG for Android) */
 .goa-pay-taler-qr__logo {
   position: absolute;
   top: 50%;
@@ -132,8 +132,11 @@ button.shop-item {
   width: 28%;
   height: auto;
   max-width: 100px;
+  aspect-ratio: 200 / 95;
+  object-fit: contain;
   pointer-events: none;
-  background: transparent;
+  background: #fff;
+  border-radius: 4px;
 }
 
 /* Settlement: collapsed by default, expand on click */

configs/merchant-landing/shop-pay.js

@@ -3,7 +3,7 @@
  * Flow: POST templates/{id} → taler://pay/… + payto links.
  *
  * QR display matches taler-merchant-webui QR_Taler
- * (@gnu-taler/web-util QR.tsx): animated #0042B3 conic ring + qr-logo.svg.
+ * (@gnu-taler/web-util QR.tsx): animated #0042B3 conic ring + qr-logo.png.
  * Uses qrcode-generator (same lib as webui) via global QRCode if present,
  * else falls back to canvas from qrcode.min.js (davidshimjs).
  */
@@ -21,7 +21,8 @@
   }
 
   function logoSrc() {
-    return introBase() + "qr-logo.svg";
+    /* PNG: Android often drops SVG wordmark fill inheritance (missing "taler") */
+    return introBase() + "qr-logo.png";
   }
 
   function templateHttps(productId) {
@@ -214,9 +215,13 @@
 
   function setLogo(imgEl) {
     if (!imgEl) return;
+    imgEl.alt = "Taler";
+    imgEl.width = 100;
+    imgEl.height = 50;
+    imgEl.decoding = "async";
     imgEl.src = logoSrc();
     imgEl.onerror = function () {
-      imgEl.style.display = "none";
+      imgEl.src = introBase() + "qr-logo.svg";
     };
     imgEl.style.display = "";
   }