Phase 5.x payment revamp + Xendit Stage-8 prep

- Backend wraps idn-finlogos npm at /assets/payment-icons/<slug>.svg with
  1y immutable cache. Mobile drops bundled SVGs (only placeholder remains)
  and fetches via flutter_cache_manager. payment_methods.icon is now a
  CSV of slugs; catalog emits icon_urls[]. CARDS tile renders Visa + MC +
  JCB side by side.
- Per-method min/max amount bounds (BIGINT, nullable). Picker greys out
  out-of-range tiles with subtitle; backend gates with INVALID_PAYMENT_AMOUNT
  (422). Defense in depth against stale-catalog clients.
- Xendit channel codes corrected from authoritative docs
  (BCA_VA -> BCA_VIRTUAL_ACCOUNT, CREDIT_CARD -> CARDS, ovo -> ovo-new,
  shopeepay -> shopee-pay, ...). 18 methods x 5 groups seeded with
  Xendit-published per-channel min/max.
- Re-runnable seed (ON CONFLICT DO NOTHING on payment_code + new unique
  index on group name). Operator CC edits never clobbered across re-runs.
  One-shot reset + inspect scripts under backend/.dev/.
- Customer redirect HTML pages at /payment/return/{success,failure},
  brand-styled with "Buka HaloBestie" CTA firing halobestie:// deeplink.
  URL scheme registered on Android (intent-filter w/ BROWSABLE on
  MainActivity) and iOS (CFBundleURLTypes). Waiting-payment poller still
  owns confirmation; deeplink just brings the activity to foreground.
- Control center payment-catalog page: min/max inputs + columns. Other
  CC pages restyled with new theme tokens (separate work, bundled here).

169/169 backend tests pass. See requirement/phase5-payment-revamp-2026-05-27.md
for the full revamp doc. Stage 8 (E2E) still pending: webhook URL routing
decision + two client_app follow-ups (legacy /chat/request removal,
extension Custom Tab).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

client_app/lib/features/payment/widgets/payment_icon.dart

@@ -1,56 +1,72 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
+import '../../../core/api/api_client.dart';
 import '../../../core/theme/halo_tokens.dart';
 
-/// Slugs we ship SVGs for. Keep this in sync with `assets/payment_icons/`.
-/// When a brand mark is added to the bundle (drop the SVG into the asset
-/// dir), add its slug here. Anything not in this set renders the placeholder.
+/// Renders a payment-method brand mark fetched from the backend.
 ///
-/// Source: idn-finlogos (github.com/hafidznoor/idn-finlogos) — see
-/// `assets/payment_icons/NOTICE_IDN_FINLOGOS.txt` for licensing terms.
-const Set<String> _kBundledSlugs = {
-  'qris',
-  'ovo',
-  'dana',
-  'shopeepay',
-  'gopay',
-  'bca',
-  'mandiri',
-  'bni',
-  'bri',
-  'permata',
-};
-
-/// Renders a payment-method brand mark by slug (`payment_methods.icon`).
-/// Falls back to a generic credit-card placeholder when the slug isn't
-/// bundled. Slugs are kept lower-case by convention.
+/// `iconUrl` comes from `payment_methods.icon_url` on the catalog response.
+/// Relative paths (the common case — `/assets/payment-icons/<slug>.svg`) are
+/// resolved against [ApiClient.baseUrl]. Absolute URLs (operator override)
+/// are used as-is.
+///
+/// First fetch hits the network; the file is then persisted to disk by
+/// [DefaultCacheManager] (30-day idle LRU) and served locally on subsequent
+/// renders. While the cache lookup is in flight or when [iconUrl] is null,
+/// the bundled placeholder is shown so the picker never displays a spinner.
 class PaymentIcon extends StatelessWidget {
-  final String? slug;
+  final String? iconUrl;
   final double size;
   final Color color;
 
   const PaymentIcon({
     super.key,
-    required this.slug,
+    required this.iconUrl,
     this.size = 24,
     this.color = HaloTokens.brandDark,
   });
 
+  String? get _resolvedUrl {
+    final raw = iconUrl;
+    if (raw == null || raw.isEmpty) return null;
+    if (raw.startsWith('http://') || raw.startsWith('https://')) return raw;
+    return '${ApiClient.baseUrl}$raw';
+  }
+
   @override
   Widget build(BuildContext context) {
-    final isBundled = slug != null && _kBundledSlugs.contains(slug);
-    final asset = isBundled
-        ? 'assets/payment_icons/$slug.svg'
-        : 'assets/payment_icons/placeholder.svg';
+    final url = _resolvedUrl;
+    if (url == null) return _placeholder();
 
-    // Brand SVGs ship with their canonical colors and must NOT be tinted;
-    // the placeholder is mono-color and DOES want the brand-dark tint.
-    return SvgPicture.asset(
-      asset,
-      width: size,
-      height: size,
-      colorFilter: isBundled ? null : ColorFilter.mode(color, BlendMode.srcIn),
+    return FutureBuilder<FileInfo?>(
+      future: DefaultCacheManager().getFileFromCache(url),
+      builder: (context, cachedSnap) {
+        final cached = cachedSnap.data?.file;
+        if (cached != null) {
+          return SvgPicture.file(cached, width: size, height: size);
+        }
+        // Cache miss: render placeholder while the download lands, then swap
+        // in. We fire the download in the same FutureBuilder body so the next
+        // rebuild picks up the freshly-cached file.
+        return FutureBuilder(
+          future: DefaultCacheManager().getSingleFile(url),
+          builder: (context, snap) {
+            if (snap.hasData) {
+              return SvgPicture.file(snap.data!, width: size, height: size);
+            }
+            return _placeholder();
+          },
+        );
+      },
     );
   }
+
+  Widget _placeholder() => SvgPicture.asset(
+        'assets/payment_icons/placeholder.svg',
+        width: size,
+        height: size,
+        colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
+      );
 }