@whop/elements 1.3.0 → 1.5.0

package/checkout.d.cts

@@ -152,10 +152,10 @@ export interface CheckoutElementCreateOptions {
  */
 export interface ExpressCheckoutElementProps {
 	/**
-	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Both wallets need the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
-	 * @default ["apple_pay","google_pay"]
+	 * Which wallets may render — a filter over what the buyer’s device and the seller actually offer. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first, with PayPal last, whatever order this lists. An empty list renders nothing (warned in dev builds). Every wallet needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
+	 * @default ["apple_pay","google_pay","paypal_express"]
 	 */
-	wallets?: ("apple_pay" | "google_pay")[];
+	wallets?: ("apple_pay" | "google_pay" | "paypal_express")[];
 	/**
 	 * How the buttons stack. `auto` follows the element’s own container — stacked in narrow containers, side by side in wide ones; `horizontal` and `vertical` force one arrangement.
 	 * @default "auto"
@@ -193,10 +193,10 @@ export interface ExpressCheckoutElementHandle {
  */
 export interface ExpressCheckoutElementCreateOptions {
 	/**
-	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Both wallets need the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
-	 * @default ["apple_pay","google_pay"]
+	 * Which wallets may render — a filter over what the buyer’s device and the seller actually offer. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first, with PayPal last, whatever order this lists. An empty list renders nothing (warned in dev builds). Every wallet needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
+	 * @default ["apple_pay","google_pay","paypal_express"]
 	 */
-	wallets?: ("apple_pay" | "google_pay")[];
+	wallets?: ("apple_pay" | "google_pay" | "paypal_express")[];
 	/**
 	 * How the buttons stack. `auto` follows the element’s own container — stacked in narrow containers, side by side in wide ones; `horizontal` and `vertical` force one arrangement.
 	 * @default "auto"
@@ -227,7 +227,7 @@ export interface CheckoutHandle {
 	 */
 	create(name: "checkout", options?: CheckoutElementCreateOptions): CheckoutElementHandle;
 	/**
-	 * One-press Apple Pay and Google Pay buttons for a checkout — the OS payment sheet collects whatever the session still needs (the buyer's email, a phone number where the seller collects one, a shipping address for physical goods, and in Apple Pay a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with — and the checkout's own payment method configuration allows — using the served button art, and renders nothing where no wallet is available. Both wallets require the page's domain to be a verified payment method domain: first-party whop.com pages are pre-approved, and any other site must register its domain through the Payment Method Domains API before either button renders there. Offering Google Pay on your own site is subject to the Google Pay API Terms of Service. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
+	 * One-press Apple Pay, Google Pay and PayPal buttons for a checkout — the wallet collects whatever the session still needs (the buyer's email, a shipping address for physical goods, a phone number where the seller collects one in Apple Pay and Google Pay, and in Apple Pay a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with — and the checkout's own payment method configuration allows — using the served button art, and renders nothing where no wallet is available. PayPal appears on one-time purchases where the seller accepts it and opens in its own window. All three wallets require the page's domain to be a verified payment method domain: first-party whop.com pages are pre-approved, and any other site must register its domain through the Payment Method Domains API before any of these buttons renders there. Offering Google Pay on your own site is subject to the Google Pay API Terms of Service. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
 	 * Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
 	 */
 	create(name: "expressCheckout", options?: ExpressCheckoutElementCreateOptions): ExpressCheckoutElementHandle;

package/checkout.d.ts

@@ -152,10 +152,10 @@ export interface CheckoutElementCreateOptions {
  */
 export interface ExpressCheckoutElementProps {
 	/**
-	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Both wallets need the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
-	 * @default ["apple_pay","google_pay"]
+	 * Which wallets may render — a filter over what the buyer’s device and the seller actually offer. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first, with PayPal last, whatever order this lists. An empty list renders nothing (warned in dev builds). Every wallet needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
+	 * @default ["apple_pay","google_pay","paypal_express"]
 	 */
-	wallets?: ("apple_pay" | "google_pay")[];
+	wallets?: ("apple_pay" | "google_pay" | "paypal_express")[];
 	/**
 	 * How the buttons stack. `auto` follows the element’s own container — stacked in narrow containers, side by side in wide ones; `horizontal` and `vertical` force one arrangement.
 	 * @default "auto"
@@ -193,10 +193,10 @@ export interface ExpressCheckoutElementHandle {
  */
 export interface ExpressCheckoutElementCreateOptions {
 	/**
-	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Both wallets need the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
-	 * @default ["apple_pay","google_pay"]
+	 * Which wallets may render — a filter over what the buyer’s device and the seller actually offer. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first, with PayPal last, whatever order this lists. An empty list renders nothing (warned in dev builds). Every wallet needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
+	 * @default ["apple_pay","google_pay","paypal_express"]
 	 */
-	wallets?: ("apple_pay" | "google_pay")[];
+	wallets?: ("apple_pay" | "google_pay" | "paypal_express")[];
 	/**
 	 * How the buttons stack. `auto` follows the element’s own container — stacked in narrow containers, side by side in wide ones; `horizontal` and `vertical` force one arrangement.
 	 * @default "auto"
@@ -227,7 +227,7 @@ export interface CheckoutHandle {
 	 */
 	create(name: "checkout", options?: CheckoutElementCreateOptions): CheckoutElementHandle;
 	/**
-	 * One-press Apple Pay and Google Pay buttons for a checkout — the OS payment sheet collects whatever the session still needs (the buyer's email, a phone number where the seller collects one, a shipping address for physical goods, and in Apple Pay a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with — and the checkout's own payment method configuration allows — using the served button art, and renders nothing where no wallet is available. Both wallets require the page's domain to be a verified payment method domain: first-party whop.com pages are pre-approved, and any other site must register its domain through the Payment Method Domains API before either button renders there. Offering Google Pay on your own site is subject to the Google Pay API Terms of Service. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
+	 * One-press Apple Pay, Google Pay and PayPal buttons for a checkout — the wallet collects whatever the session still needs (the buyer's email, a shipping address for physical goods, a phone number where the seller collects one in Apple Pay and Google Pay, and in Apple Pay a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with — and the checkout's own payment method configuration allows — using the served button art, and renders nothing where no wallet is available. PayPal appears on one-time purchases where the seller accepts it and opens in its own window. All three wallets require the page's domain to be a verified payment method domain: first-party whop.com pages are pre-approved, and any other site must register its domain through the Payment Method Domains API before any of these buttons renders there. Offering Google Pay on your own site is subject to the Google Pay API Terms of Service. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
 	 * Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
 	 */
 	create(name: "expressCheckout", options?: ExpressCheckoutElementCreateOptions): ExpressCheckoutElementHandle;

package/index.cjs

@@ -22,18 +22,27 @@ var npm_loader_exports = {};
 __export(npm_loader_exports, {
   SDK_URL: () => SDK_URL,
   WHOP_ELEMENTS_LOCALES: () => WHOP_ELEMENTS_LOCALES,
+  contentSecurityPolicy: () => contentSecurityPolicy,
   loadWhop: () => loadWhop,
   preloadHints: () => preloadHints
 });
 module.exports = __toCommonJS(npm_loader_exports);
 
+// <define:__WHOP_ELEMENTS_API_ORIGINS__>
+var define_WHOP_ELEMENTS_API_ORIGINS_default = { production: "https://api.whop.com", sandbox: "https://sandbox-api.whop.com" };
+
 // <define:__WHOP_ELEMENTS_LOCALES__>
 var define_WHOP_ELEMENTS_LOCALES_default = ["en", "es", "zh", "nl", "pt", "de", "hu", "it", "fr", "ja", "pl", "tr"];
 
+// <define:__WHOP_ELEMENTS_PAGE_REQUIREMENTS__>
+var define_WHOP_ELEMENTS_PAGE_REQUIREMENTS_default = { wallets: { production: { sources: { "frame-src": ["https://checkout.paypal.com", "https://assets.braintreegateway.com", "https://www.paypal.com"], "script-src": ["https://pay.google.com", "https://applepay.cdn-apple.com", "https://js.braintreegateway.com", "https://www.paypal.com", "https://c.paypal.com"], "connect-src": ["https://pay.google.com", "https://google.com", "https://account.google.com", "https://www.google.com", "https://api.basistheory.com", "https://payments.braintree-api.com", "https://api.braintreegateway.com", "https://api-m.paypal.com", "https://www.paypal.com"], "img-src": ["https://www.paypalobjects.com"] }, hints: [{ rel: "preload", href: "https://pay.google.com/gp/p/js/pay.js", as: "script" }, { rel: "preload", href: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js", as: "script", crossOrigin: "anonymous" }, { rel: "preload", href: "https://js.braintreegateway.com/web/3.146.0/js/paypal-checkout-v6.min.js", as: "script" }, { rel: "preload", href: "https://www.paypal.com/web-sdk/v6/core", as: "script" }, { rel: "preconnect", href: "https://api.basistheory.com", crossOrigin: "anonymous" }, { rel: "preconnect", href: "https://payments.braintree-api.com", crossOrigin: "anonymous" }, { rel: "preconnect", href: "https://api.braintreegateway.com", crossOrigin: "anonymous" }, { rel: "preconnect", href: "https://checkout.paypal.com" }, { rel: "preconnect", href: "https://assets.braintreegateway.com" }, { rel: "preconnect", href: "https://c.paypal.com" }, { rel: "preconnect", href: "https://api-m.paypal.com", crossOrigin: "anonymous" }, { rel: "preconnect", href: "https://www.paypal.com", crossOrigin: "anonymous" }] }, sandbox: { sources: { "frame-src": ["https://checkout.paypal.com", "https://assets.braintreegateway.com", "https://www.sandbox.paypal.com"], "script-src": ["https://pay.google.com", "https://applepay.cdn-apple.com", "https://js.braintreegateway.com", "https://www.sandbox.paypal.com", "https://c.paypal.com"], "connect-src": ["https://pay.google.com", "https://google.com", "https://account.google.com", "https://www.google.com", "https://api.basistheory.com", "https://payments.sandbox.braintree-api.com", "https://api.sandbox.braintreegateway.com", "https://api-m.sandbox.paypal.com", "https://www.sandbox.paypal.com"], "img-src": ["https://www.paypalobjects.com"] }, hints: [{ rel: "preload", href: "https://pay.google.com/gp/p/js/pay.js", as: "script" }, { rel: "preload", href: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js", as: "script", crossOrigin: "anonymous" }, { rel: "preload", href: "https://js.braintreegateway.com/web/3.146.0/js/paypal-checkout-v6.min.js", as: "script" }, { rel: "preload", href: "https://www.sandbox.paypal.com/web-sdk/v6/core", as: "script" }, { rel: "preconnect", href: "https://api.basistheory.com", crossOrigin: "anonymous" }, { rel: "preconnect", href: "https://payments.sandbox.braintree-api.com", crossOrigin: "anonymous" }, { rel: "preconnect", href: "https://api.sandbox.braintreegateway.com", crossOrigin: "anonymous" }, { rel: "preconnect", href: "https://checkout.paypal.com" }, { rel: "preconnect", href: "https://assets.braintreegateway.com" }, { rel: "preconnect", href: "https://c.paypal.com" }, { rel: "preconnect", href: "https://api-m.sandbox.paypal.com", crossOrigin: "anonymous" }, { rel: "preconnect", href: "https://www.sandbox.paypal.com", crossOrigin: "anonymous" }] } } };
+
 // ../../packages/elements-codegen/src/cli/build/npm-loader.ts
 var ORIGIN = "https://cdn.whop.com";
 var SDK_URL = "https://cdn.whop.com/elements/amber/elements.js";
 var WHOP_ELEMENTS_LOCALES = define_WHOP_ELEMENTS_LOCALES_default;
+var API_ORIGINS = define_WHOP_ELEMENTS_API_ORIGINS_default;
+var PAGE_REQUIREMENTS = define_WHOP_ELEMENTS_PAGE_REQUIREMENTS_default;
 var TAG = "script[data-whop-elements]";
 var resolved = null;
 function withRetry(promise) {
@@ -131,9 +140,187 @@ function watch(w, script, created) {
   }
   return script.__whopReady;
 }
-function preloadHints() {
-  return [
-    { rel: "preconnect", href: ORIGIN },
-    { rel: "preload", href: SDK_URL, as: "script" }
-  ];
+function environmentOf(environment) {
+  if (environment === void 0 || environment === "production") return "production";
+  if (environment === "sandbox") return "sandbox";
+  throw new Error(`unknown environment ${JSON.stringify(environment)}: expected "production" or "sandbox"`);
+}
+function apiOrigin(environment) {
+  return API_ORIGINS[environmentOf(environment)];
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+var PreloadHints = class extends Array {
+  // map/flatMap produce plain arrays: rendered <link> tags are not a hint list. The methods below
+  // keep hints as hints, so a narrowed list still has toLinkHeader() and friends.
+  static get [Symbol.species]() {
+    return Array;
+  }
+  filter(predicate, thisArg) {
+    return hintsFrom(super.filter(predicate, thisArg));
+  }
+  slice(start, end) {
+    return hintsFrom(super.slice(start, end));
+  }
+  concat(...items) {
+    return hintsFrom(super.concat(...items));
+  }
+  // copies sorted or reversed without Array.prototype.toSorted/toReversed, which older browsers lack.
+  toSorted(compareFn) {
+    return hintsFrom(this).sort(compareFn);
+  }
+  toReversed() {
+    const hints = hintsFrom(this);
+    hints.reverse();
+    return hints;
+  }
+  toLinkHeader() {
+    return this.map((h) => `<${h.href}>; rel=${h.rel}${h.as ? `; as=${h.as}` : ""}${h.crossOrigin ? `; crossorigin=${h.crossOrigin}` : ""}`).join(", ");
+  }
+  toHtml() {
+    return this.map((h) => `<link rel="${escapeAttribute(h.rel)}" href="${escapeAttribute(h.href)}"${h.as ? ` as="${escapeAttribute(h.as)}"` : ""}${h.crossOrigin ? ` crossorigin="${h.crossOrigin}"` : ""}>`).join("\n");
+  }
+  applyTo(headers) {
+    const value = this.toLinkHeader();
+    if (value) headers.append("Link", value);
+  }
+};
+function hintsFrom(items) {
+  const hints = new PreloadHints();
+  for (const item of items) hints.push(item);
+  return hints;
+}
+function preloadHints(options = {}) {
+  const hints = new PreloadHints();
+  const add = (hint) => {
+    if (!hints.some((h) => h.rel === hint.rel && h.href === hint.href && h.crossOrigin === hint.crossOrigin)) hints.push(hint);
+  };
+  add({ rel: "preconnect", href: ORIGIN });
+  add({ rel: "preload", href: SDK_URL, as: "script" });
+  add({ rel: "preconnect", href: apiOrigin(options.environment), crossOrigin: "anonymous" });
+  const environment = environmentOf(options.environment);
+  for (const [group, byEnvironment] of Object.entries(PAGE_REQUIREMENTS)) {
+    if (options[group] === false) continue;
+    for (const hint of byEnvironment[environment].hints) add(hint);
+  }
+  return hints;
+}
+var FALLBACKS = { "frame-src": ["child-src", "default-src"], "script-src": ["default-src"], "connect-src": ["default-src"], "img-src": ["default-src"] };
+var POLICY_HEADERS = ["Content-Security-Policy", "Content-Security-Policy-Report-Only"];
+var camelToKebab = (key) => key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+var kebabToCamel = (key) => key.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+function addSources(values, sources) {
+  const out = values.filter((v) => typeof v !== "string" || v.toLowerCase() !== "'none'");
+  for (const source of sources) if (!out.includes(source)) out.push(source);
+  return out;
+}
+function mergeDirectives(directives, sources) {
+  for (const [name, list] of Object.entries(sources)) {
+    if (list.length === 0) continue;
+    const own = directives.find((d) => d.name === name);
+    const elem = name === "script-src" ? directives.find((d) => d.name === "script-src-elem") : void 0;
+    if (elem) elem.values = addSources(elem.values, list);
+    if (own) {
+      own.values = addSources(own.values, list);
+      continue;
+    }
+    const fallback = FALLBACKS[name].map((f) => directives.find((d) => d.name === f)).find((d) => d !== void 0);
+    if (fallback) directives.push({ name, values: addSources([...fallback.values], list) });
+  }
+}
+function parsePolicy(policy) {
+  const directives = [];
+  for (const part of policy.split(";")) {
+    const [name, ...values] = part.trim().split(/\s+/).filter(Boolean);
+    if (name && !directives.some((d) => d.name === name.toLowerCase())) directives.push({ name: name.toLowerCase(), values });
+  }
+  return directives;
+}
+var serializePolicy = (directives) => directives.map((d) => [d.name, ...d.values].join(" ")).join("; ");
+var HELMET_DEFAULTS = { "script-src": ["'self'"], "img-src": ["'self'", "data:"] };
+function mergeHelmetDirectives(policy, sources) {
+  const keys = Object.keys(policy);
+  const camel = keys.length > 0 && keys.every((k) => !k.includes("-"));
+  const keyOf = (name) => keys.find((k) => camelToKebab(k) === name);
+  const read = /* @__PURE__ */ new Map();
+  const valuesOf = (key) => {
+    if (key === void 0) return void 0;
+    const seen = read.get(key);
+    if (seen) return [...seen];
+    const value = policy[key];
+    const values = typeof value === "string" ? value.split(/\s+/).filter(Boolean) : value != null && typeof value[Symbol.iterator] === "function" ? [...value] : void 0;
+    if (values) read.set(key, values);
+    return values && [...values];
+  };
+  const isIterator = (value) => value != null && typeof value.next === "function" && value[Symbol.iterator]?.() === value;
+  const shaped = (key, values) => {
+    const value = policy[key];
+    if (typeof value === "string") return values.join(" ");
+    if (value instanceof Set) return new Set(values);
+    return isIterator(value) ? values.values() : values;
+  };
+  const out = { ...policy };
+  for (const [name, list] of Object.entries(sources)) {
+    if (list.length === 0) continue;
+    const ownKey = keyOf(name);
+    const own = valuesOf(ownKey);
+    const helmetDefault = ownKey !== void 0 && policy[ownKey] === null ? void 0 : HELMET_DEFAULTS[name];
+    const seed = own ?? (helmetDefault ? [...helmetDefault] : FALLBACKS[name].map((f) => valuesOf(keyOf(f))).find((v) => v !== void 0)) ?? ["'self'"];
+    const merged = addSources(seed, list);
+    const key = ownKey ?? (camel ? kebabToCamel(name) : name);
+    out[key] = shaped(key, merged);
+    if (name === "script-src") {
+      const elemKey = keyOf("script-src-elem");
+      const elem = valuesOf(elemKey);
+      if (elemKey !== void 0 && elem) out[elemKey] = shaped(elemKey, addSources(elem, list));
+    }
+  }
+  for (const [key, values] of read) if (out[key] === policy[key] && isIterator(policy[key])) out[key] = values.values();
+  return out;
+}
+var ContentSecurityPolicy = class {
+  directives;
+  constructor(directives) {
+    this.directives = Object.freeze({
+      "frame-src": Object.freeze([...directives["frame-src"]]),
+      "script-src": Object.freeze([...directives["script-src"]]),
+      "connect-src": Object.freeze([...directives["connect-src"]]),
+      "img-src": Object.freeze([...directives["img-src"]])
+    });
+  }
+  // A directive with no sources is left out: written bare, it would allow nothing.
+  toString() {
+    return serializePolicy(
+      Object.entries(this.directives).filter(([, values]) => values.length > 0).map(([name, values]) => ({ name, values: [...values] }))
+    );
+  }
+  merge(policy) {
+    if (typeof policy !== "string") return mergeHelmetDirectives(policy, this.directives);
+    return policy.split(",").map((one) => {
+      const directives = parsePolicy(one);
+      mergeDirectives(directives, this.directives);
+      return serializePolicy(directives);
+    }).join(", ");
+  }
+  applyTo(headers) {
+    for (const name of POLICY_HEADERS) {
+      const value = headers.get(name);
+      if (value !== null) headers.set(name, this.merge(value));
+    }
+  }
+  toHtml(policy) {
+    return `<meta http-equiv="Content-Security-Policy" content="${escapeAttribute(this.merge(policy))}">`;
+  }
+};
+function contentSecurityPolicy(options = {}) {
+  const directives = { "frame-src": [ORIGIN], "script-src": [ORIGIN], "connect-src": [apiOrigin(options.environment)], "img-src": [] };
+  const environment = environmentOf(options.environment);
+  for (const [group, byEnvironment] of Object.entries(PAGE_REQUIREMENTS)) {
+    if (options[group] === false) continue;
+    for (const [name, list] of Object.entries(byEnvironment[environment].sources)) {
+      for (const source of list) if (!directives[name].includes(source)) directives[name].push(source);
+    }
+  }
+  return new ContentSecurityPolicy(directives);
 }

package/index.d.cts

@@ -61,8 +61,71 @@ export type WhopLoad = Promise<WhopConstructor> & { retry(): WhopLoad };
 /** Load the hosted SDK: injects the `<script data-whop-elements>` tag once and resolves the global constructor. Safe to call any number of times: one script, one shared promise. A failed load is held, so every later call returns the same rejected promise and nothing retries on its own; call `retry()` on it to load again. */
 export declare function loadWhop(): WhopLoad;
 
-/** Resource hints (preconnect/preload) for the hosted SDK. Render them into `<head>` to start the fetch before `loadWhop()` runs. */
-export declare function preloadHints(): { rel: string; href: string; as?: string }[];
+/** One `<link>` hint: render it into `<head>`, or send the list as a `Link` header. */
+export interface PreloadHint {
+	rel: string;
+	href: string;
+	as?: string;
+	crossOrigin?: "anonymous";
+}
+
+/** Which connections `preloadHints()` warms beyond the hosted SDK. Unknown keys are ignored. */
+export interface PreloadHintsOptions {
+	/** Which environment to warm for: the Whop API, and each provider's sandbox hosts in sandbox. Defaults to production. */
+	environment?: NonNullable<WhopGlobalConfig["environment"]>;
+	/**
+	 * Apple Pay, Google Pay, and PayPal: preloads its scripts and warms the connections it opens from your page. Pass false on pages that don't show it.
+	 */
+	wallets?: boolean;
+}
+
+/** The hints `preloadHints()` returns: an array of {@link PreloadHint}, plus ways to apply it. `filter`, `slice`, `concat`, `toSorted` and `toReversed` keep these methods; `map` returns a plain array. */
+export interface WhopPreloadHints<T extends PreloadHint = PreloadHint> extends Array<T> {
+	filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: unknown): WhopPreloadHints<S>;
+	filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: unknown): WhopPreloadHints<T>;
+	slice(start?: number, end?: number): WhopPreloadHints<T>;
+	concat(...items: (T | ConcatArray<T>)[]): WhopPreloadHints<T>;
+	toSorted(compareFn?: (a: T, b: T) => number): WhopPreloadHints<T>;
+	toReversed(): WhopPreloadHints<T>;
+	/** The hints as one `Link` header value (servers and CDNs can turn it into 103 Early Hints). */
+	toLinkHeader(): string;
+	/** The hints as `<link>` tags, for server-rendered templates. */
+	toHtml(): string;
+	/** Append the hints to a response's `Link` header. */
+	applyTo(headers: Headers): void;
+}
+
+/** Resource hints (preconnect/preload) for the hosted SDK, the Whop API, and the scripts and connections elements use on your page. Render them into `<head>` to start the fetch before `loadWhop()` runs. */
+export declare function preloadHints(options?: PreloadHintsOptions): WhopPreloadHints;
+
+/** Which origins the policy allows. Unknown keys are ignored. */
+export interface ContentSecurityPolicyOptions {
+	/** Which environment the policy allows: the Whop API, and each provider's sandbox hosts in sandbox. Defaults to production. */
+	environment?: NonNullable<WhopGlobalConfig["environment"]>;
+	/**
+	 * Apple Pay, Google Pay, and PayPal: allows the origins it reaches from your page. Pass false on pages that don't show it.
+	 */
+	wallets?: boolean;
+}
+
+/** The Content Security Policy sources elements need on your page. Merge them into your own policy; on their own they block everything else your page loads. */
+export interface WhopContentSecurityPolicy {
+	/** The sources elements need, by directive. */
+	readonly directives: { readonly "frame-src": readonly string[]; readonly "script-src": readonly string[]; readonly "connect-src": readonly string[]; readonly "img-src": readonly string[] };
+	/** Only the sources elements need, as a policy string, leaving out a directive with none. Merge it into your own policy; used alone it blocks everything else. */
+	toString(): string;
+	/** Your policy with these sources added. A directive you don't set is left alone, except that one falling back to `default-src` starts from those values. */
+	merge(policy: string): string;
+	/** Your directives object, in helmet's shape, with these sources added. It assumes helmet's defaults (`useDefaults: true`), which fill every directive you leave out, so these directives are always written, starting from your value, else what helmet would send: `'self'` for `script-src`, `'self' data:` for `img-src`, and your `child-src` or `default-src` (else `'self'`) for the others. Other keys are returned as they were. */
+	merge<T extends Record<string, unknown>>(directives: T): T;
+	/** Merge these sources into the response's `Content-Security-Policy` (and `Content-Security-Policy-Report-Only`) headers. Does nothing to a response that sets neither. */
+	applyTo(headers: Headers): void;
+	/** Your policy, merged, as a `<meta http-equiv>` tag. A meta tag works only when it is your page's whole policy: the browser also enforces any header policy on top of it. */
+	toHtml(policy: string): string;
+}
+
+/** The Content Security Policy sources elements need on your page: the hosted frames and SDK, the Whop API, and the origins elements reach from your page. The scripts elements load for Apple Pay, Google Pay, and PayPal come from other companies and can load resources beyond these: check each provider's Content Security Policy guidance. A modal element dims the page behind it with an inline style, which a `style-src` without inline styles leaves out; the modal still works. */
+export declare function contentSecurityPolicy(options?: ContentSecurityPolicyOptions): WhopContentSecurityPolicy;
 
 /** The locales this app's elements are built with, the default locale first: exactly the values `locale` accepts. `includes()` accepts any string and narrows it to `WhopElementsLocale`, so use it to validate dynamic values; anything unlisted falls back to the default locale. */
 export declare const WHOP_ELEMENTS_LOCALES: readonly WhopElementsLocale[] & {

package/index.d.ts

@@ -61,8 +61,71 @@ export type WhopLoad = Promise<WhopConstructor> & { retry(): WhopLoad };
 /** Load the hosted SDK: injects the `<script data-whop-elements>` tag once and resolves the global constructor. Safe to call any number of times: one script, one shared promise. A failed load is held, so every later call returns the same rejected promise and nothing retries on its own; call `retry()` on it to load again. */
 export declare function loadWhop(): WhopLoad;
 
-/** Resource hints (preconnect/preload) for the hosted SDK. Render them into `<head>` to start the fetch before `loadWhop()` runs. */
-export declare function preloadHints(): { rel: string; href: string; as?: string }[];
+/** One `<link>` hint: render it into `<head>`, or send the list as a `Link` header. */
+export interface PreloadHint {
+	rel: string;
+	href: string;
+	as?: string;
+	crossOrigin?: "anonymous";
+}
+
+/** Which connections `preloadHints()` warms beyond the hosted SDK. Unknown keys are ignored. */
+export interface PreloadHintsOptions {
+	/** Which environment to warm for: the Whop API, and each provider's sandbox hosts in sandbox. Defaults to production. */
+	environment?: NonNullable<WhopGlobalConfig["environment"]>;
+	/**
+	 * Apple Pay, Google Pay, and PayPal: preloads its scripts and warms the connections it opens from your page. Pass false on pages that don't show it.
+	 */
+	wallets?: boolean;
+}
+
+/** The hints `preloadHints()` returns: an array of {@link PreloadHint}, plus ways to apply it. `filter`, `slice`, `concat`, `toSorted` and `toReversed` keep these methods; `map` returns a plain array. */
+export interface WhopPreloadHints<T extends PreloadHint = PreloadHint> extends Array<T> {
+	filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: unknown): WhopPreloadHints<S>;
+	filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: unknown): WhopPreloadHints<T>;
+	slice(start?: number, end?: number): WhopPreloadHints<T>;
+	concat(...items: (T | ConcatArray<T>)[]): WhopPreloadHints<T>;
+	toSorted(compareFn?: (a: T, b: T) => number): WhopPreloadHints<T>;
+	toReversed(): WhopPreloadHints<T>;
+	/** The hints as one `Link` header value (servers and CDNs can turn it into 103 Early Hints). */
+	toLinkHeader(): string;
+	/** The hints as `<link>` tags, for server-rendered templates. */
+	toHtml(): string;
+	/** Append the hints to a response's `Link` header. */
+	applyTo(headers: Headers): void;
+}
+
+/** Resource hints (preconnect/preload) for the hosted SDK, the Whop API, and the scripts and connections elements use on your page. Render them into `<head>` to start the fetch before `loadWhop()` runs. */
+export declare function preloadHints(options?: PreloadHintsOptions): WhopPreloadHints;
+
+/** Which origins the policy allows. Unknown keys are ignored. */
+export interface ContentSecurityPolicyOptions {
+	/** Which environment the policy allows: the Whop API, and each provider's sandbox hosts in sandbox. Defaults to production. */
+	environment?: NonNullable<WhopGlobalConfig["environment"]>;
+	/**
+	 * Apple Pay, Google Pay, and PayPal: allows the origins it reaches from your page. Pass false on pages that don't show it.
+	 */
+	wallets?: boolean;
+}
+
+/** The Content Security Policy sources elements need on your page. Merge them into your own policy; on their own they block everything else your page loads. */
+export interface WhopContentSecurityPolicy {
+	/** The sources elements need, by directive. */
+	readonly directives: { readonly "frame-src": readonly string[]; readonly "script-src": readonly string[]; readonly "connect-src": readonly string[]; readonly "img-src": readonly string[] };
+	/** Only the sources elements need, as a policy string, leaving out a directive with none. Merge it into your own policy; used alone it blocks everything else. */
+	toString(): string;
+	/** Your policy with these sources added. A directive you don't set is left alone, except that one falling back to `default-src` starts from those values. */
+	merge(policy: string): string;
+	/** Your directives object, in helmet's shape, with these sources added. It assumes helmet's defaults (`useDefaults: true`), which fill every directive you leave out, so these directives are always written, starting from your value, else what helmet would send: `'self'` for `script-src`, `'self' data:` for `img-src`, and your `child-src` or `default-src` (else `'self'`) for the others. Other keys are returned as they were. */
+	merge<T extends Record<string, unknown>>(directives: T): T;
+	/** Merge these sources into the response's `Content-Security-Policy` (and `Content-Security-Policy-Report-Only`) headers. Does nothing to a response that sets neither. */
+	applyTo(headers: Headers): void;
+	/** Your policy, merged, as a `<meta http-equiv>` tag. A meta tag works only when it is your page's whole policy: the browser also enforces any header policy on top of it. */
+	toHtml(policy: string): string;
+}
+
+/** The Content Security Policy sources elements need on your page: the hosted frames and SDK, the Whop API, and the origins elements reach from your page. The scripts elements load for Apple Pay, Google Pay, and PayPal come from other companies and can load resources beyond these: check each provider's Content Security Policy guidance. A modal element dims the page behind it with an inline style, which a `style-src` without inline styles leaves out; the modal still works. */
+export declare function contentSecurityPolicy(options?: ContentSecurityPolicyOptions): WhopContentSecurityPolicy;
 
 /** The locales this app's elements are built with, the default locale first: exactly the values `locale` accepts. `includes()` accepts any string and narrows it to `WhopElementsLocale`, so use it to validate dynamic values; anything unlisted falls back to the default locale. */
 export declare const WHOP_ELEMENTS_LOCALES: readonly WhopElementsLocale[] & {