Quickstart

// Simple integration
document.addEventListener('DOMContentLoaded', function() {
  // Show paywall on button click
  document.getElementById('upgrade-btn').addEventListener('click', function() {
    paywall.open();
  });
 
// Check user status on page load
checkUserStatus();
});
 
async function checkUserStatus() {
try {
const userInfo = await paywall.getUser();
if (userInfo.paid) {
document.body.classList.add('premium-user');
}
} catch (error) {
console.log('User not authenticated');
}
}
 

async function requireSubscription() {
  try {
    const userInfo = await paywall.getUser();
 
    if (userInfo.paid) {
      return true; // User can use the feature
    } else {
      // Show paywall and wait for purchase
      try {
        await paywall.open({ resolveEvent: 'success-purchase' });
        return true; // User purchased
      } catch (paywallError) {
        // Handle different scenarios
        switch (paywallError.visibility_status_reason) {
          case 'active-payment-found':
            return true; // User already has subscription
          case 'openings-trial':
          case 'time-trial':
            return true; // Allow during trial
          case 'closed-by-user':
            return false; // User declined
          default:
            return false; // Other reasons
        }
      }
    }
  } catch (error) {
    // User not authenticated
    try {
      await paywall.open({ resolveEvent: 'signed-in' });
      // Try again after authentication
      return requireSubscription();
    } catch (authError) {
      return false;
    }
  }
}
 
// Usage
document.getElementById('premium-feature').addEventListener('click', async function() {
  if (await requireSubscription()) {
    // Execute premium feature
    executePremiumFeature();
  }
});

async function useTokenizedFeature(tokenType = 'standard', requiredCount = 1) {
  try {
    const userInfo = await paywall.getUser();
    
    // If user has subscription, allow usage
    if (userInfo.paid) {
      return executeFeature();
    }
    
    // Check token balance
    const balance = userInfo.balances.find(b => b.type === tokenType);
    if (balance && balance.count >= requiredCount) {
      // Execute API request (tokens will be deducted automatically)
      return await paywall.makeRequest('/api/my-endpoint', {
        method: 'POST',
        body: JSON.stringify({ data: 'some data' })
      });
    } else {
      // Not enough tokens, show paywall
      paywall.open();
      return null;
    }
  } catch (error) {
    paywall.open({ resolveEvent: 'signed-in' });
    return null;
  }
}

// routes/paywall.js
const express = require('express');
const router = express.Router();
 
const PAYWALL_ID = process.env.PAYWALL_ID;
const API_KEY = process.env.PAYWALL_API_KEY;
 
// Get prices
router.get('/prices', async (req, res) => {
try {
const response = await fetch(`https://onlineapp.pro/api/v1/paywall/${PAYWALL_ID}/prices`, {
headers: {
'x-api-key': API_KEY
}
});
 
    const result = await response.json();
    res.json(result.data);
 
} catch (error) {
res.status(500).json({ error: 'Failed to fetch prices' });
}
});
 
// Create checkout
router.post('/create-checkout', async (req, res) => {
const { email, priceId, planName } = req.body;
 
try {
const response = await fetch(`https://onlineapp.pro/api/v1/paywall/${PAYWALL_ID}/start-checkout`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': API_KEY
},
body: JSON.stringify({
email,
priceId,
successUrl: `${req.protocol}://${req.get('host')}/payment/success`,
errorUrl: `${req.protocol}://${req.get('host')}/payment/error`,
shopUrl: `${req.protocol}://${req.get('host')}/pricing`,
userMeta: {
planName,
source: 'website'
}
})
});
 
const result = await response.json();
res.json(result);
 
} catch (error) {
res.status(500).json({ error: 'Failed to create checkout' });
}
});
 

// webhook.js
const express = require('express');
const app = express();
 
// Webhook for processing payment events
app.post('/webhook/paywall', express.raw({type: 'application/json'}), (req, res) => {
  const event = req.body;
 
  console.log('Webhook received:', event.type);
 
  switch (event.type) {
    case 'payment.completed':
      handlePaymentCompleted(event.data);
      break;
 
    case 'subscription.created':
      handleSubscriptionCreated(event.data);
      break;
 
    case 'subscription.updated':
      handleSubscriptionUpdated(event.data);
      break;
 
    case 'subscription.cancelled':
      handleSubscriptionCancelled(event.data);
      break;
 
    case 'refund.created':
      handleRefundCreated(event.data);
      break;
  }
 
  res.json({received: true});
});
 
async function handleSuccessfulPayment(data) {
  const { userId, email, userMeta } = data;
 
  // Activate subscription in your database
  await db.users.update(userId, {
    subscriptionStatus: 'active',
    subscriptionPlan: userMeta.planName,
    lastPayment: new Date()
  });
 
  // Send welcome email
  await sendWelcomeEmail(email, userMeta.planName);
 
  console.log(`Subscription activated for user ${email}`);
}
 
async function handleCanceledSubscription(data) {
  const { userId } = data;
 
  await db.users.update(userId, {
    subscriptionStatus: 'canceled',
    cancellationDate: new Date()
  });
 
  console.log(`Subscription canceled for user ${userId}`);
}

// Frontend integration
class PaywallIntegration {
  constructor(apiBaseUrl) {
    this.apiBaseUrl = apiBaseUrl;
  }
 
async loadPrices() {
const response = await fetch(`${this.apiBaseUrl}/api/prices`);
return response.json();
}
 
async createCheckout(email, priceId, planName) {
const response = await fetch(`${this.apiBaseUrl}/api/create-checkout`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email, priceId, planName })
});
 
    const result = await response.json();
 
    if (result.checkoutUrl) {
      window.location.href = result.checkoutUrl;
    } else {
      throw new Error(result.error || 'Failed to create checkout');
    }
 
}
 
renderPricingTable(containerId) {
const container = document.getElementById(containerId);
 
    this.loadPrices().then(prices => {
      container.innerHTML = prices.map(price => `
        <div class="pricing-card">
          <h3>${price.interval.charAt(0).toUpperCase() + price.interval.slice(1)}</h3>
          <div class="price">$${price.unit_amount}</div>
          <button onclick="paywall.subscribe('${price.id}', '${price.interval}')">
            Choose Plan
          </button>
        </div>
      `).join('');
    });
 
}
 
async subscribe(priceId, planName) {
const email = this.getCurrentUserEmail(); // Your email getting logic
 
    if (!email) {
      alert('Please sign in to continue');
      return;
    }
 
    try {
      await this.createCheckout(email, priceId, planName);
    } catch (error) {
      alert('Payment creation error: ' + error.message);
    }
 
}
}
 
// Usage
const paywall = new PaywallIntegration('https://yoursite.com');
paywall.renderPricingTable('pricing-container');