@moneybar.online/moneybar 3.3.0 → 3.5.0

package/example-template.html

@@ -91,17 +91,87 @@
         </div>
     </div>
 
-    <!-- Import map for dependencies -->
-    <script type="importmap">
-    {
-        "imports": {
-            "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
+    <!-- MoneyBar self-contained bundle (no import map needed) -->
+    <script type="module">
+        console.log('🚀 Loading MoneyBar...');
+
+        try {
+            const { MoneyBar } = await import('https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js');
+
+            // Use FEEDBACK_INTELLIGENCE_CONFIG by default (you can change this)
+            const config = {
+                actionFunction: 'runAnalysis',
+                appId: 'saas-analytics',
+                freeAttemptLimit: 3,
+                supabase: {
+                    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+                    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
+                },
+                payment: [{
+                    provider: 'dodo',
+                    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
+                    mode: 'test'
+                }],
+                feedback: {
+                    form: {
+                        title: 'Quick Feedback',
+                        description: 'What stopped you from upgrading?',
+                        option1: 'Too complex to implement',
+                        option2: 'Not enough ROI for my team',
+                        option3: 'Need more features first'
+                    },
+                    email: [
+                        {
+                            provider: 'resend',
+                            apiKey: 'your-resend-api-key',
+                            fromEmail: 'feedback@yourapp.com'
+                        }
+                    ]
+                },
+                theme: {
+                    name: 'corporate',
+                    primaryColor: '#0066cc'
+                },
+                titleBar: {
+                    title: '📈 Analytics Tool',
+                    links: [
+                        { text: 'Features', url: '#features', target: '_self' },
+                        { text: 'ROI Calculator', url: '#roi', target: '_self' }
+                    ]
+                }
+            };
+
+            console.log('✅ Creating MoneyBar instance...');
+            const moneyBar = new MoneyBar(config);
+
+            console.log('✅ Attaching to button...');
+            moneyBar.attachToButton('#action-btn', runAnalysis);
+
+            console.log('🎉 MoneyBar loaded successfully!');
+
+        } catch (error) {
+            console.error('❌ MoneyBar failed to load:', error);
+            document.body.innerHTML += `<div style="background: red; color: white; padding: 1rem; margin: 1rem 0;">
+                <strong>Error:</strong> ${error.message}
+            </div>`;
         }
-    }
-    </script>
 
-    <!-- Load MoneyBar configuration and initialization -->
-    <script type="module" src="moneybar-config-template.js"></script>
+        // Action function for the demo
+        function runAnalysis(userContext) {
+            console.log('🎯 FEEDBACK INTELLIGENCE: Running analysis...');
+
+            if (userContext.isPremium) {
+                console.log('✅ Full analytics suite access');
+                alert('Complete analysis ready! Access to all metrics, exports, and AI insights.');
+            } else {
+                console.log(`📊 Basic analysis complete. ${userContext.remaining} attempts remaining`);
+                alert(`Analysis complete! Limited data shown. ${userContext.remaining} attempts left.`);
+            }
+        }
+
+        // Make function global for debugging
+        window.runAnalysis = runAnalysis;
+    </script>
 
     <div class="demo-section">
         <h2>📚 Setup Checklist</h2>
@@ -120,13 +190,74 @@
             <li><strong>Add</strong> the import map to your HTML</li>
         </ol>
 
-        <h3>🎛️ Integration Options:</h3>
-        <ul>
-            <li><strong>CDN + Import Map</strong> - Simple, no build step (current demo)</li>
-            <li><strong>Self-contained Bundle</strong> - No import map needed</li>
-            <li><strong>NPM Install</strong> - For projects with bundlers</li>
-            <li><strong>UMD Script Tags</strong> - Traditional non-module usage</li>
-        </ul>
+        <h3>🎛️ Live Integration Examples:</h3>
+        <details>
+            <summary><strong>Method 1: CDN + Import Map</strong> (Current Demo)</summary>
+            <pre><code>&lt;script type="importmap"&gt;
+{
+  "imports": {
+    "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
+  }
+}
+&lt;/script&gt;
+&lt;script type="module" src="moneybar-config-template.js"&gt;&lt;/script&gt;</code></pre>
+        </details>
+
+        <details>
+            <summary><strong>Method 2: Self-contained Bundle</strong> (No import map needed)</summary>
+            <pre><code>&lt;script type="module"&gt;
+import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
+
+const moneyBar = new MoneyBar({
+  actionFunction: 'generatePDF',
+  appId: 'pdf-generator',
+  freeAttemptLimit: 3,
+  supabase: {
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
+  },
+  payment: [{
+    provider: 'dodo',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
+    mode: 'test'
+  }]
+});
+
+moneyBar.attachToButton('#action-btn', generatePDF);
+
+function generatePDF(userContext) {
+  if (userContext.isPremium) {
+    alert('Premium PDF generated!');
+  } else {
+    alert(`Basic PDF generated! ${userContext.remaining} attempts left.`);
+  }
+}
+&lt;/script&gt;</code></pre>
+        </details>
+
+        <details>
+            <summary><strong>Method 3: NPM Install</strong> (For projects with bundlers)</summary>
+            <pre><code>npm install @moneybar.online/moneybar
+
+import { MoneyBar } from '@moneybar.online/moneybar';
+
+const moneyBar = new MoneyBar({
+  actionFunction: 'generatePDF',
+  appId: 'pdf-generator',
+  freeAttemptLimit: 3,
+  supabase: {
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
+  },
+  payment: [{
+    provider: 'dodo',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
+    mode: 'test'
+  }]
+});
+
+moneyBar.attachToButton('#action-btn', generatePDF);</code></pre>
+        </details>
 
         <p><small>See <code>moneybar-config-template.js</code> for all integration options and detailed examples!</small></p>
     </div>

package/moneybar-config-template.js

@@ -50,14 +50,16 @@ const VALUE_FIRST_CONFIG = {
   actionFunction: 'generatePDF',
   appId: 'pdf-generator',
   freeAttemptLimit: 3, // Give enough attempts to prove value
+
   supabase: {
-    url: 'your-supabase-url',
-    anonKey: 'your-anon-key'
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
   },
-  payment: {
-    productId: 'your-product-id',
+  payment: [{
+    provider: 'dodo',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
     mode: 'test'
-  },
+  }],
   theme: {
     name: 'emerald', // Trustworthy, fresh
     primaryColor: '#059669'
@@ -83,13 +85,14 @@ const FEEDBACK_INTELLIGENCE_CONFIG = {
   appId: 'saas-analytics',
   freeAttemptLimit: 3,
   supabase: {
-    url: 'your-supabase-url',
-    anonKey: 'your-anon-key'
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
   },
-  payment: {
-    productId: 'your-product-id',
+  payment: [{
+    provider: 'dodo',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
     mode: 'test'
-  },
+  }],
   // KEY FEATURE: Feedback collection on cancel/exit
   feedback: {
     form: {
@@ -133,13 +136,14 @@ const INSTANT_PAYMENT_CONFIG = {
   appId: 'template-creator',
   freeAttemptLimit: 5, // Lower to trigger payment faster
   supabase: {
-    url: 'your-supabase-url',
-    anonKey: 'your-anon-key'
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
   },
-  payment: {
-    productId: 'your-product-id',
+  payment: [{
+    provider: 'dodo',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
     mode: 'test'
-  },
+  }],
   theme: {
     name: 'dark', // Modern, premium feel
     primaryColor: '#7c3aed'
@@ -184,10 +188,11 @@ window.APP_CONFIG = {
   },
 
   // REQUIRED: Payment configuration
-  payment: {
+  payment: [{
+    provider: 'dodo',
     productId: 'your-dodo-payments-product-id',
     mode: 'test' // Change to 'live' for production
-  },
+  }],
 
   // OPTIONAL: UI Theme (29 themes available)
   theme: {

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@moneybar.online/moneybar",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "The navbar of monetization. Fix the 3 money-blocking stages: forced sign-ins, silent drop-offs, and broken payment flows. Turn browsers into buyers.",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "browser": "dist/index.browser.js",
-  "unpkg": "dist/index.umd.js",
+  "unpkg": "dist/index.bundle.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
       "browser": "./dist/index.browser.js",
       "types": "./dist/index.d.ts"
     }

package/src/index.ts

@@ -333,26 +333,37 @@ export class MoneyBar {
       throw new Error('Payment configuration not provided');
     }
 
+    const payment = this.config.payment?.find(p => p.provider === 'dodo');
+    if (!payment) {
+      throw new Error('No dodo payment provider configured');
+    }
+
     const requestBody = {
       email: this.currentUser.email,
-      product_id: this.config.payment.productId,
-      mode: this.config.payment.mode || 'test',
+      product_id: payment.productId,
+      mode: payment.mode || 'test',
       app_id: this.config.appId,
       return_url: `${window.location.origin}${window.location.pathname}?payment=success`
     };
 
-    console.log(`🔥 [SUPABASE API] createPayment called for email: ${this.currentUser.email} | Time: ${new Date().toISOString()}`);
+    console.log(`🔥 [PAYMENT API] createPayment called for provider: ${payment.provider}, email: ${this.currentUser.email} | Time: ${new Date().toISOString()}`);
 
     try {
-      const response = await fetch(`${this.config.supabase.url}/functions/v1/create-payment`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.config.supabase.anonKey}`
-        },
-        body: JSON.stringify(requestBody)
-      });
-      console.log(`🔥 [SUPABASE API] createPayment response: ${response.status}`);
+      // Route to appropriate payment API based on provider
+      let response;
+      if (payment.provider === 'dodo') {
+        response = await fetch(`${this.config.supabase.url}/functions/v1/create-payment`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.config.supabase.anonKey}`
+          },
+          body: JSON.stringify(requestBody)
+        });
+      } else {
+        throw new Error(`Payment provider '${payment.provider}' is not yet supported`);
+      }
+      console.log(`🔥 [PAYMENT API] createPayment response for ${payment.provider}: ${response.status}`);
 
       if (this.config.options?.debug) {
         //console.log('🔍 DEBUG: createPayment response status:', response.status);
@@ -3010,7 +3021,15 @@ User Agent: ${feedbackData.userAgent}
     }
 
     // Validate product ID format
-    const productId = this.config.payment.productId;
+    const payment = this.config.payment?.find(p => p.provider === 'dodo');
+    if (!payment) {
+      this.paymentConnectionFailed = true;
+      if (this.config.options?.debug) {
+        console.warn('No dodo payment provider configured');
+      }
+      return;
+    }
+    const productId = payment.productId;
     if (!productId || !productId.startsWith('pdt_') || productId.length < 10) {
       this.paymentConnectionFailed = true;
       if (this.config.options?.debug) {

package/src/types.ts

@@ -11,11 +11,14 @@ export interface MoneyBarConfig {
     anonKey: string;
   };
 
-  /** DodoPayments product configuration */
-  payment?: {
+  /** Payment configuration - extensible for multiple providers */
+  payment?: Array<{
+    provider: 'dodo' | 'stripe' | 'paypal' | 'square' | 'paddle'; // Extensible for future providers
     productId: string;
     mode?: 'test' | 'live';
-  };
+    apiKey?: string; // For providers that need API keys
+    publishableKey?: string; // For client-side keys (Stripe, etc.)
+  }>;
 
   /** Optional: Feedback form configuration */
   feedback?: {