Реалізація Usage-Based Billing для SaaS-застосунку

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.
Розробка та обслуговування будь-яких видів сайтів:
Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

Це лише деякі з технічних типів сайтів, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Пропоновані послуги
Показано 1 з 1 послугУсі 2065 послуг
Реалізація Usage-Based Billing для SaaS-застосунку
Складна
~2-4 тижні
Часті питання
Наші компетенції:
Етапи розробки
Останні роботи
  • image_website-b2b-advance_0.png
    Розробка сайту компанії B2B ADVANCE
    1262
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1171
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    874
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1094
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    831
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Розробка веб-сайту для компанії ФІКСПЕР
    851

SaaS біллінг на основі використання (Usage-Based Billing)

Плата за використання або метричний біллінг: клієнт платить за фактичне спожиття — API-вызовы, GB трафіку, активних користувачів, згенерованих зображень. Stripe Meters — сучасний спосіб реалізації.

Stripe Meters (новий API)

const meter = await stripe.billing.meters.create({
  display_name: 'API Calls',
  event_name: 'api_call',
  default_aggregation: {
    formula: 'sum',
  },
  customer_mapping: {
    event_payload_key: 'stripe_customer_id',
    type: 'by_id',
  },
  value_settings: {
    event_payload_key: 'value',
  },
});

const price = await stripe.prices.create({
  currency: 'usd',
  unit_amount: 100, // $0.01 за одиницю
  recurring: {
    interval: 'month',
    usage_type: 'metered',
    aggregate_usage: 'sum',
  },
  billing_scheme: 'per_unit',
  product: productId,
});

Надсилання подій використання

export async function trackApiUsage(
  customerId: string,
  quantity: number = 1,
  metadata?: Record<string, string>
) {
  await stripe.billing.meterEvents.create({
    event_name: 'api_call',
    payload: {
      stripe_customer_id: customerId,
      value: quantity.toString(),
      ...metadata,
    },
    timestamp: Math.floor(Date.now() / 1000),
  });
}

export function trackUsageMiddleware(req: Request, res: Response, next: NextFunction) {
  const originalEnd = res.end;

  res.end = function(...args) {
    if (res.statusCode < 400 && req.user?.stripeCustomerId) {
      trackApiUsage(req.user.stripeCustomerId, 1, {
        endpoint: req.path,
        method: req.method,
      }).catch(console.error);
    }

    return originalEnd.apply(this, args);
  };

  next();
}

Тарифні ступені (Tiered Pricing)

const tieredPrice = await stripe.prices.create({
  currency: 'usd',
  billing_scheme: 'tiered',
  tiers_mode: 'graduated',
  tiers: [
    {
      up_to: 1000,
      unit_amount: 100, // $0.01 за кожен з перших 1000
    },
    {
      up_to: 10000,
      unit_amount: 50,  // $0.005 за наступні 9000
    },
    {
      up_to: 'inf',
      unit_amount: 10,  // $0.001 за всё сверх 10000
    },
  ],
  recurring: {
    interval: 'month',
    usage_type: 'metered',
    aggregate_usage: 'sum',
  },
  product: productId,
});

Локальний трекинг використання

Stripe Meters мають затримку. Для real-time лімітів — локальний счётчик:

import { Redis } from '@upstash/redis';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_URL!,
  token: process.env.UPSTASH_REDIS_TOKEN!,
});

export async function checkAndIncrementUsage(
  tenantId: string,
  resource: string,
  limit: number
): Promise<{ allowed: boolean; current: number; limit: number }> {
  const key = `usage:${tenantId}:${resource}:${getCurrentMonthKey()}`;

  const pipeline = redis.pipeline();
  pipeline.incr(key);
  pipeline.expire(key, 60 * 60 * 24 * 35);

  const [current] = await pipeline.exec() as [number, number];

  if (current > limit) {
    await redis.decr(key);
    return { allowed: false, current: current - 1, limit };
  }

  syncUsageToStripe(tenantId, resource, 1).catch(console.error);

  return { allowed: true, current, limit };
}

function getCurrentMonthKey(): string {
  const now = new Date();
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
}

UI: віджет використання

export async function UsageWidget({ tenantId }: { tenantId: string }) {
  const usage = await getMonthlyUsage(tenantId);
  const subscription = await getSubscription(tenantId);
  const limits = PLAN_LIMITS[subscription.plan];

  return (
    <div className="space-y-4">
      {Object.entries(usage).map(([resource, current]) => {
        const limit = limits[resource as keyof typeof limits];
        const percentage = limit === Infinity
          ? 0
          : Math.min((current / limit) * 100, 100);

        return (
          <div key={resource}>
            <div className="flex justify-between text-sm mb-1">
              <span className="capitalize">{resource.replace(/_/g, ' ')}</span>
              <span>
                {current.toLocaleString()}
                {limit !== Infinity && ` / ${limit.toLocaleString()}`}
              </span>
            </div>
            {limit !== Infinity && (
              <div className="h-2 bg-gray-200 rounded">
                <div
                  className={`h-2 rounded transition-all ${
                    percentage > 90 ? 'bg-red-500' :
                    percentage > 70 ? 'bg-yellow-500' : 'bg-blue-500'
                  }`}
                  style={{ width: `${percentage}%` }}
                />
              </div>
            )}
          </div>
        );
      })}

      <div className="text-xs text-gray-500">
        Сбрасывается {getNextBillingDate(subscription.currentPeriodEnd).toLocaleDateString('uk-UA')}
      </div>
    </div>
  );
}

Налаштування usage-based біллінгу через Stripe Meters з Redis счётчиками та UI віджетом — 3–5 робочих днів.