@moneybar.online/moneybar 3.2.0 → 3.4.0

package/README.md

@@ -21,25 +21,35 @@ npm install @moneybar.online/moneybar
 import { MoneyBar } from '@moneybar.online/moneybar';
 
 const moneyBar = new MoneyBar({
+  actionFunction: 'generatePDF',  // Function name that gets called
   appId: 'my-pdf-app',
-  freeDownloadLimit: 3,
+  freeAttemptLimit: 3,
   supabase: {
     url: 'your-supabase-url',
     anonKey: 'your-anon-key'
   },
-  payment: {
-    productId: 'your-product-id'
+  payment: [{
+    provider: 'dodo',
+    productId: 'your-product-id',
+    mode: 'test'
+  }]
+});
+
+moneyBar.attachToButton('#action-btn', (userContext) => {
+  // Call the specified action function
+  if (typeof window[moneyBar.config.actionFunction] === 'function') {
+    window[moneyBar.config.actionFunction](userContext);
   }
 });
 
-moneyBar.attachToButton('#download-btn', (userContext) => {
+// Define the function specified in actionFunction
+function generatePDF(userContext) {
   if (userContext.isPremium) {
-    generatePremiumPDF();
+    alert('Premium PDF generated with all features!');
   } else {
-    generateBasicPDF();
-    console.log(`${userContext.remaining} downloads remaining`);
+    alert(`Basic PDF generated! ${userContext.remaining} downloads remaining`);
   }
-});
+}
 ```
 
 ### Option 2: CDN with Import Map (Recommended for HTML projects)
@@ -63,8 +73,9 @@ moneyBar.attachToButton('#download-btn', (userContext) => {
     import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.browser.js';
 
     const moneyBar = new MoneyBar({
+      actionFunction: 'myAction',  // Function name that gets called
       appId: 'my-app',
-      freeDownloadLimit: 3,
+      freeAttemptLimit: 3,
       supabase: {
         url: 'your-supabase-url',
         anonKey: 'your-anon-key'
@@ -75,12 +86,20 @@ moneyBar.attachToButton('#download-btn', (userContext) => {
     });
 
     moneyBar.attachToButton('#action-btn', (userContext) => {
+      // Call the specified action function
+      if (typeof window[moneyBar.config.actionFunction] === 'function') {
+        window[moneyBar.config.actionFunction](userContext);
+      }
+    });
+
+    // Define the function specified in actionFunction
+    function myAction(userContext) {
       if (userContext.isPremium) {
         alert('Premium features unlocked!');
       } else {
         alert(`Free trial: ${userContext.remaining} uses left`);
       }
-    });
+    }
   </script>
 </body>
 </html>
@@ -98,14 +117,30 @@ moneyBar.attachToButton('#download-btn', (userContext) => {
     import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
 
     const moneyBar = new MoneyBar({
+      actionFunction: 'myAction',  // Function name that gets called
       appId: 'my-app',
-      freeDownloadLimit: 3,
-      // ... configuration
+      freeAttemptLimit: 3,
+      supabase: {
+        url: 'your-supabase-url',
+        anonKey: 'your-anon-key'
+      },
+      payment: {
+        productId: 'your-product-id'
+      }
     });
 
     moneyBar.attachToButton('#action-btn', (userContext) => {
-      // Your logic here
+      // Call the specified action function
+      if (typeof window[moneyBar.config.actionFunction] === 'function') {
+        window[moneyBar.config.actionFunction](userContext);
+      }
     });
+
+    // Define the function specified in actionFunction
+    function myAction(userContext) {
+      // Your business logic here
+      alert(`Action executed! Premium: ${userContext.isPremium}, Remaining: ${userContext.remaining}`);
+    }
   </script>
 </body>
 </html>
@@ -134,81 +169,81 @@ moneyBar.attachToButton('#download-btn', (userContext) => {
 ### Quick Start Template
 Copy `moneybar-config-template.js` and `example-template.html` from this package for a ready-to-use template.
 
+## 🚀 Quick Start (2 minutes)
+
+### Files You Need:
+1. **`example-template.html`** - Working demo with all 3 use cases
+2. **`moneybar-config-template.js`** - Comprehensive configuration with 3 problem-focused examples
+
+### Try It Now:
+```bash
+# After npm install
+open example-template.html
+```
+
+Then edit line 157 in `moneybar-config-template.js` to switch between use cases!
+
 ---
 
-## 📱 Live Examples - Problem-Focused Demos
+## 📱 The 3 Money-Blocking Problems MoneyBar Solves
 
-### Example #1: [`examples/value-first-demo.html`](examples/value-first-demo.html) + [`examples/value-first.config.js`](examples/value-first.config.js)
-**Problem #1: "Forced Sign-In Before Value"**
+### Problem #1: "Forced Sign-In Before Value"
+**Revenue Impact: 40-60% boost**
 - ❌ **What Kills Revenue:** Users bounce before seeing your product works
 - ✅ **MoneyBar Solution:** Value-first trials with 3 free attempts
-- 💰 **Revenue Impact:** 40-60% more trial conversions
+- 🎯 **Perfect for:** PDF generators, image tools, converters
 - 🎨 **Theme:** Emerald (trustworthy, fresh)
+- **Config:** `VALUE_FIRST_CONFIG` in template
 
-### Example #2: [`examples/feedback-intelligence.html`](examples/feedback-intelligence.html) + [`examples/feedback-intelligence.config.js`](examples/feedback-intelligence.config.js)
-**Problem #2: "Silent Drop-Off"**
+### Problem #2: "Silent Drop-Off"
+**Revenue Impact: 20-30% boost**
 - ❌ **What Kills Revenue:** Users try but don't buy - you don't know why
 - ✅ **MoneyBar Solution:** Exit feedback capture at cancel moment
-- 💰 **Revenue Impact:** 20-30% better conversion through insights
+- 🎯 **Perfect for:** SaaS trials, B2B tools, complex products
 - 🎨 **Theme:** Corporate (professional B2B)
+- **Config:** `FEEDBACK_INTELLIGENCE_CONFIG` in template
 
-### Example #3: [`examples/instant-payment-flow.html`](examples/instant-payment-flow.html) + [`examples/instant-payment.config.js`](examples/instant-payment.config.js)
-**Problem #3: "Broken Money Flow" + ⭐ Complete User Context Showcase**
+### Problem #3: "Broken Money Flow"
+**Revenue Impact: 25-40% boost**
 - ❌ **What Kills Revenue:** Complex payments and broken sessions
-- ✅ **MoneyBar Solution:** Seamless Google Auth + instant payment + full user personalization
-- 💰 **Revenue Impact:** 25-40% higher payment completion
+- ✅ **MoneyBar Solution:** Seamless Google Auth + instant payments
+- 🎯 **Perfect for:** Templates, premium features, instant upgrades
 - 🎨 **Theme:** Dark (modern, premium)
-- **⭐ Features ALL user context properties with live demo**
-
----
-
-## 🚨 The 3 Money-Blocking Stages for Indie Hackers
-
-### Problem #1: "Forced Sign-In Before Value"
-**❌ What Kills Revenue:** Users bounce before seeing your product works
-- No evidence = no trust = no money
-- Users don't want to create "yet another account"
-- They leave before seeing what they would have paid for
-
-**✅ MoneyBar Solution:** Value-first trials with limited attempts
-- Give 2-3 free attempts - no sign-in required
-- Users experience value immediately
-- Only ask for payment when they're convinced
+- **Config:** `INSTANT_PAYMENT_CONFIG` in template
 
-**📄 Example:** [`value-first-demo.html`](examples/value-first-demo.html)
-**💰 Revenue Impact:** 40-60% more trial conversions
+## 🔧 How to Use
 
----
-
-### Problem #2: "Silent Drop-Off"
-**❌ What Kills Revenue:** Users try your tool but don't buy - you don't know why
-- User experiences tool → it works → but still doesn't pay
-- You have no data on why they left
-- You keep guessing instead of learning
-
-**✅ MoneyBar Solution:** Exit feedback capture at cancel moment
-- 1-click micro survey when users cancel upgrade
-- Ask "What stopped you from buying?" with preset options
-- Convert failure into product intelligence
+### Step 1: Choose Your Use Case
+Edit line 157 in `moneybar-config-template.js`:
 
-**📄 Example:** [`feedback-intelligence.html`](examples/feedback-intelligence.html)
-**💰 Revenue Impact:** 20-30% better conversion through insights
+```javascript
+// Pick one:
+window.APP_CONFIG = VALUE_FIRST_CONFIG;           // PDF/Image/Converter tools
+window.APP_CONFIG = FEEDBACK_INTELLIGENCE_CONFIG; // SaaS/B2B products
+window.APP_CONFIG = INSTANT_PAYMENT_CONFIG;       // Templates/Premium features
+```
 
----
+### Step 2: Update Credentials (REQUIRED!)
+⚠️ **Before testing, you MUST replace these placeholder values or you'll get errors:**
 
-### Problem #3: "Broken Money Flow"
-**❌ What Kills Revenue:** Complex payments and broken sessions
-- Payment flow is too long (every extra click = revenue death)
-- No Google/Apple Pay integration
-- After paying, user doesn't return cleanly to the tool
+```javascript
+supabase: {
+  url: 'https://your-project.supabase.co',     // ✅ Replace with your Supabase project URL
+  anonKey: 'your-anon-key'                     // ✅ Replace with your Supabase anon key
+},
+payment: [{
+  provider: 'dodo',                            // ✅ Payment provider
+  productId: 'your-product-id',                // ✅ Replace with your DodoPayments product ID
+  mode: 'test'                                 // ✅ Set to 'test' or 'live'
+}]
+```
 
-**✅ MoneyBar Solution:** Seamless Google Auth + instant payment
-- One-click Google sign-in
-- Instant payment integration
-- User returns directly to unlocked tool
+**🚨 Common Error:** If you get "Cannot read properties of null (reading 'AuthClient')" error:
+- ❌ You haven't updated the Supabase credentials above
+- ✅ Replace ALL placeholder values with your actual credentials
 
-**📄 Example:** [`instant-payment-flow.html`](examples/instant-payment-flow.html)
-**💰 Revenue Impact:** 25-40% higher payment completion
+### Step 3: Test the Demo
+Open `example-template.html` in your browser and try the button!
 
 ---
 
@@ -237,22 +272,6 @@ function myAction(userContext) {
 }
 ```
 
-### Multiple Buttons
-```javascript
-moneyBar.attachToButtons({
-  buttons: [
-    {
-      selector: '#free-btn',
-      downloadCallback: (ctx) => downloadFreeTemplate(ctx)
-    },
-    {
-      selector: '#premium-btn',
-      downloadCallback: (ctx) => downloadPremiumTemplate(ctx),
-      isPremium: true
-    }
-  ]
-});
-```
 
 ### Feedback Collection Configuration
 ```javascript
@@ -266,10 +285,19 @@ const moneyBar = new MoneyBar({
       option2: 'Need more features',
       option3: 'Just testing'
     },
-    email: {
-      resendApiKey: 'your-resend-key',
-      fromEmail: 'feedback@yourapp.com'
-    }
+    email: [
+      {
+        provider: 'resend',
+        apiKey: 'your-resend-api-key',
+        fromEmail: 'feedback@yourapp.com'
+      }
+      // Future providers can be added here:
+      // {
+      //   provider: 'sendgrid',
+      //   apiKey: 'your-sendgrid-api-key',
+      //   fromEmail: 'feedback@yourapp.com'
+      // }
+    ]
   }
 });
 ```
@@ -306,7 +334,7 @@ const moneyBar = new MoneyBar({
 const moneyBar = new MoneyBar({
   // Core required config
   appId: 'my-app',                    // Unique identifier for your app
-  freeDownloadLimit: 3,               // Free attempts before paywall
+  freeAttemptLimit: 3,               // Free attempts before paywall
 
   // Supabase configuration (required)
   supabase: {
@@ -315,10 +343,11 @@ const moneyBar = new MoneyBar({
   },
 
   // Payment configuration (required)
-  payment: {
+  payment: [{
+    provider: 'dodo',                 // Payment provider
     productId: 'prod_xyz',            // DodoPayments product ID
     mode: 'test'                      // 'test' or 'live'
-  }
+  }]
 });
 ```
 
@@ -388,10 +417,11 @@ function myAction(userContext) {
 MoneyBar supports DodoPayments for seamless checkout:
 
 ```javascript
-payment: {
+payment: [{
+  provider: 'dodo',
   productId: 'your-dodo-product-id',
   mode: 'test' // or 'live'
-}
+}]
 ```
 
 ---

package/dist/index.browser.js

@@ -22,13 +22,13 @@ import { createClient } from '@supabase/supabase-js';
  *
  * const moneyBar = new MoneyBar({
  *   appId: 'my-pdf-app',
- *   freeDownloadLimit: 3,
+ *   freeAttemptLimit: 3,
  *   supabase: { url: 'https://xyz.supabase.co', anonKey: 'anon_key' },
  *   payment: { productId: 'prod_xyz' }
  * });
  *
  * // Single button - handles all monetization automatically
- * moneyBar.attachToButton('#download-btn', (userContext) => {
+ * moneyBar.attachToButton('#action-btn', (userContext) => {
  *   // Your action logic here - with user context for personalization
  *   if (userContext.isPremium) {
  *     generatePremiumPDF();
@@ -214,10 +214,10 @@ class MoneyBar {
             }
             const status = {
                 currentCount: count,
-                limit: this.config.freeDownloadLimit,
+                limit: this.config.freeAttemptLimit,
                 isPremium,
                 isAuthenticated: !!this.currentUser,
-                remaining: Math.max(0, this.config.freeDownloadLimit - count)
+                remaining: Math.max(0, this.config.freeAttemptLimit - count)
             };
             // Cache the status
             this.cachedStatus = status;
@@ -229,10 +229,10 @@ class MoneyBar {
             // Return safe defaults on error
             const errorStatus = {
                 currentCount: 0,
-                limit: this.config.freeDownloadLimit,
+                limit: this.config.freeAttemptLimit,
                 isPremium: false,
                 isAuthenticated: false,
-                remaining: this.config.freeDownloadLimit
+                remaining: this.config.freeAttemptLimit
             };
             // Cache error status for short time to avoid repeated failures
             this.cachedStatus = errorStatus;
@@ -297,24 +297,35 @@ class MoneyBar {
         if (!this.config.payment) {
             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);
             }
@@ -517,8 +528,8 @@ class MoneyBar {
             // Only increment count after successful execution - with limit check
             const newCount = await this.incrementDownloadCount();
             // Double-check: if server returned count exceeding limit, something went wrong
-            if (newCount > this.config.freeDownloadLimit) {
-                console.error(`⚠️ Server returned count (${newCount}) exceeding limit (${this.config.freeDownloadLimit})`);
+            if (newCount > this.config.freeAttemptLimit) {
+                console.error(`⚠️ Server returned count (${newCount}) exceeding limit (${this.config.freeAttemptLimit})`);
                 // Don't update UI with invalid state
                 return;
             }
@@ -2318,7 +2329,26 @@ class MoneyBar {
         }
     }
     async sendFeedbackEmail(feedbackData) {
-        const emailConfig = this.config.feedback?.email || this.config.email;
+        // Get email config - handle both new array format and legacy format
+        let emailConfig;
+        if (this.config.feedback?.email) {
+            // New array format - use first provider (typically resend)
+            if (Array.isArray(this.config.feedback.email)) {
+                emailConfig = this.config.feedback.email[0];
+            }
+            else {
+                // Legacy format fallback
+                emailConfig = this.config.feedback.email;
+            }
+        }
+        else if (this.config.email) {
+            // Deprecated legacy email config
+            emailConfig = {
+                provider: 'resend',
+                apiKey: this.config.email.resendApiKey,
+                fromEmail: this.config.email.fromEmail
+            };
+        }
         if (!emailConfig) {
             throw new Error('Email configuration not available');
         }
@@ -2331,19 +2361,26 @@ User Email: ${feedbackData.email || 'Not provided'}
 Timestamp: ${feedbackData.timestamp}
 User Agent: ${feedbackData.userAgent}
     `.trim();
-        const response = await fetch('https://api.resend.com/emails', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${emailConfig.resendApiKey}`
-            },
-            body: JSON.stringify({
-                from: emailConfig.fromEmail,
-                to: [emailConfig.fromEmail], // Send feedback to yourself
-                subject: `Feedback from ${this.config.appId}`,
-                text: emailBody
-            })
-        });
+        // Handle different email providers
+        let response;
+        if (emailConfig.provider === 'resend' || !emailConfig.provider) {
+            response = await fetch('https://api.resend.com/emails', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${emailConfig.apiKey || emailConfig.resendApiKey}`
+                },
+                body: JSON.stringify({
+                    from: emailConfig.fromEmail,
+                    to: [emailConfig.fromEmail], // Send feedback to yourself
+                    subject: `Feedback from ${this.config.appId}`,
+                    text: emailBody
+                })
+            });
+        }
+        else {
+            throw new Error(`Unsupported email provider: ${emailConfig.provider}`);
+        }
         if (!response.ok) {
             throw new Error(`Email API error: ${response.status}`);
         }
@@ -2765,8 +2802,8 @@ User Agent: ${feedbackData.userAgent}
             throw new Error('supabase.url is required');
         if (!this.config.supabase?.anonKey)
             throw new Error('supabase.anonKey is required');
-        if (typeof this.config.freeDownloadLimit !== 'number' || this.config.freeDownloadLimit < 0) {
-            throw new Error('freeDownloadLimit must be a non-negative number');
+        if (typeof this.config.freeAttemptLimit !== 'number' || this.config.freeAttemptLimit < 0) {
+            throw new Error('freeAttemptLimit must be a non-negative number');
         }
     }
     async initializeSupabase() {
@@ -2786,7 +2823,15 @@ User Agent: ${feedbackData.userAgent}
             return;
         }
         // 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) {