React to Cart Changes in a Checkout Drop Zone: Cart Events Guide

const cartToken = new URLSearchParams(location.search).get("token");
const CHECKOUT_HOSTS = ["checkout.fluid.app", "checkout.fluid-staging.app"];
let checkoutOrigin = null; // learned from the first validated message

// Never post with "*": the message carries the cart token. A message whose
// target origin does not match the parent is dropped silently, so one post
// per origin you accept reaches checkout and nothing else.
function postToCheckout(message) {
  const targets = checkoutOrigin
    ? [checkoutOrigin]
    : CHECKOUT_HOSTS.map((host) => `https://${host}`);
  for (const target of targets) window.parent.postMessage(message, target);
}

postToCheckout({ type: "FLUID_CART_READY", version: 1, cart_token: cartToken });

let lastSequence = -1;

function isCheckoutOrigin(rawOrigin) {
  let origin;
  try { origin = new URL(rawOrigin); } catch { return false; }
  return origin.protocol === "https:" && CHECKOUT_HOSTS.some(
    (host) => origin.hostname === host || origin.hostname.endsWith(`.${host}`),
  );
}

window.addEventListener("message", (event) => {
  if (event.source !== window.parent) return;
  if (!isCheckoutOrigin(event.origin)) return;

  const message = event.data;
  if (!message || message.type !== "FLUID_CART_UPDATED" || message.version !== 1) return;

  const change = message.payload;
  if (!change || change.cart_token !== cartToken) return;
  if (!Number.isSafeInteger(change.sequence) || change.sequence < 0) return;
  if (change.sequence <= lastSequence) return; // a replay, already handled

  if (checkoutOrigin !== event.origin) {
    // Exact and validated: use it for every later post. Anything sent before
    // this point may have been dropped (a subdomain-hosted checkout matches
    // none of the apex targets), so re-report the height now.
    checkoutOrigin = event.origin;
    reportHeight(); // defined in the height step below
  }
  lastSequence = change.sequence;
  refreshFromCart().then((outcome) => {
    // See the fallback step below: a failed read must not strand the embed.
    if (outcome === false) startFallback(); else stopFallback();
  });
});

let inFlight = null;
let trailing = null;

// Resolves true when the cart rendered, false when the read failed, and
// null when there is no cart to read on this surface; never rejects.
// A caller that arrives mid-read gets the promise of the read that runs
// AFTER the current one, so it never acts on a result older than its event.
function refreshFromCart() {
  if (inFlight) {
    trailing ??= inFlight.then(() => { trailing = null; return refreshFromCart(); });
    return trailing;
  }
  inFlight = (async () => {
    const response = await fetch(`/widget/cart?token=${encodeURIComponent(cartToken)}`);
    if (response.status === 404) return null; // not a cart token on this surface
    if (!response.ok) throw new Error(`Cart read failed (${response.status})`);
    render(await response.json());
    return true;
  })()
    .catch((error) => {
      console.warn("Cart read failed; keeping the last render", error);
      return false; // the last successful render stays on screen
    })
    .finally(() => { inFlight = null; });
  return inFlight;
}

let fallback = null;

function startFallback() {
  if (fallback) return; // already polling
  fallback = setInterval(() => {
    if (document.visibilityState === "hidden") return;
    refreshFromCart().then((outcome) => {
      if (outcome === null) stopFallback(); // the token stopped being a cart token
    });
  }, 30_000);
}

function stopFallback() {
  if (fallback) clearInterval(fallback);
  fallback = null;
}

refreshFromCart().then((outcome) => {
  if (outcome === null) return; // 404: nothing to poll for on this surface
  startFallback();
});

function reportHeight() {
  // Checkout ignores anything outside 1–9,999, so clamp rather than send raw.
  const height = Math.min(9999, Math.max(1, Math.round(document.body.scrollHeight)));
  postToCheckout({ type: "RESIZE", height });
}

new ResizeObserver(reportHeight).observe(document.body);