feat: show payment provider webhook urls

frontend/src/admin/sections/SettingsSection.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { ChevronRight, Eye, EyeOff, Search, X } from "$components/ui/icons.js";
+  import { Check, ChevronRight, Copy, Eye, EyeOff, Search, X } from "$components/ui/icons.js";
   import * as UiIcons from "$components/ui/icons.js";
   import { Accordion, Switch } from "$components/ui/primitives.js";
   import Dialog from "$components/ui/dialog.svelte";
@@ -9,7 +9,7 @@
     AdminEmptyState,
     AdminSelect,
   } from "$components/patterns/admin/index.js";
-  import { getContext, onMount } from "svelte";
+  import { getContext, onDestroy, onMount } from "svelte";
 
   export let at;
   export let onSettingsSaved;
@@ -26,6 +26,8 @@
   let revealedSecrets = new Set();
   let iconPickerField = null;
   let iconPickerSearch = "";
+  let copiedWebhookKey = "";
+  let copiedWebhookTimer = null;
 
   $: settingsAllOpen =
     visibleSettingsSections.length > 0 &&
@@ -48,6 +50,12 @@
     });
   });
 
+  onDestroy(() => {
+    if (copiedWebhookTimer && typeof window !== "undefined") {
+      window.clearTimeout(copiedWebhookTimer);
+    }
+  });
+
   function toggleAllSections() {
     if (settingsOpenSections.length === visibleSettingsSections.length) {
       settingsOpenSections = [];
@@ -123,6 +131,60 @@
     closeIconPicker();
   }
 
+  function normalizeWebhookPath(path) {
+    const normalized = String(path || "").trim();
+    if (!normalized) return "";
+    return normalized.startsWith("/") ? normalized : `/${normalized}`;
+  }
+
+  function webhookUrlForField(field) {
+    const explicit = String(field?.webhook_url || "").trim();
+    if (explicit) return explicit;
+    const path = normalizeWebhookPath(field?.webhook_path);
+    if (!path) return "";
+    if (field?.webhook_requires_base_url && field?.webhook_base_url_configured === false) {
+      return "";
+    }
+    if (typeof window !== "undefined" && window.location?.origin) {
+      return `${window.location.origin}${path}`;
+    }
+    return path;
+  }
+
+  function groupWebhook(fields) {
+    const field = (fields || []).find((item) => item.webhook_path || item.webhook_url);
+    if (!field) return null;
+    const path = normalizeWebhookPath(field.webhook_path);
+    const url = webhookUrlForField(field);
+    if (!url && !path) return null;
+    return {
+      key: `${field.provider_id || field.key || "provider"}:${path || url}`,
+      path,
+      url,
+      requiresBaseUrl: Boolean(field.webhook_requires_base_url),
+      baseConfigured: field.webhook_base_url_configured !== false,
+    };
+  }
+
+  async function copyWebhookUrl(webhook) {
+    if (!webhook?.url) return;
+    try {
+      await navigator.clipboard.writeText(webhook.url);
+      copiedWebhookKey = webhook.key;
+      if (copiedWebhookTimer && typeof window !== "undefined") {
+        window.clearTimeout(copiedWebhookTimer);
+      }
+      if (typeof window !== "undefined") {
+        copiedWebhookTimer = window.setTimeout(() => {
+          copiedWebhookKey = "";
+          copiedWebhookTimer = null;
+        }, 1400);
+      }
+    } catch {
+      copiedWebhookKey = "";
+    }
+  }
+
   function groupSectionFields(section) {
     const groups = new Map();
     for (const field of section.fields || []) {
@@ -140,6 +202,7 @@
       id,
       label: id === "_root" ? null : id,
       i18nLabelKey: group.i18nLabelKey,
+      webhook: groupWebhook(group.fields),
       fields: group.fields,
     }));
   }
@@ -219,6 +282,47 @@
   }
 </script>
 
+{#snippet renderWebhookHint(webhook)}
+  {@const displayValue = webhook.url || webhook.path}
+  <div class="admin-webhook-hint">
+    <div class="admin-webhook-hint-meta">
+      <strong>{at("settings_provider_webhook_url", {}, "Webhook URL")}</strong>
+      <small>
+        {webhook.url
+          ? at(
+              "settings_provider_webhook_url_hint",
+              {},
+              "Use this URL in the provider webhook settings."
+            )
+          : at(
+              "settings_provider_webhook_base_missing",
+              { path: webhook.path },
+              `Set WEBHOOK_BASE_URL to show the full URL for ${webhook.path}.`
+            )}
+      </small>
+    </div>
+    <div class="admin-webhook-value">
+      <code title={displayValue}>{displayValue}</code>
+      <AdminButton
+        class="admin-webhook-copy"
+        size="sm"
+        variant="ghost"
+        disabled={!webhook.url}
+        title={at("copy", {}, "Copy")}
+        onclick={() => copyWebhookUrl(webhook)}
+      >
+        {#if copiedWebhookKey === webhook.key}
+          <Check size={13} />
+          <span>{at("copied", {}, "Copied")}</span>
+        {:else}
+          <Copy size={13} />
+          <span>{at("copy", {}, "Copy")}</span>
+        {/if}
+      </AdminButton>
+    </div>
+  </div>
+{/snippet}
+
 {#snippet renderField(field)}
   {@const revealed = isSecretRevealed(field.key)}
   <div class="admin-setting" class:is-overridden={isOverridden(field)}>
@@ -420,6 +524,9 @@
           {@const labelGroups = groups.filter((g) => g.label)}
           <div class="admin-settings-fields">
             {#if rootGroup}
+              {#if rootGroup.webhook}
+                {@render renderWebhookHint(rootGroup.webhook)}
+              {/if}
               {#each rootGroup.fields as field}
                 {@render renderField(field)}
               {/each}
@@ -463,6 +570,9 @@
                     </Accordion.Header>
                     <Accordion.Content class="admin-accordion-content">
                       <div class="admin-settings-subsection-body">
+                        {#if group.webhook}
+                          {@render renderWebhookHint(group.webhook)}
+                        {/if}
                         {#each group.fields as field}
                           {@render renderField(field)}
                         {/each}

frontend/src/styles/admin.css

@@ -1889,6 +1889,65 @@
   align-items: center;
 }
 
+.admin-webhook-hint {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 16px;
+  align-items: center;
+  min-width: 0;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--admin-border);
+  background: color-mix(in srgb, var(--info) 7%, transparent);
+}
+
+.admin-webhook-hint-meta {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.admin-webhook-hint-meta strong {
+  color: var(--admin-text);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.admin-webhook-hint-meta small {
+  color: var(--admin-muted);
+  font-size: 12px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.admin-webhook-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.admin-webhook-value code {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--admin-bg) 82%, var(--admin-surface-2));
+  color: var(--admin-text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-webhook-copy {
+  flex: 0 0 auto;
+}
+
 .admin-setting:last-child {
   border-bottom: 0;
 }
@@ -2625,6 +2684,26 @@
     padding: 14px 14px;
   }
 
+  .admin-webhook-hint {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+    padding: 14px;
+  }
+
+  .admin-webhook-value {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .admin-webhook-value code {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .admin-webhook-copy {
+    align-self: flex-start;
+  }
+
   .admin-card-head {
     padding: 12px 14px;
   }