@contentcredits/sdk 2.11.0 → 2.13.0

package/dist/content-credits.esm.js

@@ -11,7 +11,7 @@ function normalizeArticleUrl(articleUrl) {
     }
 }
 function resolveConfig(raw) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     if (!raw.apiKey || typeof raw.apiKey !== 'string' || raw.apiKey.trim() === '') {
         throw new Error('[ContentCredits] apiKey is required. Get yours from the Content Credits admin panel.');
     }
@@ -20,7 +20,7 @@ function resolveConfig(raw) {
     try {
         hostName = new URL(articleUrl).hostname;
     }
-    catch (_m) {
+    catch (_o) {
         throw new Error(`[ContentCredits] Invalid articleUrl: "${articleUrl}"`);
     }
     return {
@@ -34,9 +34,11 @@ function resolveConfig(raw) {
         extensionId: (_e = raw.extensionId) !== null && _e !== void 0 ? _e : "ljehdpabbhgccmanhjdfacjnaigpgcml",
         debug: (_f = raw.debug) !== null && _f !== void 0 ? _f : false,
         headless: (_g = raw.headless) !== null && _g !== void 0 ? _g : false,
+        paywallMode: (_h = raw.paywallMode) !== null && _h !== void 0 ? _h : 'overlay',
+        paywallTopSlot: raw.paywallTopSlot,
+        reactDOM: raw.reactDOM,
         apiBaseUrl: "https://api.contentcredits.com",
         accountsUrl: "https://accounts.contentcredits.com",
-        paywallTemplate: raw.paywallTemplate,
         onAccessGranted: raw.onAccessGranted,
         onStateChange: raw.onStateChange,
         onReady: raw.onReady,
@@ -48,8 +50,8 @@ function resolveConfig(raw) {
         onUserLogout: raw.onUserLogout,
         onError: raw.onError,
         theme: {
-            primaryColor: (_j = (_h = raw.theme) === null || _h === void 0 ? void 0 : _h.primaryColor) !== null && _j !== void 0 ? _j : '#44C678',
-            fontFamily: (_l = (_k = raw.theme) === null || _k === void 0 ? void 0 : _k.fontFamily) !== null && _l !== void 0 ? _l : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+            primaryColor: (_k = (_j = raw.theme) === null || _j === void 0 ? void 0 : _j.primaryColor) !== null && _k !== void 0 ? _k : '#44C678',
+            fontFamily: (_m = (_l = raw.theme) === null || _l === void 0 ? void 0 : _l.fontFamily) !== null && _m !== void 0 ? _m : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
         },
     };
 }
@@ -542,9 +544,9 @@ function createGate(options) {
         }
         contentEl.setAttribute(GATE_ATTR, 'true');
         gated = true;
-        // Add a gradient fade at the bottom of the visible teaser so the cutoff
-        // looks intentional rather than abrupt.
-        if (!contentEl.querySelector('[data-cc-fade]')) {
+        // In overlay mode the gradient is part of the paywall panel itself.
+        // In inline mode inject a fade element at the bottom of the teaser.
+        if (options.paywallMode === 'inline' && !contentEl.querySelector('[data-cc-fade]')) {
             const prevPos = contentEl.style.position;
             if (!prevPos || prevPos === 'static')
                 contentEl.style.position = 'relative';
@@ -643,7 +645,7 @@ function getPaywallStyles(primaryColor, fontFamily) {
     return `
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-    /* Inline paywall panel — sits below the teaser content in the page flow */
+    /* ── Inline paywall panel — sits below teaser in the page flow ── */
     .cc-paywall-inline {
       width: 100%;
       padding: 36px 24px 32px;
@@ -670,6 +672,87 @@ function getPaywallStyles(primaryColor, fontFamily) {
       line-height: 1.6;
     }
 
+    /* ── Overlay paywall panel — full-width white panel below gated content ── */
+    .cc-paywall-overlay {
+      /* Break out of any max-width container to span the full viewport */
+      width: 100vw;
+      margin-left: calc(50% - 50vw);
+      background: #fff;
+      font-family: ${fontFamily};
+    }
+
+    /* Gradient that fades the article into the white panel */
+    .cc-paywall-overlay-gradient {
+      width: 100%;
+      height: 120px;
+      background: linear-gradient(to bottom, transparent 0%, #fff 100%);
+      margin-top: -120px;
+      pointer-events: none;
+      position: relative;
+      z-index: 1;
+    }
+
+    /* Top slot — client-supplied content */
+    .cc-paywall-overlay-slot {
+      padding: 32px 24px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* Our SDK's unlock section below the slot */
+    .cc-paywall-overlay-body {
+      padding: 20px 24px 32px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0;
+      text-align: center;
+    }
+
+    /* Slot item — heading */
+    .cc-slot-heading {
+      font-size: 22px;
+      font-weight: 700;
+      color: #111827;
+      text-align: center;
+      line-height: 1.3;
+    }
+
+    /* Slot item — subheading */
+    .cc-slot-subheading {
+      font-size: 16px;
+      font-weight: 600;
+      color: #374151;
+      text-align: center;
+    }
+
+    /* Slot item — body text */
+    .cc-slot-text {
+      font-size: 14px;
+      color: #6b7280;
+      text-align: center;
+      line-height: 1.6;
+    }
+
+    /* Slot item — divider with optional label */
+    .cc-slot-divider {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+      max-width: 320px;
+      font-size: 13px;
+      color: #9ca3af;
+    }
+    .cc-slot-divider::before,
+    .cc-slot-divider::after {
+      content: '';
+      flex: 1;
+      border-top: 1px solid #e5e7eb;
+    }
+
     .cc-btn {
       display: inline-flex;
       align-items: center;
@@ -1194,45 +1277,84 @@ function sanitizeUrl(url) {
 const HOST_ID = 'cc-paywall-host';
 function createPaywallRenderer(config) {
     let root = null;
-    let overlay = null;
+    // In inline mode: the single panel div. In overlay mode: the body section only.
+    let body = null;
+    // Tracks a mounted React 18 root so we can unmount it on destroy.
+    let reactRoot = null;
     function init() {
-        // Insert the shadow host immediately after the content element so the
-        // paywall panel flows inline below the teaser — no modal, no backdrop.
         const contentEl = document.querySelector(config.contentSelector);
         if (!contentEl)
             return;
         const { root: shadowRoot } = createInlineShadowHost(HOST_ID, contentEl);
         root = shadowRoot;
         injectStyles(root, getPaywallStyles(config.theme.primaryColor, config.theme.fontFamily));
-        overlay = el('div');
-        overlay.className = 'cc-paywall-inline';
-        root.appendChild(overlay);
+        if (config.paywallMode === 'overlay') {
+            initOverlay(root, contentEl);
+        }
+        else {
+            initInline(root);
+        }
+    }
+    function initInline(shadowRoot) {
+        body = el('div');
+        body.className = 'cc-paywall-inline';
+        shadowRoot.appendChild(body);
+    }
+    function initOverlay(shadowRoot, contentEl) {
+        var _a, _b;
+        const panel = el('div');
+        panel.className = 'cc-paywall-overlay';
+        // Gradient that visually fades the article into the white panel.
+        // We read the computed background of the content element's parent so the
+        // gradient blends correctly on sites with non-white backgrounds.
+        const gradient = el('div');
+        gradient.className = 'cc-paywall-overlay-gradient';
+        const parentBg = getComputedStyle((_a = contentEl.parentElement) !== null && _a !== void 0 ? _a : contentEl).backgroundColor;
+        if (parentBg && parentBg !== 'rgba(0, 0, 0, 0)' && parentBg !== 'transparent') {
+            gradient.style.background = `linear-gradient(to bottom, transparent 0%, ${parentBg} 100%)`;
+        }
+        panel.appendChild(gradient);
+        // Top slot — client content
+        const slot = el('div');
+        slot.className = 'cc-paywall-overlay-slot';
+        reactRoot = (_b = mountTopSlot(slot, config.paywallTopSlot, config.reactDOM)) !== null && _b !== void 0 ? _b : null;
+        panel.appendChild(slot);
+        // Only render the "or" divider between slot and body when the slot has content
+        if (config.paywallTopSlot) {
+            const divider = el('div');
+            divider.className = 'cc-slot-divider';
+            divider.style.cssText = 'margin: 4px auto 0; padding: 0 24px;';
+            divider.textContent = 'or';
+            panel.appendChild(divider);
+        }
+        // Our SDK's unlock body
+        body = el('div');
+        body.className = 'cc-paywall-overlay-body';
+        panel.appendChild(body);
+        shadowRoot.appendChild(panel);
     }
     function render(state, callbacks, meta) {
         var _a, _b, _c;
-        // During the initial access check the content is already hidden by the
-        // gate — no need to show a spinner in the paywall slot.
         if (state === 'checking')
             return;
-        if (!overlay)
+        if (!body)
             init();
-        if (!overlay)
+        if (!body)
             return;
-        // Clear previous content
-        while (overlay.firstChild)
-            overlay.removeChild(overlay.firstChild);
+        while (body.firstChild)
+            body.removeChild(body.firstChild);
         switch (state) {
             case 'login':
-                renderLogin(overlay, callbacks);
+                renderLogin(body, callbacks);
                 break;
             case 'purchase':
-                renderPurchase(overlay, callbacks, (_a = meta === null || meta === void 0 ? void 0 : meta.requiredCredits) !== null && _a !== void 0 ? _a : null);
+                renderPurchase(body, callbacks, (_a = meta === null || meta === void 0 ? void 0 : meta.requiredCredits) !== null && _a !== void 0 ? _a : null);
                 break;
             case 'insufficient':
-                renderInsufficient(overlay, callbacks, (_b = meta === null || meta === void 0 ? void 0 : meta.requiredCredits) !== null && _b !== void 0 ? _b : null, (_c = meta === null || meta === void 0 ? void 0 : meta.creditBalance) !== null && _c !== void 0 ? _c : null);
+                renderInsufficient(body, callbacks, (_b = meta === null || meta === void 0 ? void 0 : meta.requiredCredits) !== null && _b !== void 0 ? _b : null, (_c = meta === null || meta === void 0 ? void 0 : meta.creditBalance) !== null && _c !== void 0 ? _c : null);
                 break;
             case 'loading':
-                renderLoading(overlay);
+                renderLoading(body);
                 break;
             case 'granted':
                 destroy();
@@ -1240,33 +1362,44 @@ function createPaywallRenderer(config) {
         }
     }
     function renderLogin(parent, cb) {
-        parent.appendChild(el('h2', 'This article requires a subscription'));
-        parent.appendChild(el('p', 'Log in with your Content Credits account to unlock this article.'));
-        const btn = el('button', 'Login & Buy with Content Credits');
+        // Only show the heading/description in inline mode; in overlay mode the
+        // client's top slot already provides the article context.
+        if (config.paywallMode === 'inline') {
+            parent.appendChild(el('h2', 'This article requires a subscription'));
+            parent.appendChild(el('p', 'Log in with your Content Credits account to unlock this article.'));
+        }
+        const btn = el('button', 'Login & Unlock with Content Credits');
         btn.className = 'cc-btn cc-btn-primary';
         btn.addEventListener('click', () => { void cb.onLogin(); });
         parent.appendChild(btn);
         parent.appendChild(poweredBy());
     }
     function renderPurchase(parent, cb, credits) {
-        parent.appendChild(el('h2', 'Unlock this article'));
-        if (credits !== null) {
-            const badge = el('span', `${credits} credit${credits !== 1 ? 's' : ''}`);
-            badge.className = 'cc-credit-badge';
-            parent.appendChild(badge);
-        }
-        parent.appendChild(el('p', 'Use your Content Credits balance to instantly access this premium article.'));
-        const btn = el('button', credits !== null ? `Buy for ${credits} Credit${credits !== 1 ? 's' : ''}` : 'Buy with Content Credits');
-        btn.className = 'cc-btn cc-btn-primary';
+        if (config.paywallMode === 'inline') {
+            parent.appendChild(el('h2', 'Unlock this article'));
+            if (credits !== null) {
+                const badge = el('span', `${credits} credit${credits !== 1 ? 's' : ''}`);
+                badge.className = 'cc-credit-badge';
+                parent.appendChild(badge);
+            }
+            parent.appendChild(el('p', 'Use your Content Credits balance to instantly access this premium article.'));
+        }
+        const label = credits !== null
+            ? `Unlock Just This Story · ${credits} Credit${credits !== 1 ? 's' : ''}`
+            : 'Unlock Just This Story';
+        const btn = el('button', label);
+        btn.className = 'cc-btn cc-btn-outline';
         btn.addEventListener('click', () => { void cb.onPurchase(); });
         parent.appendChild(btn);
         parent.appendChild(poweredBy());
     }
     function renderInsufficient(parent, cb, required, available) {
-        parent.appendChild(el('h2', 'Not enough credits'));
+        if (config.paywallMode === 'inline') {
+            parent.appendChild(el('h2', 'Not enough credits'));
+        }
         const detail = required !== null && available !== null
-            ? `You need ${required} credit${required !== 1 ? 's' : ''} but have ${available}. Top up to unlock this article.`
-            : 'You don\'t have enough credits to unlock this article. Purchase more to continue.';
+            ? `You need ${required} credit${required !== 1 ? 's' : ''} but only have ${available}.`
+            : 'You don\'t have enough credits to unlock this article.';
         parent.appendChild(el('p', detail));
         const btn = el('button', 'Buy More Credits');
         btn.className = 'cc-btn cc-btn-primary';
@@ -1276,7 +1409,7 @@ function createPaywallRenderer(config) {
     }
     function renderLoading(parent) {
         const btn = el('button');
-        btn.className = 'cc-btn cc-btn-primary';
+        btn.className = 'cc-btn cc-btn-outline';
         btn.disabled = true;
         const spinner = el('span');
         spinner.className = 'cc-spinner';
@@ -1296,9 +1429,9 @@ function createPaywallRenderer(config) {
         return div;
     }
     function setButtonLoading(loading) {
-        if (!overlay)
+        if (!body)
             return;
-        const btn = overlay.querySelector('.cc-btn');
+        const btn = body.querySelector('.cc-btn');
         if (!btn)
             return;
         btn.disabled = loading;
@@ -1311,12 +1444,110 @@ function createPaywallRenderer(config) {
         }
     }
     function destroy() {
+        reactRoot === null || reactRoot === void 0 ? void 0 : reactRoot.unmount();
+        reactRoot = null;
         removeShadowHost(HOST_ID);
         root = null;
-        overlay = null;
+        body = null;
     }
     return { init, render, setButtonLoading, destroy };
 }
+// ─── Top slot mounting ───────────────────────────────────────────────────────
+function mountTopSlot(container, slot, reactDOM) {
+    if (!slot)
+        return undefined;
+    // React element — detected by the $$typeof symbol all React elements carry.
+    if (isReactElement(slot)) {
+        if (!reactDOM) {
+            console.warn('[ContentCredits] paywallTopSlot is a React element but `reactDOM` was not provided. ' +
+                'Pass your ReactDOM instance: ContentCredits.init({ reactDOM, paywallTopSlot: <Widget /> })');
+            return undefined;
+        }
+        return mountReactElement(container, slot, reactDOM);
+    }
+    if (typeof slot === 'function') {
+        slot(container);
+        return undefined;
+    }
+    if (slot instanceof HTMLElement) {
+        container.appendChild(slot);
+        return undefined;
+    }
+    // Structured PaywallSlotItem[]
+    for (const item of slot) {
+        container.appendChild(renderSlotItem(item));
+    }
+    return undefined;
+}
+function isReactElement(value) {
+    // All React elements (JSX) have a $$typeof symbol set to Symbol.for('react.element')
+    // or, in older builds, the integer 0xeac7.
+    return (typeof value === 'object' &&
+        value !== null &&
+        '$$typeof' in value &&
+        !Array.isArray(value) &&
+        !(value instanceof HTMLElement));
+}
+function mountReactElement(container, element, reactDOM) {
+    // React 18+: createRoot
+    if (typeof reactDOM.createRoot === 'function') {
+        const root = reactDOM.createRoot(container);
+        root.render(element);
+        return root;
+    }
+    // React 16/17: legacy render (no unmount handle needed — it cleans up on container removal)
+    if (typeof reactDOM.render === 'function') {
+        reactDOM.render(element, container);
+        return {
+            unmount() {
+                var _a;
+                // ReactDOM.unmountComponentAtNode is the React 16/17 equivalent
+                const rdom = reactDOM;
+                (_a = rdom.unmountComponentAtNode) === null || _a === void 0 ? void 0 : _a.call(rdom, container);
+            },
+        };
+    }
+    console.warn('[ContentCredits] The provided `reactDOM` has neither `createRoot` nor `render`. ' +
+        'Pass a valid ReactDOM instance.');
+    return undefined;
+}
+function renderSlotItem(item) {
+    var _a, _b, _c, _d, _e;
+    switch (item.type) {
+        case 'heading': {
+            const h = el('span', (_a = item.content) !== null && _a !== void 0 ? _a : '');
+            h.className = 'cc-slot-heading';
+            return h;
+        }
+        case 'subheading': {
+            const h = el('span', (_b = item.content) !== null && _b !== void 0 ? _b : '');
+            h.className = 'cc-slot-subheading';
+            return h;
+        }
+        case 'text': {
+            const p = el('span', (_c = item.content) !== null && _c !== void 0 ? _c : '');
+            p.className = 'cc-slot-text';
+            return p;
+        }
+        case 'button': {
+            const btn = el('button', (_d = item.content) !== null && _d !== void 0 ? _d : '');
+            const variantClass = item.variant === 'outline'
+                ? 'cc-btn-outline'
+                : item.variant === 'secondary'
+                    ? 'cc-btn-secondary'
+                    : 'cc-btn-primary';
+            btn.className = `cc-btn ${variantClass}`;
+            if (item.onClick)
+                btn.addEventListener('click', item.onClick);
+            return btn;
+        }
+        case 'divider': {
+            const d = el('div', (_e = item.content) !== null && _e !== void 0 ? _e : '');
+            d.className = 'cc-slot-divider';
+            return d;
+        }
+    }
+}
 
 const DETECTION_TIMEOUT_MS = 2000;
 /**
@@ -1650,12 +1881,18 @@ function openAuthPopup(authUrl) {
     });
 }
 
+// How long to wait for the extension to respond to an authorization request
+// before falling back to the direct API check. MV3 service workers can take
+// a moment to wake up, but if they don't respond within this window we
+// assume the extension isn't functional and proceed without it.
+const EXTENSION_RESPONSE_TIMEOUT_MS = 3000;
 function createPaywall(config, creditsApi, state, emitter, existingGate) {
     // Accept a pre-created gate so the caller can call gate.hide() synchronously
     // before any async work, preventing a flash of the full article content.
     const gate = existingGate !== null && existingGate !== void 0 ? existingGate : createGate({
         selector: config.contentSelector,
         teaserParagraphs: config.teaserParagraphs,
+        paywallMode: config.paywallMode,
     });
     const renderer = createPaywallRenderer(config);
     const bridge = createExtensionBridge();
@@ -1766,6 +2003,43 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
     function doBuyMoreCredits() {
         window.open(`${"https://accounts.contentcredits.com"}/consumer/dashboard`, '_blank', 'noopener,noreferrer');
     }
+    // ── Extension auth response handler ──────────────────────────────────────
+    function handleExtensionAuthResponse(data) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        state.set({
+            isLoggedIn: data.isAuthenticated,
+            hasAccess: data.doesHaveAccess,
+            isLoaded: true,
+            isLoading: false,
+            creditBalance: (_a = data.creditBalance) !== null && _a !== void 0 ? _a : null,
+            requiredCredits: (_b = data.requiredCredits) !== null && _b !== void 0 ? _b : null,
+        });
+        if (!data.isAuthenticated) {
+            if (!config.headless) {
+                gate.hide();
+                renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            }
+            (_c = config.onLoginRequired) === null || _c === void 0 ? void 0 : _c.call(config);
+            emitter.emit('paywall:shown', {});
+        }
+        else if (data.doesHaveAccess) {
+            handleAccessGranted(0, (_d = data.creditBalance) !== null && _d !== void 0 ? _d : 0);
+        }
+        else {
+            if (!config.headless) {
+                gate.hide();
+                renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
+                    requiredCredits: data.requiredCredits,
+                    creditBalance: data.creditBalance,
+                });
+            }
+            (_e = config.onPurchaseRequired) === null || _e === void 0 ? void 0 : _e.call(config, {
+                requiredCredits: (_f = data.requiredCredits) !== null && _f !== void 0 ? _f : null,
+                creditBalance: (_g = data.creditBalance) !== null && _g !== void 0 ? _g : null,
+            });
+            emitter.emit('paywall:shown', {});
+        }
+    }
     // ── Access Check ──────────────────────────────────────────────────────────
     async function checkAccess() {
         var _a, _b, _c;
@@ -1773,8 +2047,26 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
         if (!config.headless)
             renderer.render('checking', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
         if (extensionAvailable) {
-            bridge.requestAuthorization(config.apiKey, config.hostName);
-            return; // response handled in onAuthorizationResponse
+            // Race the extension response against a timeout. MV3 service workers can
+            // be asleep and take time to wake — if they don't respond in time we mark
+            // the extension as non-functional and fall through to the API check so the
+            // logged-in user isn't left stuck on a blank/hidden article.
+            const responded = await new Promise(resolve => {
+                const timer = setTimeout(() => {
+                    extensionAvailable = false;
+                    state.set({ isExtensionAvailable: false });
+                    resolve(false);
+                }, EXTENSION_RESPONSE_TIMEOUT_MS);
+                bridge.onAuthorizationResponse(data => {
+                    clearTimeout(timer);
+                    handleExtensionAuthResponse(data);
+                    resolve(true);
+                });
+                bridge.requestAuthorization(config.apiKey, config.hostName);
+            });
+            if (responded)
+                return;
+            // Extension timed out — fall through to direct API check below.
         }
         if (!tokenStorage.has()) {
             state.set({ isLoading: false, isLoaded: true });
@@ -1840,42 +2132,6 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
         state.set({ isExtensionAvailable: extensionAvailable });
         if (extensionAvailable) {
             bridge.attach();
-            bridge.onAuthorizationResponse(data => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                state.set({
-                    isLoggedIn: data.isAuthenticated,
-                    hasAccess: data.doesHaveAccess,
-                    isLoaded: true,
-                    isLoading: false,
-                    creditBalance: (_a = data.creditBalance) !== null && _a !== void 0 ? _a : null,
-                    requiredCredits: (_b = data.requiredCredits) !== null && _b !== void 0 ? _b : null,
-                });
-                if (!data.isAuthenticated) {
-                    if (!config.headless) {
-                        gate.hide();
-                        renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
-                    }
-                    (_c = config.onLoginRequired) === null || _c === void 0 ? void 0 : _c.call(config);
-                    emitter.emit('paywall:shown', {});
-                }
-                else if (data.doesHaveAccess) {
-                    handleAccessGranted(0, (_d = data.creditBalance) !== null && _d !== void 0 ? _d : 0);
-                }
-                else {
-                    if (!config.headless) {
-                        gate.hide();
-                        renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
-                            requiredCredits: data.requiredCredits,
-                            creditBalance: data.creditBalance,
-                        });
-                    }
-                    (_e = config.onPurchaseRequired) === null || _e === void 0 ? void 0 : _e.call(config, {
-                        requiredCredits: (_f = data.requiredCredits) !== null && _f !== void 0 ? _f : null,
-                        creditBalance: (_g = data.creditBalance) !== null && _g !== void 0 ? _g : null,
-                    });
-                    emitter.emit('paywall:shown', {});
-                }
-            });
             bridge.onPurchaseResponse(data => {
                 var _a, _b;
                 state.set({ isLoading: false, isLoaded: true, hasAccess: data.doesHaveAccess });
@@ -2795,6 +3051,7 @@ class ContentCredits {
         const earlyGate = createGate({
             selector: this.config.contentSelector,
             teaserParagraphs: this.config.teaserParagraphs,
+            paywallMode: this.config.paywallMode,
         });
         if (!this.config.headless)
             earlyGate.hide();
@@ -2950,7 +3207,7 @@ class ContentCredits {
     }
     /** SDK version string. */
     static get version() {
-        return "2.11.0";
+        return "2.13.0";
     }
 }
 // ── Auto-init from script data attributes (CDN usage) ────────────────────────