@vio-live/web-sdk 0.23.1 → 0.26.0

package/dist/{chunk-UVDOKFGD.js → chunk-A3LN5JEM.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, ensureVippsButton, formatPrice, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, normalizeScope } from './chunk-BRJMT7P4.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, toCampaignId, getGlobalCurrency, ensureVippsButton, formatPrice, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, gatewayHasBuyerRef, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, normalizeScope, campaignCandidates } from './chunk-5KWICUME.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -171,6 +171,8 @@ var SCOPE_ATTR = "vio-scope";
 var SCOPE_NAME_ATTR = "vio-scope-name";
 var SCOPE_DATA_ATTR = "data-vio-scope";
 var SCOPE_NAME_DATA_ATTR = "data-vio-scope-name";
+var CAMPAIGN_ATTR = "vio-campaign";
+var CAMPAIGN_DATA_ATTR = "data-vio-campaign";
 var liveAutoIds = (() => {
   const g = globalThis;
   return g.__VIO_LIVE_SLOT_IDS__ ?? (g.__VIO_LIVE_SLOT_IDS__ = /* @__PURE__ */ new Map());
@@ -192,6 +194,14 @@ var SlotRegistration = class {
   get effective() {
     return this.identity?.id ?? "";
   }
+  /** The element's own page campaign (`vio-campaign` / ancestor `data-vio-campaign`); undefined → `Vio.init`'s applies. */
+  get campaignId() {
+    return this.identity?.campaignId;
+  }
+  /** The element's page-campaign candidates in order (own, ancestor) — the hint for `Vio.attribution` / `campaignForSlot`. */
+  get campaignHint() {
+    return this.identity?.campaignCandidates ?? [];
+  }
   /** On connect: read the scope from the DOM, then register. */
   connect(attrs) {
     this.connected = true;
@@ -216,7 +226,7 @@ var SlotRegistration = class {
     this.unregister();
     if (!next) return;
     try {
-      this.release = typeof Vio.registerSlot === "function" ? Vio.registerSlot(next.id, next.displayName) : null;
+      this.release = typeof Vio.registerSlot !== "function" ? null : next.campaignId !== void 0 ? Vio.registerSlot(next.id, next.displayName, next.campaignId, { kind: this.kind }) : Vio.registerSlot(next.id, next.displayName, { kind: this.kind });
       this.identity = next;
     } catch {
       this.release = null;
@@ -227,13 +237,20 @@ var SlotRegistration = class {
   resolve(attrs) {
     const explicit = normalizeSlotId(attrs.vioSlot);
     const name = typeof attrs.vioSlotName === "string" && attrs.vioSlotName.trim() ? attrs.vioSlotName.trim() : void 0;
+    const campaignCandidates2 = campaignCandidatesOf(this.host, attrs);
+    const campaignId = campaignCandidates2[0];
     if (explicit) {
       this.releaseAuto();
-      return { id: explicit, displayName: name };
+      return { id: explicit, displayName: name, campaignId, campaignCandidates: campaignCandidates2 };
     }
     if (!this.connected) return null;
     const auto = this.claimAuto();
-    return { id: auto.id, displayName: name ?? autoSlotDisplayName(this.kind, auto.number - 1, this.scopeName) };
+    return {
+      id: auto.id,
+      displayName: name ?? autoSlotDisplayName(this.kind, auto.number - 1, this.scopeName),
+      campaignId,
+      campaignCandidates: campaignCandidates2
+    };
   }
   /** Unregister whatever is registered and free the auto number. */
   clear() {
@@ -275,7 +292,12 @@ var SlotRegistration = class {
 };
 function sameIdentity(a, b) {
   if (!a || !b) return a === b;
-  return a.id === b.id && a.displayName === b.displayName;
+  return a.id === b.id && a.displayName === b.displayName && a.campaignId === b.campaignId;
+}
+function campaignCandidatesOf(el, attrs) {
+  const own = attrs && attrs.vioCampaign !== void 0 && attrs.vioCampaign !== null ? attrs.vioCampaign : el.vioCampaign !== void 0 ? el.vioCampaign : el.getAttribute(CAMPAIGN_ATTR);
+  const ancestor = closestAcrossShadow(el, `[${CAMPAIGN_DATA_ATTR}]`)?.getAttribute(CAMPAIGN_DATA_ATTR);
+  return campaignCandidates([own, ancestor]);
 }
 function scopeOf(el, attrs) {
   const own = attrs && typeof attrs.vioScope === "string" ? attrs.vioScope : typeof el.vioScope === "string" ? el.vioScope ?? "" : el.getAttribute(SCOPE_ATTR) ?? "";
@@ -314,8 +336,10 @@ var VioProduct = class extends LitElement {
     this.vioSlotName = "";
     this.vioScope = "";
     this.vioScopeName = "";
+    this.vioCampaign = "";
     this.vioContentId = "";
     this.vioContentTitle = "";
+    this.componentTemplateId = "";
     this.slotRegistration = new SlotRegistration(this, "card");
     this.hasVariants = false;
     this.variants = void 0;
@@ -330,9 +354,13 @@ var VioProduct = class extends LitElement {
   get effectiveSlot() {
     return this.slotRegistration.effective;
   }
+  /** The element's own page campaign (`vio-campaign` / ancestor), if any; `Vio.init`'s applies otherwise. */
+  get effectiveCampaignId() {
+    return this.slotRegistration.campaignId;
+  }
   /** The slot campaign's sponsor as the string the attributes use ('' when unknown). */
   sponsorFromAttribution() {
-    const id = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot).sponsorId : void 0;
+    const id = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, { campaignId: this.slotRegistration.campaignHint }).sponsorId : void 0;
     return id !== void 0 ? String(id) : "";
   }
   slotAttributes() {
@@ -340,7 +368,8 @@ var VioProduct = class extends LitElement {
       vioSlot: this.vioSlot,
       vioSlotName: this.vioSlotName,
       vioScope: this.vioScope,
-      vioScopeName: this.vioScopeName
+      vioScopeName: this.vioScopeName,
+      vioCampaign: this.vioCampaign
     };
   }
   /**
@@ -349,9 +378,13 @@ var VioProduct = class extends LitElement {
    * set `vio-content-id` / `vio-content-title` on this card.
    */
   attribution() {
-    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, { sponsorId: this.sponsorId || void 0 }) : { slot: this.effectiveSlot || void 0 };
+    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, {
+      sponsorId: this.sponsorId || void 0,
+      campaignId: this.slotRegistration.campaignHint
+    }) : { slot: this.effectiveSlot || void 0 };
     return {
       ...base,
+      componentTemplateId: this.componentTemplateId || "product-card",
       ...this.vioContentId ? { contentId: this.vioContentId } : {},
       ...this.vioContentTitle ? { contentTitle: this.vioContentTitle } : {}
     };
@@ -479,7 +512,7 @@ var VioProduct = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("productId") || changed.has("sponsorId")) this.updateInCart();
-    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
   }
@@ -550,11 +583,15 @@ var VioProduct = class extends LitElement {
           // The host's sponsor-id wins; without one, the slot's campaign sponsor.
           sponsorId: this.sponsorId || this.sponsorFromAttribution(),
           // The host adds to the cart: pass this through as `origin` so the
-          // purchase is attributed to this place and campaign.
+          // purchase is attributed to this place, campaign, kind of element
+          // and page — the cart keeps it and Commerce receives it (ADR-0035).
           origin: {
             campaignId: attribution.campaignId,
             slot: attribution.slot,
-            contentId: attribution.contentId
+            contentId: attribution.contentId,
+            componentKind: attribution.componentTemplateId,
+            contentUrl: attribution.contentUrl,
+            contentTitle: attribution.contentTitle
           }
         }
       })
@@ -635,12 +672,18 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "vio-scope-name" })
 ], VioProduct.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-campaign" })
+], VioProduct.prototype, "vioCampaign", 2);
 __decorateClass([
   property({ type: String, attribute: "vio-content-id" })
 ], VioProduct.prototype, "vioContentId", 2);
 __decorateClass([
   property({ type: String, attribute: "vio-content-title" })
 ], VioProduct.prototype, "vioContentTitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "component-template-id" })
+], VioProduct.prototype, "componentTemplateId", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "has-variants" })
 ], VioProduct.prototype, "hasVariants", 2);
@@ -679,6 +722,7 @@ var VioProductCarousel = class extends LitElement {
     this.vioSlotName = "";
     this.vioScope = "";
     this.vioScopeName = "";
+    this.vioCampaign = "";
     this.vioContentId = "";
     this.vioContentTitle = "";
     this.slotRegistration = new SlotRegistration(this, "carousel");
@@ -697,19 +741,28 @@ var VioProductCarousel = class extends LitElement {
   get effectiveSlot() {
     return this.slotRegistration.effective;
   }
+  /** The element's own page campaign (`vio-campaign` / ancestor), if any; `Vio.init`'s applies otherwise. */
+  get effectiveCampaignId() {
+    return this.slotRegistration.campaignId;
+  }
   slotAttributes() {
     return {
       vioSlot: this.vioSlot,
       vioSlotName: this.vioSlotName,
       vioScope: this.vioScope,
-      vioScopeName: this.vioScopeName
+      vioScopeName: this.vioScopeName,
+      vioCampaign: this.vioCampaign
     };
   }
   /** Attribution every analytics event of this carousel carries (`Vio.attribution` + the content overrides). */
   attribution() {
-    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, { sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0 }) : { slot: this.effectiveSlot || void 0 };
+    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, {
+      sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+      campaignId: this.slotRegistration.campaignHint
+    }) : { slot: this.effectiveSlot || void 0 };
     return {
       ...base,
+      componentTemplateId: "product-carousel",
       ...this.vioContentId ? { contentId: this.vioContentId } : {},
       ...this.vioContentTitle ? { contentTitle: this.vioContentTitle } : {}
     };
@@ -874,10 +927,10 @@ var VioProductCarousel = class extends LitElement {
     super.disconnectedCallback();
   }
   updated(changed) {
-    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
-    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId") || changed.has("vioSlot");
+    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId") || changed.has("vioSlot") || changed.has("vioCampaign");
     if (propChanged && (this.productRefs.trim() || this.productIds.trim())) {
       void this.autoFetch();
     }
@@ -889,7 +942,7 @@ var VioProductCarousel = class extends LitElement {
    */
   effectiveSponsorId() {
     if (this.sponsorId > 0) return this.sponsorId;
-    const fromSlot = typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.effectiveSlot || null)?.primarySponsor?.id) : NaN;
+    const fromSlot = typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.effectiveSlot || null, { campaignId: this.slotRegistration.campaignHint })?.primarySponsor?.id) : NaN;
     return Number.isFinite(fromSlot) && fromSlot > 0 ? fromSlot : 0;
   }
   async autoFetch() {
@@ -951,7 +1004,6 @@ var VioProductCarousel = class extends LitElement {
         this,
         {
           sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
-          componentTemplateId: "product-carousel",
           // The slot is the real location id; the label only stands in for it.
           locationId: this.effectiveSlot || this.label || void 0,
           ...this.attribution()
@@ -979,7 +1031,6 @@ var VioProductCarousel = class extends LitElement {
       Vio.analytics.track("view_item_list", {
         context: {
           sponsorId: sponsorId > 0 ? sponsorId : void 0,
-          componentTemplateId: "product-carousel",
           locationId: this.effectiveSlot || this.label || void 0,
           ...this.attribution()
         },
@@ -1038,6 +1089,8 @@ var VioProductCarousel = class extends LitElement {
             image-url=${img}
             ?has-variants=${(p.variants?.length ?? 0) > 1}
             .vioSlot=${this.effectiveSlot}
+            .componentTemplateId=${"product-carousel"}
+            .vioCampaign=${this.effectiveCampaignId !== void 0 ? String(this.effectiveCampaignId) : ""}
             .vioContentId=${this.vioContentId}
             .vioContentTitle=${this.vioContentTitle}
           ></vio-product>
@@ -1121,6 +1174,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "vio-scope-name" })
 ], VioProductCarousel.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-campaign" })
+], VioProductCarousel.prototype, "vioCampaign", 2);
 __decorateClass([
   property({ type: String, attribute: "vio-content-id" })
 ], VioProductCarousel.prototype, "vioContentId", 2);
@@ -1369,6 +1425,7 @@ var VioProductDetail = class extends LitElement {
     this.vioSlotName = "";
     this.vioScope = "";
     this.vioScopeName = "";
+    this.vioCampaign = "";
     this.vioContentId = "";
     this.vioContentTitle = "";
     this.slotRegistration = new SlotRegistration(this, "detail");
@@ -1376,6 +1433,7 @@ var VioProductDetail = class extends LitElement {
     this.eventSlot = "";
     this.eventContentId = "";
     this.eventContentTitle = "";
+    this.eventCampaignId = void 0;
     this.eventProductId = "";
     this.product = null;
     this.sellerName = null;
@@ -1410,11 +1468,16 @@ var VioProductDetail = class extends LitElement {
       const slot = typeof ev.detail.slot === "string" ? ev.detail.slot.trim() : "";
       let sponsorIdNum = parseInt(ev.detail.sponsorId, 10);
       if (Number.isNaN(sponsorIdNum) || sponsorIdNum <= 0) {
-        const fromSlot = typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(slot || this.effectiveSlot || null)?.primarySponsor?.id) : NaN;
+        const fromSlot = typeof Vio.campaignForSlot === "function" ? Number(
+          Vio.campaignForSlot(slot || this.effectiveSlot || null, {
+            campaignId: [ev.detail.campaignId, ...this.slotRegistration.campaignHint]
+          })?.primarySponsor?.id
+        ) : NaN;
         if (!Number.isFinite(fromSlot) || fromSlot <= 0) return;
         sponsorIdNum = fromSlot;
       }
       this.eventSlot = slot;
+      this.eventCampaignId = toCampaignId(ev.detail.campaignId);
       this.eventProductId = String(ev.detail.productId);
       this.eventContentId = ev.detail.contentId !== void 0 && ev.detail.contentId !== null ? String(ev.detail.contentId).trim() : "";
       this.eventContentTitle = typeof ev.detail.contentTitle === "string" ? ev.detail.contentTitle.trim() : "";
@@ -1433,25 +1496,39 @@ var VioProductDetail = class extends LitElement {
   get effectiveSlot() {
     return this.slotRegistration.effective;
   }
+  /** The element's own page campaign (`vio-campaign` / ancestor), if any; `Vio.init`'s applies otherwise. */
+  get effectiveCampaignId() {
+    return this.slotRegistration.campaignId;
+  }
   /** The slot the open product is attributed to: the opening card's, else this element's. */
   get activeSlot() {
     return this.fromCard && this.eventSlot || this.effectiveSlot;
   }
+  /** The page-campaign candidates of the open product: the opening card's, then this element's own and its ancestor's. */
+  get activeCampaignHint() {
+    const own = this.slotRegistration.campaignHint;
+    return this.fromCard && this.eventCampaignId !== void 0 ? [this.eventCampaignId, ...own] : own;
+  }
   slotAttributes() {
     return {
       vioSlot: this.vioSlot,
       vioSlotName: this.vioSlotName,
       vioScope: this.vioScope,
-      vioScopeName: this.vioScopeName
+      vioScopeName: this.vioScopeName,
+      vioCampaign: this.vioCampaign
     };
   }
   /** Attribution every event of the open product carries (`Vio.attribution` of the opening card's slot, else this element's). */
   attribution() {
-    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.activeSlot, { sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0 }) : { slot: this.activeSlot || void 0 };
+    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.activeSlot, {
+      sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+      campaignId: this.activeCampaignHint
+    }) : { slot: this.activeSlot || void 0 };
     const contentId = this.fromCard && this.eventContentId || this.vioContentId;
     const contentTitle = this.fromCard && this.eventContentTitle || this.vioContentTitle;
     return {
       ...base,
+      componentTemplateId: "product-detail",
       ...contentId ? { contentId } : {},
       ...contentTitle ? { contentTitle } : {}
     };
@@ -1914,7 +1991,7 @@ var VioProductDetail = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("open")) this.dialogFocus.update(this.open);
-    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
   }
@@ -1928,6 +2005,7 @@ var VioProductDetail = class extends LitElement {
         this.eventSlot = "";
         this.eventContentId = "";
         this.eventContentTitle = "";
+        this.eventCampaignId = void 0;
         this.eventProductId = "";
         this.product = null;
         this.sellerName = null;
@@ -1987,7 +2065,6 @@ var VioProductDetail = class extends LitElement {
         Vio.analytics.track("view_item", {
           context: {
             sponsorId: this.sponsorId > 0 ? Number(this.sponsorId) : void 0,
-            componentTemplateId: "product-detail",
             ...this.attribution()
           },
           commerce: {
@@ -2028,7 +2105,7 @@ var VioProductDetail = class extends LitElement {
   }
   /** Which buy buttons to render — backend-configured per sponsor. */
   async loadAvailablePaymentMethods() {
-    const spId = this.sponsorId || (typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.activeSlot || null)?.primarySponsor?.id) : 0) || globalThis.__VIO_SPONSOR_ID__;
+    const spId = this.sponsorId || (typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.activeSlot || null, { campaignId: this.activeCampaignHint })?.primarySponsor?.id) : 0) || globalThis.__VIO_SPONSOR_ID__;
     if (!spId) return;
     try {
       const methods = await Vio.checkout.getAvailablePaymentMethods(spId);
@@ -2310,14 +2387,14 @@ var VioProductDetail = class extends LitElement {
     const sponsor = Vio.bootstrapCache?.primarySponsor;
     const secondaries = Vio.bootstrapCache?.secondarySponsors ?? [];
     const sponsorName = sponsor?.id === this.sponsorId ? sponsor.name : secondaries.find((s) => s.id === this.sponsorId)?.name;
-    const { campaignId, slot, contentId } = this.attribution();
+    const { campaignId, slot, contentId, componentTemplateId, contentUrl, contentTitle } = this.attribution();
     Vio.cart.addProduct({
       product: this.product,
       sponsorId: this.sponsorId,
       sponsorName,
       quantity: this.quantity,
       variantId: variant?.id,
-      origin: { campaignId, slot, contentId }
+      origin: { campaignId, slot, contentId, componentKind: componentTemplateId, contentUrl, contentTitle }
     });
     return variant?.id;
   }
@@ -2734,6 +2811,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "vio-scope-name" })
 ], VioProductDetail.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-campaign" })
+], VioProductDetail.prototype, "vioCampaign", 2);
 __decorateClass([
   property({ type: String, attribute: "vio-content-id" })
 ], VioProductDetail.prototype, "vioContentId", 2);
@@ -3282,11 +3362,12 @@ var VioCart = class extends LitElement {
       for (const sponsorId of [...this.carts.keys()]) {
         Vio.cart.clearSponsorCart(sponsorId);
       }
+      const buyerRef = buyerRefOf({ result });
       this.dispatchEvent(
         new CustomEvent("vio:payment-success", {
           bubbles: true,
           composed: true,
-          detail: { method: "apple-pay", result }
+          detail: { method: "apple-pay", result, ...buyerRef ? { buyerRef } : {} }
         })
       );
     });
@@ -3856,6 +3937,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : friendlyPaymentError(detail.error, detail.method);
       this.open = true;
     };
+    /** Payment events still waiting for their buyer reference: settled early (without it) when the page hides or the element leaves. */
+    this.pendingSuccessEmits = /* @__PURE__ */ new Set();
   }
   /** A payment is being started or confirmed right now: the overlay must not close under it. */
   get paymentInFlight() {
@@ -4546,13 +4629,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.orderConfirmed = true;
       this.open = true;
       void this.fillOrderNumber(checkoutId, sponsorId);
-      this.dispatchEvent(
-        new CustomEvent("vio:payment-success", {
-          bubbles: true,
-          composed: true,
-          detail: { method: vioMethod, sponsorId, orderId: checkoutId }
-        })
-      );
+      void this.emitPaymentSuccess({ method: vioMethod, sponsorId, orderId: checkoutId }, checkoutId, sponsorId);
     } else if (outcome === "duplicate") {
       this.paymentError = CART_PAID_MESSAGE;
       this.open = true;
@@ -4894,6 +4971,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.unmountKlarna();
     this.unmountNexi();
     this.unmountAdyen();
+    for (const settle of [...this.pendingSuccessEmits]) settle();
     super.disconnectedCallback();
   }
   updated(changed) {
@@ -5405,18 +5483,122 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.confirmedMethod = method;
     this.orderConfirmed = true;
     this.open = true;
-    this.dispatchEvent(
-      new CustomEvent("vio:payment-success", {
+    void this.fillOrderNumber(checkoutId, sponsorId);
+    void this.emitPaymentSuccess(
+      { method, sponsorId, result, checkoutId },
+      checkoutId,
+      sponsorId,
+      () => Vio.cart.clearSponsorCart(sponsorId)
+    );
+  }
+  static {
+    /** Longest `vio:payment-success` waits for the checkout's buyer reference, and when it asks a second time. */
+    this.BUYER_REF_WAIT_MS = 2500;
+  }
+  static {
+    this.BUYER_REF_RETRY_AT_MS = 1200;
+  }
+  /**
+   * `vio:payment-success` for the host and analytics — with the buyer
+   * reference (`buyerRef`: shopcart's keyed hash of the email → analytics
+   * `buyer_id`) when the checkout can say it. An emitter whose own answer
+   * carried it (Apple Pay, Klarna native) sends at once; the others (a
+   * redirect return, Stripe / Adyen / Nexi in the drawer, a provider's
+   * receipt) ask the checkout — at once and, while it has neither order nor
+   * reference, again at 1.2 s, since a webhook may write the checkout a
+   * moment after the redirect — within 2.5 s, and
+   * send without it when the answer is late or empty. Nothing is asked when
+   * it cannot help (the gateway has no `buyer_ref` yet; a confirmation that
+   * already answered). Only the event waits — the screen is already the
+   * confirmation — and not past the page: when the page hides (`pagehide`,
+   * `visibilitychange`) or the element leaves, the event goes out at once
+   * without the reference. Exactly one event per call. `afterwards` runs
+   * right after the event, so a path keeps the order it always had (the cart
+   * is cleared after the event).
+   */
+  async emitPaymentSuccess(detail, checkoutId, sponsorId, afterwards) {
+    let done = false;
+    const finish = (buyerRef) => {
+      if (done) return;
+      done = true;
+      const event = new CustomEvent("vio:payment-success", {
         bubbles: true,
         composed: true,
-        // `checkoutId` is Vio's own reference for the purchase — what the
-        // redirect path already sends as `orderId`; analytics falls back to it
-        // when the provider's result carries no order id.
-        detail: { method, sponsorId, result, checkoutId }
-      })
-    );
-    Vio.cart.clearSponsorCart(sponsorId);
-    void this.fillOrderNumber(checkoutId, sponsorId);
+        detail: buyerRef ? { ...detail, buyerRef } : detail
+      });
+      this.dispatchEvent(event);
+      if (!this.isConnected && typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("vio:payment-success", { detail: event.detail }));
+      }
+      try {
+        afterwards?.();
+      } catch {
+      }
+    };
+    const known = buyerRefOf(detail);
+    if (known || !checkoutId || !this.shouldAskBuyerRef(detail)) {
+      finish(known);
+      return;
+    }
+    const settleEarly = () => finish();
+    const onVisibility = () => {
+      if (typeof document !== "undefined" && document.visibilityState === "hidden") settleEarly();
+    };
+    this.pendingSuccessEmits.add(settleEarly);
+    window.addEventListener("pagehide", settleEarly);
+    document.addEventListener("visibilitychange", onVisibility);
+    try {
+      finish(await this.askBuyerRef(checkoutId, sponsorId, () => done));
+    } catch {
+      finish();
+    } finally {
+      this.pendingSuccessEmits.delete(settleEarly);
+      window.removeEventListener("pagehide", settleEarly);
+      document.removeEventListener("visibilitychange", onVisibility);
+    }
+  }
+  /** Whether asking the checkout for the buyer reference can still help. */
+  shouldAskBuyerRef(detail) {
+    if (typeof Vio.checkout.getOrderReference !== "function") return false;
+    if (!gatewayHasBuyerRef()) return false;
+    if ((detail.method === "apple-pay" || detail.method === "klarna") && detail.result) return false;
+    return true;
+  }
+  /**
+   * The buyer reference of a checkout: asked at once and, when that answer
+   * failed or has neither the reference nor an order yet (the webhook has not
+   * written the checkout), again at 1.2 s — all within 2.5 s. An order
+   * without a reference is a settled answer: the backend has none, asking
+   * again cannot help. `undefined` when the time is up, when the answer
+   * stopped mattering (`stopped()`) or on failure.
+   */
+  async askBuyerRef(checkoutId, sponsorId, stopped) {
+    const started = Date.now();
+    const remaining = () => _VioCheckout.BUYER_REF_WAIT_MS - (Date.now() - started);
+    let deadline;
+    const timeUp = new Promise((resolve) => {
+      deadline = setTimeout(() => resolve(null), _VioCheckout.BUYER_REF_WAIT_MS);
+    });
+    try {
+      for (const at of [0, _VioCheckout.BUYER_REF_RETRY_AT_MS]) {
+        const wait = Math.min(at - (Date.now() - started), remaining());
+        if (wait > 0) await Promise.race([new Promise((resolve) => setTimeout(resolve, wait)), timeUp]);
+        if (stopped() || remaining() <= 0) return void 0;
+        try {
+          const reference = await Promise.race([
+            Vio.checkout.getOrderReference(checkoutId, sponsorId || void 0),
+            timeUp
+          ]);
+          if (reference === null) return void 0;
+          if (reference.buyerRef) return reference.buyerRef;
+          if (reference.orderNumber !== null) return void 0;
+        } catch {
+        }
+      }
+      return void 0;
+    } finally {
+      clearTimeout(deadline);
+    }
   }
   static {
     /** Waits between asks for the Vio order number: the order is often born a
@@ -5567,19 +5749,14 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.confirmedMethod = method;
     this.open = true;
     const checkoutId = returnCheckoutId || this.checkoutState?.checkoutId;
-    this.dispatchEvent(
-      new CustomEvent("vio:payment-success", {
-        bubbles: true,
-        composed: true,
-        detail: { method, sponsorId, result, checkoutId }
-      })
-    );
-    if (sponsorId) {
-      try {
-        Vio.cart.clearSponsorCart(sponsorId);
-      } catch {
+    void this.emitPaymentSuccess(
+      { method, sponsorId, result, checkoutId },
+      checkoutId,
+      sponsorId,
+      () => {
+        if (sponsorId) Vio.cart.clearSponsorCart(sponsorId);
       }
-    }
+    );
   }
   /** Back from the payment page, asking whether it was paid — and nothing
    * else on screen while we do. */
@@ -7034,5 +7211,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-UVDOKFGD.js.map
-//# sourceMappingURL=chunk-UVDOKFGD.js.map
+//# sourceMappingURL=chunk-A3LN5JEM.js.map
+//# sourceMappingURL=chunk-A3LN5JEM.js.map