Overlay checkout

Use this when you open Paddle's checkout with Paddle.Checkout.open() — the overlay or inline experience, with no server call of your own.

The visitor id is read client-side and passed as customData.

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
}

// Left out entirely when absent — an `undefined` value is not the same as no
// value, and Paddle stores the key either way.
const attribution = {};
const vid = getCookie("ts_vid");
const vs = getCookie("ts_vs");
if (vid) attribution.ts_vid = vid;
if (vs) attribution.ts_vs = vs;

Paddle.Checkout.open({
  items: [{ priceId: "pri_01…", quantity: 1 }],
  customData: attribution,
});

The cookie is readable here, and that is deliberate

Our visitor cookie is not httpOnly, precisely so a browser-side checkout can read it. Nothing else about it is special: it holds an opaque id and no personal data.

If your site sets a Content Security Policy that blocks inline scripts, put this in a file rather than a <script> block — otherwise the snippet silently does not run and every payment arrives unattributed.

When the cookie is missing

Ship the checkout anyway. A visitor with cookies blocked, or one who reaches your pricing page in a fresh private window, simply has no id — the payment is recorded under unattributed and still counts toward your revenue total.

What you must not do is send an empty string or a placeholder. That creates a visitor id that matches nothing, which is worse than none: it looks attributed and points nowhere.

What happens on renewals

Nothing further. Paddle copies customData onto every renewal transaction of that subscription, so a customer's second month is attributed to the visit that won them.