@contentcredits/sdk 2.1.0 → 2.3.0

package/dist/content-credits.esm.js

@@ -1,5 +1,5 @@
 function resolveConfig(raw) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     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.');
     }
@@ -8,7 +8,7 @@ function resolveConfig(raw) {
     try {
         hostName = new URL(articleUrl).hostname;
     }
-    catch (_l) {
+    catch (_m) {
         throw new Error(`[ContentCredits] Invalid articleUrl: "${articleUrl}"`);
     }
     return {
@@ -21,13 +21,23 @@ function resolveConfig(raw) {
         enableComments: (_d = raw.enableComments) !== null && _d !== void 0 ? _d : true,
         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,
         apiBaseUrl: "https://api.contentcredits.com",
         accountsUrl: "https://accounts.contentcredits.com",
         paywallTemplate: raw.paywallTemplate,
         onAccessGranted: raw.onAccessGranted,
+        onStateChange: raw.onStateChange,
+        onReady: raw.onReady,
+        onLoginRequired: raw.onLoginRequired,
+        onPurchaseRequired: raw.onPurchaseRequired,
+        onInsufficientCredits: raw.onInsufficientCredits,
+        onPurchased: raw.onPurchased,
+        onUserLogin: raw.onUserLogin,
+        onUserLogout: raw.onUserLogout,
+        onError: raw.onError,
         theme: {
-            primaryColor: (_h = (_g = raw.theme) === null || _g === void 0 ? void 0 : _g.primaryColor) !== null && _h !== void 0 ? _h : '#44C678',
-            fontFamily: (_k = (_j = raw.theme) === null || _j === void 0 ? void 0 : _j.fontFamily) !== null && _k !== void 0 ? _k : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+            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",
         },
     };
 }
@@ -1623,8 +1633,10 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
     function handleAccessGranted(creditsSpent = 0, balance = 0) {
         var _a;
         state.set({ hasAccess: true, isLoaded: true, isLoading: false });
-        gate.reveal();
-        renderer.render('granted', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        if (!config.headless) {
+            gate.reveal();
+            renderer.render('granted', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        }
         emitter.emit('paywall:hidden', {});
         emitter.emit('article:purchased', { creditsSpent, remainingBalance: balance });
         (_a = config.onAccessGranted) === null || _a === void 0 ? void 0 : _a.call(config);
@@ -1641,7 +1653,8 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
             window.location.href = authUrl;
             return;
         }
-        renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        if (!config.headless)
+            renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
         const token = await openAuthPopup(authUrl);
         if (token) {
             state.set({ isLoggedIn: true });
@@ -1649,12 +1662,13 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
         }
         else {
             // Popup closed without login
-            renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            if (!config.headless)
+                renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
         }
     }
     // ── Purchase ──────────────────────────────────────────────────────────────
     async function doPurchase() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (!tokenStorage.has()) {
             await doLogin();
             return;
@@ -1668,7 +1682,8 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
             });
             return;
         }
-        renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        if (!config.headless)
+            renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
         state.set({ isLoading: true });
         try {
             const result = await creditsApi.purchaseArticle({
@@ -1682,7 +1697,8 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
             }
             else {
                 state.set({ isLoading: false });
-                renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                if (!config.headless)
+                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
                 emitter.emit('error', { message: (_a = result.message) !== null && _a !== void 0 ? _a : 'Purchase failed' });
             }
         }
@@ -1690,17 +1706,24 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
             state.set({ isLoading: false });
             if (err instanceof ApiError && err.status === 402) {
                 // Insufficient credits
-                renderer.render('insufficient', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
+                if (!config.headless) {
+                    renderer.render('insufficient', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
+                        requiredCredits: state.get().requiredCredits,
+                        creditBalance: state.get().creditBalance,
+                    });
+                }
+                const required = (_b = state.get().requiredCredits) !== null && _b !== void 0 ? _b : 0;
+                const available = (_c = state.get().creditBalance) !== null && _c !== void 0 ? _c : 0;
+                (_d = config.onInsufficientCredits) === null || _d === void 0 ? void 0 : _d.call(config, { required, available });
+                emitter.emit('credits:insufficient', { required, available });
+            }
+            else {
+                if (!config.headless)
+                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                (_e = config.onPurchaseRequired) === null || _e === void 0 ? void 0 : _e.call(config, {
                     requiredCredits: state.get().requiredCredits,
                     creditBalance: state.get().creditBalance,
                 });
-                emitter.emit('credits:insufficient', {
-                    required: (_b = state.get().requiredCredits) !== null && _b !== void 0 ? _b : 0,
-                    available: (_c = state.get().creditBalance) !== null && _c !== void 0 ? _c : 0,
-                });
-            }
-            else {
-                renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
                 emitter.emit('error', { message: 'Purchase failed', error: err });
             }
         }
@@ -1710,16 +1733,21 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
     }
     // ── Access Check ──────────────────────────────────────────────────────────
     async function checkAccess() {
+        var _a, _b, _c;
         state.set({ isLoading: true });
-        renderer.render('checking', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        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
         }
         if (!tokenStorage.has()) {
             state.set({ isLoading: false, isLoaded: true });
-            gate.hide();
-            renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            if (!config.headless) {
+                gate.hide();
+                renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            }
+            (_a = config.onLoginRequired) === null || _a === void 0 ? void 0 : _a.call(config);
             emitter.emit('paywall:shown', {});
             return;
         }
@@ -1739,15 +1767,24 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
                 handleAccessGranted(0, 0);
             }
             else {
-                gate.hide();
-                renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                if (!config.headless) {
+                    gate.hide();
+                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                }
+                (_b = config.onPurchaseRequired) === null || _b === void 0 ? void 0 : _b.call(config, {
+                    requiredCredits: state.get().requiredCredits,
+                    creditBalance: state.get().creditBalance,
+                });
                 emitter.emit('paywall:shown', {});
             }
         }
         catch (err) {
             state.set({ isLoading: false, isLoaded: true });
-            gate.hide();
-            renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            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);
             if (!(err instanceof ApiError && err.status === 401)) {
                 emitter.emit('error', { message: 'Access check failed', error: err });
             }
@@ -1766,7 +1803,7 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
         if (extensionAvailable) {
             bridge.attach();
             bridge.onAuthorizationResponse(data => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e, _f, _g;
                 state.set({
                     isLoggedIn: data.isAuthenticated,
                     hasAccess: data.doesHaveAccess,
@@ -1776,18 +1813,27 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
                     requiredCredits: (_b = data.requiredCredits) !== null && _b !== void 0 ? _b : null,
                 });
                 if (!data.isAuthenticated) {
-                    gate.hide();
-                    renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                    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, (_c = data.creditBalance) !== null && _c !== void 0 ? _c : 0);
+                    handleAccessGranted(0, (_d = data.creditBalance) !== null && _d !== void 0 ? _d : 0);
                 }
                 else {
-                    gate.hide();
-                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
-                        requiredCredits: data.requiredCredits,
-                        creditBalance: data.creditBalance,
+                    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', {});
                 }
@@ -1808,10 +1854,19 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
     }
     function destroy() {
         bridge.detach();
-        renderer.destroy();
-        gate.reveal();
+        if (!config.headless) {
+            renderer.destroy();
+            gate.reveal();
+        }
     }
-    return { init, checkAccess, destroy };
+    return {
+        init,
+        checkAccess,
+        destroy,
+        login: doLogin,
+        purchase: doPurchase,
+        buyMoreCredits: doBuyMoreCredits,
+    };
 }
 
 const POSITION_KEY = 'cc-widget-pos';
@@ -2673,21 +2728,42 @@ class ContentCredits {
     async _start() {
         // 1. Consume any token that arrived in the URL (mobile redirect flow)
         consumeTokenFromUrl();
-        // 2. Hide premium content immediately (synchronous) before any async work.
+        // 2. Wire config-level callbacks so developers don't need separate on() calls.
+        if (this.config.onStateChange) {
+            this.state.subscribe(this.config.onStateChange);
+        }
+        if (this.config.onReady) {
+            this.emitter.on('ready', ({ state }) => this.config.onReady(state));
+        }
+        if (this.config.onPurchased) {
+            this.emitter.on('article:purchased', (payload) => this.config.onPurchased(payload));
+        }
+        if (this.config.onUserLogin) {
+            this.emitter.on('auth:login', ({ user }) => this.config.onUserLogin(user));
+        }
+        if (this.config.onUserLogout) {
+            this.emitter.on('auth:logout', () => this.config.onUserLogout());
+        }
+        if (this.config.onError) {
+            this.emitter.on('error', (payload) => this.config.onError(payload));
+        }
+        // 3. Hide premium content immediately (synchronous) before any async work.
         //    This prevents the flash of full article content that would otherwise
         //    appear during the token-refresh and access-check network round-trips.
+        //    Skipped in headless mode — the host app owns all DOM manipulation.
         const earlyGate = createGate({
             selector: this.config.contentSelector,
             teaserParagraphs: this.config.teaserParagraphs,
         });
-        earlyGate.hide();
-        // 3. If no access token in memory/session, attempt a silent refresh.
+        if (!this.config.headless)
+            earlyGate.hide();
+        // 4. If no access token in memory/session, attempt a silent refresh.
         //    This runs on every new browser session (after the browser was closed)
         //    and silently re-authenticates the user using their stored refresh token.
         if (!tokenStorage.has()) {
             await tryRefreshSession(this.config.apiBaseUrl);
         }
-        // Pass the pre-created gate so createPaywall reuses the same instance
+        // 5. Pass the pre-created gate so createPaywall reuses the same instance
         // (and its hiddenNodes list) rather than creating a second one.
         this.paywallModule = createPaywall(this.config, this.creditsApi, this.state, this.emitter, earlyGate);
         if (this.config.enableComments) {
@@ -2698,6 +2774,63 @@ class ContentCredits {
         this.emitter.emit('ready', { state: this.state.get() });
     }
     // ── Public API ────────────────────────────────────────────────────────────
+    /**
+     * Subscribe to state changes. The callback receives the full state snapshot
+     * every time any field changes. Returns an unsubscribe function.
+     *
+     * Primarily useful in **headless mode** — lets you drive your own UI from
+     * reactive state without polling `getState()`.
+     *
+     * @example
+     * const unsubscribe = cc.subscribe((state) => {
+     *   if (state.hasAccess) showFullContent();
+     *   else showPaywall(state);
+     * });
+     */
+    subscribe(fn) {
+        return this.state.subscribe(fn);
+    }
+    /**
+     * Trigger the login flow programmatically.
+     *
+     * - Desktop: opens a popup window to the Content Credits auth page.
+     * - Mobile: performs a full-page redirect.
+     * - Extension: delegates to the browser extension.
+     *
+     * Primarily useful in **headless mode** where you render your own "Login"
+     * button and call this from its `onClick` handler.
+     */
+    async login() {
+        var _a;
+        await ((_a = this.paywallModule) === null || _a === void 0 ? void 0 : _a.login());
+    }
+    /**
+     * Trigger the article purchase flow programmatically.
+     *
+     * Deducts the required credits from the user's balance and, on success,
+     * updates `state.hasAccess` to `true` and emits `article:purchased`.
+     *
+     * If the user is not logged in, this automatically opens the login flow
+     * first, then proceeds with the purchase.
+     *
+     * Primarily useful in **headless mode** where you render your own "Unlock"
+     * button and call this from its `onClick` handler.
+     */
+    async purchase() {
+        var _a;
+        await ((_a = this.paywallModule) === null || _a === void 0 ? void 0 : _a.purchase());
+    }
+    /**
+     * Open the Content Credits dashboard in a new tab so the user can top up
+     * their credit balance.
+     *
+     * Primarily useful in **headless mode** when `state.creditBalance` is lower
+     * than `state.requiredCredits`.
+     */
+    buyMoreCredits() {
+        var _a;
+        (_a = this.paywallModule) === null || _a === void 0 ? void 0 : _a.buyMoreCredits();
+    }
     /** Subscribe to an SDK event. Returns an unsubscribe function. */
     on(event, handler) {
         return this.emitter.on(event, handler);
@@ -2739,7 +2872,7 @@ class ContentCredits {
     }
     /** SDK version string. */
     static get version() {
-        return "2.1.0";
+        return "2.3.0";
     }
 }
 // ── Auto-init from script data attributes (CDN usage) ────────────────────────