@vio-live/web-sdk 0.28.0 → 0.29.0

package/CHANGELOG.md

@@ -14,9 +14,79 @@ How to keep this file: see [CONTRIBUTING → Changelog](CONTRIBUTING.md#changelo
 The details of each feature live in the [README](README.md); this file says *what*
 and *when*, and links there.
 
-## Unreleased
+## 0.29.0 — 2026-10-24
 
-Nothing yet.
+### Added
+- **`vio:cart-updated`** on `document` — `{ sponsorId, cartId, items, itemCount, subtotal, currency, source }`,
+  `source: 'server'` when the cart was just read from the server (right before a checkout is
+  created or a payment link minted, and when the drawer or the checkout opens), `'storage'` when
+  another tab of the site changed it. For hosts that draw their own cart or badge.
+  `Vio.cart.refreshFromServer(sponsorId)` asks on demand. See
+  [README → What the shopper pays is what the page shows](README.md#what-the-shopper-pays-is-what-the-page-shows--the-cart-the-server-the-other-tabs).
+- **`add_payment_info`** (analytics, GA4 name) the moment a backend checkout exists for a payment
+  — Vipps from the detail, the cart or the checkout, a Stripe payment link or Element, Klarna,
+  Apple Pay, Nexi, Kustom, Qliro, Walley, Adyen — with `commerce.checkout_id`, `payment_method`,
+  the cart's lines and the same context as `begin_checkout` (per campaign like it). Once per
+  checkout per page load, none when the checkout could not be created, and by beacon BEFORE the
+  page leaves for Vipps or a Stripe link. It is how a paid order whose `purchase` never came back
+  keeps its session, page and slot (ADR-0039; order 4128, 2026-10-23). The checkout manager
+  announces it on `window` as **`vio:checkout-created`** `{ sponsorId, checkoutId, paymentMethod,
+  campaignId?, redirect }`. See [README → `add_payment_info`](README.md#add_payment_info--the-checkout-linked-to-this-session-0290).
+
+### Changed
+- **«Kjøp nå med Vipps» on the product detail goes straight to Vipps only when the cart is
+  empty.** With lines already in the cart, the product is added and the checkout opens first
+  (`vio:checkout-open`, Vipps preselected, no `vio:payment-redirect-*` events), every line and
+  the total on screen. Before, the tap paid the WHOLE cart with only the Vipps page saying so
+  (Mote & Livsstil, 2026-10-23: a jumper left in the cart 13 minutes earlier was paid along
+  with the top bought «nå»). The cart's own Vipps button is unchanged: it pays the lines it shows.
+- **Apple Pay on the product detail shows what it charges.** The sheet's amount is fixed before
+  the tap and was the product's price, while the charge was the sponsor's whole cart. The sheet
+  now opens only on an empty cart, prepared for the product × the chosen quantity (it is prepared
+  again when the quantity or variant changes); with lines already in the cart — or while the
+  sheet for a new quantity is still being prepared — the product is added and the checkout opens
+  (`vio:checkout-open` with `paymentMethod: 'apple-pay'`), where Apple Pay charges the total shown.
+
+### Fixed
+- **The lines the shopper pays for are the lines the page shows.** The checkout, and the
+  Vipps / Stripe page, are built on the backend cart — every line in it — while the drawer
+  and the checkout summary drew this tab's memory. Now the SDK reads the server's cart right
+  before a checkout is created or a payment link minted, and when `<vio-cart>` / `<vio-checkout>`
+  open, and draws that; an open checkout recomputes its lines and total when the cart changes
+  under it.
+- **Other tabs of the site are heard.** The carts are shared through `localStorage` but each
+  tab read them once, at load: a payment in one tab left the others showing — and adding to —
+  a cart that was already paid; a line added in one tab was missing from the others until a
+  reload. Now a tab adopts what another tab wrote (`storage` event), except for a sponsor it is
+  mid-add for.
+- **Vipps Express: the checkout no longer adds our shipping to the total.** The delivery is
+  chosen and paid inside Vipps, but with Vipps selected the checkout still added the seller's
+  first rate (Careless QA, 2026-10-24: «Frakt – Default Shipping» 10 kr, 1 308 kr on screen and
+  on the button, 1 298 kr in Vipps). With Vipps as the method and Express on for the seller,
+  the summary says «Frakt: Velges i Vipps» and the total and «Betal … med Vipps» are the items.
+  Vipps without Express, and every other method, still add the rate as before.
+- **The `purchase` of a paid return is sent, not left in the queue** (2026-10-24). Order 4128
+  (Careless, prod, 2026-10-23 22:40, after two abandoned trips to Vipps): the shopper
+  paid, came back, saw the confirmation, and the brand's panel never counted the sale — Commerce
+  had its `order_paid`, the collector no `purchase`. The return was read as paid; the one way the
+  code loses that purchase is the queue: it was built, with the order number, into a queue sent
+  every 5 s, and leaving the page right away (back to the Vipps app, the home screen) beaconed
+  only a purchase still waiting for its number — a phone that discards a hidden tab never runs
+  the next tick. Now the purchase is sent as soon as it is built, and when the page hides
+  everything still queued leaves by beacon.
+
+### ⚠️ Upgrade notes
+- **The collector must accept `add_payment_info`** before it is counted: one that does not know the
+  name rejects that event alone (`202` with `rejected`), the rest of the batch is kept. Nothing to
+  do in the host.
+- A host that handles `vio:checkout-open` only from the cart: the product detail now emits it
+  too when «Kjøp nå med Vipps» or Apple Pay is tapped on a non-empty cart (it already did when
+  Express was off for the seller), now also with `paymentMethod: 'apple-pay'`. Check that your
+  handler opens `<vio-checkout>` for the detail's event.
+- A host with its own cart drawer or badge: listen to `vio:cart-updated` (or `Vio.cart`'s
+  `change`) — the lines can now change without a tap in that tab.
+- One more `GetCart` per checkout creation / payment link and per opening of the drawer or the
+  checkout.
 
 ## 0.28.0 — 2026-10-22
 

package/README.md

@@ -487,11 +487,38 @@ could never be netted.
   arrives after the event left with the checkout id adds no second event. `ts`
   and `event_id` are fixed at the payment, whenever the event leaves; a purchase
   split per campaign waits once and every slice carries the same number.
+- **Sent at once.** A `purchase` does not wait for the queue's 5 s tick: it is
+  sent as soon as it is built, and when the page hides (`visibilitychange`, the
+  last thing a phone is sure to say before it discards a tab) whatever is still
+  queued leaves by beacon (0.29.0; order 4128 had been recorded and never sent).
 - **A host with its own sink** (Vev) reads the same ids from the detail with
   `purchaseIdsOf(detail)` → `{ orderId, checkoutId, orderIdKind }` (or
   `purchaseFromPaymentSuccess(detail)`, exported from `/core`), and waits for the
   number the same way through `Vio.checkout.getOrderReference(checkoutId)`.
 
+### `add_payment_info` — the checkout, linked to this session (0.29.0)
+
+The moment a backend checkout exists for a payment — Vipps (from the product
+detail, the cart or the checkout), a Stripe payment link or Element, Klarna, Apple
+Pay, Nexi, Kustom, Qliro, Walley, Adyen — the SDK emits **`add_payment_info`**
+(the GA4 name) with **`commerce.checkout_id`**, **`payment_method`**, the cart's
+lines (`items`, `value`, `currency`) and the same context as `begin_checkout`
+(sponsor, campaign, slot, content), split per campaign like it. Once per checkout
+per page load; nothing when the checkout could not be created. When the page is
+about to leave for the provider (Vipps, a Stripe payment link) it goes out by
+beacon first.
+
+Why (ADR-0039): Commerce's `order_paid` is what says a sale happened, and the
+browser's `purchase` can be missing (a closed tab, a phone that discards the page
+on the way back). The collector attributes an `order_paid` without a `purchase` to
+the session, page and slot of the `add_payment_info` with the same `checkout_id`.
+
+The checkout manager announces each checkout on `window` as
+**`vio:checkout-created`** — `{ sponsorId, checkoutId, paymentMethod, campaignId?,
+redirect }` — which is what analytics listens to; a host with its own sink can
+listen to it too. With `dataLayer: true` it is pushed as GA4's `add_payment_info`
+with `payment_type`.
+
 ## Sponsor identity — name and logo
 
 The elements say **who sells**: the sponsor's (brand's) display name and logo.
@@ -674,6 +701,48 @@ tap, so a second payment cannot start. Events on `document`:
 `source` is `'detail'`, `'cart'` or `'checkout'`. The overlay is `.vio-redirect-overlay`
 in the light DOM.
 
+**The detail's Vipps button pays the whole cart.** «Kjøp nå med Vipps» on the product
+detail adds the product to the sponsor's cart and the checkout is built on that cart —
+every line in it. It goes straight to Vipps only when the cart was **empty**; with lines
+already in it, the product is added and the checkout opens first (`vio:checkout-open`
+with `paymentMethod: 'vipps'`, no hand-over events), every line and the total on screen,
+so what the Vipps page lists is what the shopper saw. The cart's own Vipps button always
+pays the whole cart — the lines are right there. **Apple Pay on the detail follows the same
+rule**: its sheet's amount is fixed before the tap, so it opens only on an empty cart, for the
+product × the chosen quantity; otherwise the checkout opens (`paymentMethod: 'apple-pay'`).
+
+### What the shopper pays is what the page shows — the cart, the server, the other tabs
+
+The cart lives in this tab's memory and in `localStorage` (`vio.cart.v1`, one entry per
+sponsor with the backend cart id), and the checkout — and the Vipps / Stripe page — is
+built on the **backend** cart, every line of it. Three things keep the two the same:
+
+- **Before a checkout is created or a payment link minted**, and **when `<vio-cart>` or
+  `<vio-checkout>` opens**, the SDK asks the server for the cart (`GetCart`) and draws that
+  answer: a line another tab added, a cart another tab emptied. `Vio.cart.refreshFromServer(sponsorId)`
+  does the same on demand and resolves with the sponsor's cart. A `GetCart` that fails leaves
+  the cart as it was (and warns) — the checkout then goes on with the lines the last mutation
+  answered, as before.
+- **Other tabs of the site are heard.** A payment in one tab (its cart cleared) empties the
+  drawer of the others and the next add there opens a new backend cart; a line added in one
+  tab is in the others without a reload. Through the browser's `storage` event — a tab that
+  is mid-add for a sponsor keeps its own lines until its answer lands.
+- **An open checkout follows its cart**: its lines and its total are recomputed when the
+  cart changes under it (the widgets that captured an amount at mount ask to be refreshed,
+  as they already did for a changed cart).
+
+`vio:cart-updated` on `document` says when either of the first two happened:
+
+```ts
+document.addEventListener('vio:cart-updated', (e) => {
+  const { sponsorId, cartId, items, itemCount, subtotal, currency, source } = e.detail
+  // source: 'server' (GetCart, right before a checkout / on opening) | 'storage' (another tab)
+})
+```
+
+`items` are copies of the lines (`CartLineItem[]`). A host that draws its own cart or badge
+redraws it from this event; `<vio-cart>` and the badge wired to `Vio.cart`'s `change` need nothing.
+
 ## Headless / SSR
 
 The root and `/core` entries export the framework-agnostic core with **no DOM side-effects** — SSR-safe and **tree-shakeable** (importing one helper pulls only that helper, ~0.5 kB):

package/dist/{chunk-AFJ5M53F.js → chunk-AG4G2S2M.js}

@@ -2214,7 +2214,36 @@ var CartManager = class extends EventTarget {
     /** Quantity intents for lines whose backend id hasn't arrived yet — replayed
      * when the AddItem response reconciles (keyed by product::variant). */
     this.pendingQtyIntents = /* @__PURE__ */ new Map();
+    /**
+     * Another tab of the site wrote the carts: adopt what it wrote, sponsor by
+     * sponsor — its lines and its backend cart id, or nothing when it cleared
+     * the cart (a payment) — except for a sponsor this tab is mid-write for:
+     * its own answer lands in a moment and is persisted then, over whatever
+     * the other tab had. `key` is null when the other tab cleared the whole
+     * storage. Says `change` (the drawer) and `vio:cart-updated` per sponsor
+     * that changed (`source: 'storage'`); nothing when nothing did.
+     */
+    this.onStorage = (e) => {
+      if (e.key !== null && e.key !== STORAGE_KEY) return;
+      const stored = this.loadFromStorage();
+      const changed = [];
+      for (const sponsorId of /* @__PURE__ */ new Set([...this.cartsBySponsor.keys(), ...stored.keys()])) {
+        if (this.hasMutationsInFlight(sponsorId) || this.cartIdPromises.has(sponsorId)) continue;
+        const mine = this.cartsBySponsor.get(sponsorId);
+        const theirs = stored.get(sponsorId);
+        if (JSON.stringify(mine ?? null) === JSON.stringify(theirs ?? null)) continue;
+        if (theirs) this.cartsBySponsor.set(sponsorId, theirs);
+        else this.cartsBySponsor.delete(sponsorId);
+        changed.push(sponsorId);
+      }
+      if (changed.length === 0) return;
+      this.emit();
+      for (const sponsorId of changed) this.emitCartUpdated(sponsorId, "storage");
+    };
     this.cartsBySponsor = this.loadFromStorage();
+    if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
+      window.addEventListener("storage", this.onStorage);
+    }
   }
   nextSeq(sponsorId) {
     const n = (this.mutationSeq.get(sponsorId) ?? 0) + 1;
@@ -2374,6 +2403,9 @@ var CartManager = class extends EventTarget {
    * Overwrite local cart state with the backend cart response (source of
    * truth). `opts.settling` is the mutation whose answer this is: it does not
    * count as "in flight" for the origins (see `hasMutationsInFlight`).
+   * `opts.authoritative` is a GetCart taken with nothing of this tab's in
+   * flight (`refreshFromServer`): an empty answer then means the cart IS
+   * empty, and the local lines go — not an add still on its way.
    */
   updateFromBackendCart(sponsorId, backendCart, opts = {}) {
     const cart = this.cartsBySponsor.get(sponsorId);
@@ -2389,7 +2421,7 @@ var CartManager = class extends EventTarget {
     const removedBeforeSync = [];
     if (Array.isArray(backendCart.line_items)) {
       const existingItems = cart.items || [];
-      if (backendCart.line_items.length === 0 && existingItems.length > 0) {
+      if (backendCart.line_items.length === 0 && existingItems.length > 0 && !opts.authoritative) {
         this.persist();
         this.emit();
         return;
@@ -2743,6 +2775,60 @@ var CartManager = class extends EventTarget {
     if (resCart) this.updateFromBackendCart(sponsorId, resCart);
     return resCart;
   }
+  /**
+   * The cart as the server has it, for the moment a checkout is about to be
+   * built on it: what the shopper is about to pay must be what the page shows.
+   * Waits for this tab's own mutations (their answers are the server's too),
+   * then applies GetCart as it is — a line another tab added, one it removed,
+   * an empty cart — and tells the page: `change` for the drawer, and
+   * `vio:cart-updated` on `document` (`source: 'server'`) for a host that
+   * draws its own. A mutation that starts while the server is answering makes
+   * that answer old: it is asked once more. Nothing to ask without a backend
+   * cart. A GetCart that fails leaves the local state as it was and does not
+   * throw — the checkout then goes on with the lines the last mutation
+   * answered, as it always did. Resolves with the sponsor's cart.
+   */
+  async refreshFromServer(sponsorId) {
+    for (let attempt = 0; attempt < 2; attempt++) {
+      await this.waitForCartMutations(sponsorId);
+      const cart = this.cartsBySponsor.get(sponsorId);
+      if (!cart?.cartId) return cart;
+      let resCart;
+      try {
+        const gqlOpts = await getCartGraphQLOptions(sponsorId);
+        resCart = await getCart(cart.cartId, gqlOpts);
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.warn("[CartManager] GetCart before the checkout failed \u2014 the local cart stands", err);
+        }
+        return cart;
+      }
+      if (this.hasMutationsInFlight(sponsorId)) continue;
+      const backendCart = resCart;
+      if (backendCart && Array.isArray(backendCart.line_items)) {
+        this.updateFromBackendCart(sponsorId, backendCart, { authoritative: true });
+        this.emitCartUpdated(sponsorId, "server");
+      }
+      return this.cartsBySponsor.get(sponsorId);
+    }
+    return this.cartsBySponsor.get(sponsorId);
+  }
+  /** `vio:cart-updated` on `document` — see `CartUpdatedDetail`. */
+  emitCartUpdated(sponsorId, source) {
+    if (typeof document === "undefined") return;
+    const cart = this.cartsBySponsor.get(sponsorId);
+    const items = (cart?.items ?? []).map((item) => ({ ...item }));
+    const detail = {
+      sponsorId,
+      cartId: cart?.cartId,
+      items,
+      itemCount: items.reduce((count, item) => count + item.quantity, 0),
+      subtotal: items.reduce((sum, item) => sum + item.unitPrice * item.quantity, 0),
+      currency: cart?.currency || getGlobalCurrency(),
+      source
+    };
+    document.dispatchEvent(new CustomEvent("vio:cart-updated", { bubbles: true, detail }));
+  }
   /** Line items grouped by supplier (shipping is per-supplier server-side). */
   async fetchLineItemsBySupplier(sponsorId) {
     const cart = this.cartsBySponsor.get(sponsorId);
@@ -3267,7 +3353,7 @@ async function prepareApplePay(config) {
 }
 
 // src/core/version.ts
-var SDK_VERSION = "0.28.0";
+var SDK_VERSION = "0.29.0";
 
 // src/core/checkout/payments/stripe-embedded.ts
 var CREATE_PAYMENT_INTENT_STRIPE_MUTATION = `
@@ -4729,6 +4815,11 @@ function adyenReturnUrl(params) {
   bare.search = "";
   return build(bare);
 }
+function paymentMethodName(method) {
+  if (typeof method !== "string") return void 0;
+  const name = method.trim().toLowerCase().replace(/\s+/g, "-");
+  return name || void 0;
+}
 function resolveHttpsReturnUrl(overrideUrl, params = null) {
   let url = overrideUrl ?? void 0;
   if (!url && typeof window !== "undefined" && window.location) {
@@ -4771,6 +4862,8 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     this.currentStateValue = null;
     /** The last checkout + identity written to the memory — the state is set on every keystroke of the form. */
     this.lastRememberedSponsor = "";
+    /** Backend checkouts this page load announced with `vio:checkout-created`: one event each. */
+    this.announcedCheckouts = /* @__PURE__ */ new Set();
     /** Counts `open()` calls — see CheckoutState.session. */
     this.sessionSeq = 0;
     this.applePayAvailableCache = null;
@@ -4809,10 +4902,15 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     this.paymentMethodsCache = /* @__PURE__ */ new Map();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     this.paymentMethodsPromises = /* @__PURE__ */ new Map();
+    /** What the open checkout's cart looked like when it was last emitted. */
+    this.lastCartSignature = null;
     /** In-flight `getOrderReference` per checkout id (see there). */
     this.referenceInFlight = /* @__PURE__ */ new Map();
     this.kustomController = null;
     preloadStripeJs();
+    if (typeof cartManager.addEventListener === "function") {
+      cartManager.addEventListener("change", () => this.onCartChange());
+    }
   }
   /**
    * Every write of the state goes through here: a state that names its
@@ -4826,6 +4924,21 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     this.currentStateValue = next;
     if (next?.checkoutId && next.sponsorId) this.rememberSponsorOfCheckout(next.checkoutId, next.sponsorId);
   }
+  /** The open checkout's lines as a signature, to tell a real change from an echo. */
+  cartSignature(sponsorId) {
+    return (this.cartManager.getCart(sponsorId)?.items ?? []).map((i) => `${i.productId}:${i.variantId ?? ""}:${i.quantity}:${i.unitPrice}`).join("|");
+  }
+  /** The open checkout follows its cart: subtotal recomputed and `change` said when the lines differ. */
+  onCartChange() {
+    const state = this.state;
+    if (!state) return;
+    const subtotal = this.cartManager.subtotalForSponsor(state.sponsorId);
+    const signature = this.cartSignature(state.sponsorId);
+    if (subtotal === state.subtotal && signature === this.lastCartSignature) return;
+    this.lastCartSignature = signature;
+    this.state = { ...state, subtotal };
+    this.emit();
+  }
   open(sponsorId) {
     const cart = this.cartManager.getCart(sponsorId);
     if (!cart || cart.items.length === 0) {
@@ -4839,6 +4952,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
       // the host may have switched currency since the cart was created.
       currency: getGlobalCurrency()
     };
+    this.lastCartSignature = this.cartSignature(sponsorId);
     this.emit();
     return this.state;
   }
@@ -4863,9 +4977,15 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
       return void 0;
     }
   }
-  /** Create the backend checkout for the sponsor's cart (auto-accepts terms); born attributed when the facade knows the attribution. */
-  async createCheckout(sponsorId) {
+  /**
+   * Create the backend checkout for the sponsor's cart (auto-accepts terms);
+   * born attributed when the facade knows the attribution. `paymentMethod` is
+   * the method it is created to pay with, when the caller knows it (else the
+   * state's): it goes on `vio:checkout-created`.
+   */
+  async createCheckout(sponsorId, paymentMethod) {
     await this.cartManager.waitForCartMutations(sponsorId);
+    await this.cartManager.refreshFromServer(sponsorId);
     const cart = this.cartManager.getCart(sponsorId);
     let cartId = cart?.cartId;
     if (!cartId) {
@@ -4885,6 +5005,9 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
         checkout
       };
       this.emit();
+      this.announceCheckout(checkout.id, sponsorId, paymentMethod ?? this.state?.paymentMethod, {
+        campaignId: attribution?.campaign_id
+      });
       try {
         const updated = await updateCheckout(
           {
@@ -4907,6 +5030,35 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     }
     return checkout;
   }
+  /**
+   * `vio:checkout-created` on `window` — `{ sponsorId, checkoutId,
+   * paymentMethod, campaignId?, redirect }` — the moment a backend checkout
+   * exists for a payment, before anything is asked of the provider. Analytics
+   * answers it with `add_payment_info` (ADR-0039: the one link from the
+   * order Commerce confirms back to this browser's session); `redirect: true`
+   * when the page is about to leave for the provider. Once per checkout per
+   * page load; never throws.
+   */
+  announceCheckout(checkoutId, sponsorId, paymentMethod, opts = {}) {
+    if (!checkoutId || this.announcedCheckouts.has(checkoutId)) return;
+    this.announcedCheckouts.add(checkoutId);
+    if (typeof window === "undefined" || typeof window.dispatchEvent !== "function") return;
+    const method = paymentMethodName(paymentMethod);
+    try {
+      window.dispatchEvent(
+        new CustomEvent("vio:checkout-created", {
+          detail: {
+            sponsorId,
+            checkoutId,
+            ...method ? { paymentMethod: method } : {},
+            ...typeof opts.campaignId === "number" ? { campaignId: opts.campaignId } : {},
+            redirect: opts.redirect === true
+          }
+        })
+      );
+    } catch {
+    }
+  }
   /** Update the backend checkout (terms are re-asserted unless overridden; the attribution rides along unless the caller gives its own). */
   async updateCheckout(variables, sponsorId) {
     const spId = sponsorId ?? this.state?.sponsorId;
@@ -5136,10 +5288,11 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
    * backend cart + checkout exist, push email/address onto the checkout, and
    * return everything the payment mutation needs.
    */
-  async prepareRedirectPayment(sponsorId, formData, extraUpdateVars = {}) {
+  async prepareRedirectPayment(sponsorId, formData, extraUpdateVars = {}, leaving = false) {
     const spId = sponsorId ?? this.state?.sponsorId;
     if (!spId) throw new Error("[CheckoutManager] no sponsor for payment");
     await this.cartManager.waitForCartMutations(spId);
+    await this.cartManager.refreshFromServer(spId);
     const cart = this.cartManager.getCart(spId);
     let cartId = cart?.cartId;
     if (!cartId) {
@@ -5154,6 +5307,10 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     if (!checkoutId) {
       const checkoutRes = attribution ? await createCheckout(cartId, opts, { attribution }) : await createCheckout(cartId, opts);
       checkoutId = checkoutRes?.id;
+      this.announceCheckout(checkoutId, spId, String(extraUpdateVars.paymentMethod ?? "") || this.state?.paymentMethod, {
+        redirect: leaving,
+        campaignId: attribution?.campaign_id
+      });
     }
     if (!checkoutId) {
       throw new Error("[CheckoutManager] no backend checkout \u2014 cannot start the payment");
@@ -5222,7 +5379,8 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     const { spId, checkoutId, emailVal, opts } = await this.prepareRedirectPayment(
       sponsorId,
       formData,
-      { paymentMethod: "Stripe" }
+      { paymentMethod: "Stripe" },
+      true
     );
     const successUrl = resolveHttpsReturnUrl(null, {
       vio_payment: "success",
@@ -5261,7 +5419,8 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     const { spId, checkoutId, emailVal, opts } = await this.prepareRedirectPayment(
       sponsorId,
       formData,
-      { paymentMethod: "Vipps" }
+      { paymentMethod: "Vipps" },
+      true
     );
     const returnUrl = resolveHttpsReturnUrl(null, {
       vio_payment: "success",
@@ -5318,7 +5477,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     const opts = await getCartGraphQLOptions(spId);
     let checkoutId = this.state?.checkoutId;
     if (!checkoutId) {
-      const checkoutRes = await this.createCheckout(spId);
+      const checkoutRes = await this.createCheckout(spId, "kustom");
       checkoutId = checkoutRes?.id;
       if (checkoutId && this.state) {
         this.state = { ...this.state, checkoutId };
@@ -5394,7 +5553,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     const opts = await getCartGraphQLOptions(spId);
     let checkoutId = this.state?.checkoutId;
     if (!checkoutId) {
-      const checkoutRes = await this.createCheckout(spId);
+      const checkoutRes = await this.createCheckout(spId, "qliro");
       checkoutId = checkoutRes?.id;
       if (checkoutId && this.state) {
         this.state = { ...this.state, checkoutId };
@@ -5482,7 +5641,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     const opts = await getCartGraphQLOptions(spId);
     let checkoutId = this.state?.checkoutId;
     if (!checkoutId) {
-      const checkoutRes = await this.createCheckout(spId);
+      const checkoutRes = await this.createCheckout(spId, "walley");
       checkoutId = checkoutRes?.id;
       if (checkoutId && this.state) {
         this.state = { ...this.state, checkoutId };
@@ -5551,7 +5710,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
       if (this.state) this.state = { ...this.state, checkoutId };
     }
     if (!checkoutId) {
-      const checkoutRes = await this.createCheckout(spId);
+      const checkoutRes = await this.createCheckout(spId, "nexi");
       checkoutId = checkoutRes?.id;
       if (checkoutId && this.state) {
         this.state = { ...this.state, checkoutId };
@@ -6116,7 +6275,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     return async (raw) => {
       let checkoutId = this.state?.checkoutId;
       if (!checkoutId) {
-        const created = await this.createCheckout(spId);
+        const created = await this.createCheckout(spId, "apple-pay");
         checkoutId = created?.id ?? this.state?.checkoutId;
       }
       if (!checkoutId) {
@@ -6348,7 +6507,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     }
     let checkoutId = ctx.checkoutId ?? this.state.checkoutId;
     try {
-      const checkoutRes = await this.createCheckout(sponsorId);
+      const checkoutRes = await this.createCheckout(sponsorId, "klarna");
       if (checkoutRes?.id) {
         checkoutId = checkoutRes.id;
         ctx.checkoutId = checkoutRes.id;
@@ -6400,6 +6559,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     if (nativeRes.checkout_id) {
       ctx.checkoutId = nativeRes.checkout_id;
       this.state = { ...this.state, checkoutId: nativeRes.checkout_id };
+      this.announceCheckout(nativeRes.checkout_id, sponsorId, "klarna");
     }
     if (nativeRes.session_id) {
       ctx.sessionId = nativeRes.session_id;
@@ -6497,7 +6657,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
     try {
       let checkoutId = ctx.checkoutId ?? this.state.checkoutId;
       try {
-        const checkoutRes = await this.createCheckout(sponsorId);
+        const checkoutRes = await this.createCheckout(sponsorId, "klarna");
         if (checkoutRes?.id) {
           checkoutId = checkoutRes.id;
           ctx.checkoutId = checkoutRes.id;
@@ -6543,6 +6703,7 @@ var CheckoutManager = class _CheckoutManager extends EventTarget {
       if (nativeRes.checkout_id) {
         ctx.checkoutId = nativeRes.checkout_id;
         this.state = { ...this.state, checkoutId: nativeRes.checkout_id };
+        this.announceCheckout(nativeRes.checkout_id, sponsorId, "klarna");
       }
       if (nativeRes.session_id) {
         ctx.sessionId = nativeRes.session_id;
@@ -7040,6 +7201,8 @@ var AnalyticsManager = class extends EventTarget {
     this.landing = null;
     /** Checkouts (`c:<id>`) and orders (`o:<number>`) this page load reported a `purchase` for: one each. */
     this.purchased = /* @__PURE__ */ new Set();
+    /** Checkouts this page load reported an `add_payment_info` for: one each. */
+    this.paymentInfoReported = /* @__PURE__ */ new Set();
     /** Purchases still waiting for Vio's order number: each sends at once, with what it has, when called. */
     this.pendingPurchases = /* @__PURE__ */ new Set();
     /** Between `pagehide` and `pageshow` (bfcache): nothing waits, it all goes out now. */
@@ -7107,7 +7270,7 @@ var AnalyticsManager = class extends EventTarget {
     this.teardown.push(() => window.removeEventListener("pageshow", onPageShow));
     if (typeof document !== "undefined" && typeof document.addEventListener === "function") {
       const onVisibility = () => {
-        if (document.visibilityState !== "hidden" || this.pendingPurchases.size === 0) return;
+        if (document.visibilityState !== "hidden") return;
         this.settlePendingPurchases();
         this.flushWithBeacon();
       };
@@ -7520,6 +7683,34 @@ var AnalyticsManager = class extends EventTarget {
         ...snap || buyerId !== void 0 ? { commerce: { ...snap ?? {}, ...buyer } } : {}
       });
     });
+    on("vio:checkout-created", (ev) => {
+      const d = ev.detail ?? {};
+      const checkoutId = firstId(d.checkoutId);
+      if (!checkoutId || this.paymentInfoReported.has(checkoutId)) return;
+      this.paymentInfoReported.add(checkoutId);
+      const sponsorId = toNumber(d.sponsorId);
+      const base = { sponsorId, campaignId: campaignOf(d), slot: slotOf(d), ...contentOf(d) };
+      const payment = {
+        checkoutId,
+        ...typeof d.paymentMethod === "string" && d.paymentMethod ? { paymentMethod: d.paymentMethod } : {}
+      };
+      const { slices, explicit } = this.cartSlices(sponsorId);
+      if (slices.length > 1) {
+        for (const slice of slices) {
+          this.track("add_payment_info", {
+            context: this.sliceContext(slice, base),
+            commerce: { ...sliceCommerce(slice), ...payment },
+            props: { slice: slice.slice, slices: slice.slices }
+          });
+        }
+      } else {
+        this.track("add_payment_info", {
+          context: this.singleSliceContext(slices[0], explicit, base),
+          commerce: { ...this.cartCommerce(sponsorId) ?? {}, ...payment }
+        });
+      }
+      if (d.redirect === true) this.flushWithBeacon();
+    });
     on("vio:payment-success", (ev) => {
       const d = ev.detail ?? {};
       const ids = purchaseIdsOf(d);
@@ -7600,6 +7791,7 @@ var AnalyticsManager = class extends EventTarget {
         }
         this.record(event);
       }
+      this.sendNow();
     };
     const ask = ids.orderIdKind === "checkout" ? this.orderReferenceAsker(ids.checkoutId, sponsorId) : null;
     if (!ask) {
@@ -7608,7 +7800,6 @@ var AnalyticsManager = class extends EventTarget {
     }
     if (this.isPageHidden()) {
       send();
-      this.flushWithBeacon();
       return;
     }
     let done = false;
@@ -7622,6 +7813,14 @@ var AnalyticsManager = class extends EventTarget {
     this.pendingPurchases.add(settleNow);
     void waitForOrderNumber(ask, () => done).then(settle, () => settle());
   }
+  /**
+   * Sends the queue now, not at the next tick: by beacon when the page is
+   * hidden or going away (a request may not survive it), else by fetch.
+   */
+  sendNow() {
+    if (this.isPageHidden()) this.flushWithBeacon();
+    else void this.flush();
+  }
   /** Sends every purchase still waiting for its order number, at once, with what it has. */
   settlePendingPurchases() {
     for (const settle of [...this.pendingPurchases]) settle();
@@ -7957,6 +8156,7 @@ function pushGa4(event) {
     "add_to_cart",
     "view_cart",
     "begin_checkout",
+    "add_payment_info",
     "purchase"
   ]);
   if (!commerceNames.has(event.name)) return;
@@ -7970,6 +8170,7 @@ function pushGa4(event) {
       currency: commerce.currency,
       value: commerce.value,
       transaction_id: commerce.order_id,
+      payment_type: event.name === "add_payment_info" ? commerce.payment_method : void 0,
       items: commerce.items?.map(
         (i) => compact({
           item_id: i.product_id,
@@ -8794,5 +8995,5 @@ function vippsButtonAttributes(verb = "buy", opts = {}) {
 }
 
 export { ADD_ITEM_MUTATION, ADYEN_RETURN_METHOD, ADYEN_RETURN_QUERY_KEYS, AdyenOriginError, AnalyticsManager, BUYER_REF_MAX_LENGTH, CHECKOUT_ATTRIBUTION_CAPS, CHECKOUT_SPONSOR_STORAGE_KEY, CLIENT_LANDING_URL_MAX_LENGTH, CONTENT_URL_MAX_LENGTH, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GRAPHQL_INT_MAX, KUSTOM_RETURN_QUERY_KEYS, LINE_ORIGIN_CAPS, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_ITEM_WITH_ORIGIN_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, __decorateClass, activeCampaignEntry, addItem, adyenReturnOutcome, adyenReturnParams, autoSlotDisplayName, autoSlotId, buyerRefOf, campaignCandidates, capContentUrl, cartSlicesFrom, checkApplePayAvailability, checkoutAttributionOf, checkoutSponsorOf, componentKindOf, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, dominantCampaignOf, ensureVippsButton, entryContextOf, executeCartGraphQL, formatPrice, gatewayHas, gatewayHasBuyerRef, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCheckoutReference, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, isUnknownFeatureError, isUnknownTokenError, kustomReturnOutcome, landingUrl, lineOriginWire, lineOrigins, nexiReturnPaymentId, normalizeBuyerRef, normalizeOrigin, normalizeScope, normalizeSlotId, normalizeSlotKind, originAndPath, primaryImageUrl, purchaseFromPaymentSuccess, purchaseIdsOf, readNexiPending, rememberedCheckoutSponsor, resetGatewayFeatures, resolveCampaignId, resolveClientContext, resolveContent, resolveLanding, resolveSlotCampaign, sameOrigin, showApplePaySheet, sponsorCampaignEntry, sponsorIdentityFrom, storedLanding, toCampaignId, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes, withGatewayFeature };
-//# sourceMappingURL=chunk-AFJ5M53F.js.map
-//# sourceMappingURL=chunk-AFJ5M53F.js.map
+//# sourceMappingURL=chunk-AG4G2S2M.js.map
+//# sourceMappingURL=chunk-AG4G2S2M.js.map