7 min readUpdated Mar 2, 2026

Billing Settings Documentation

Purpose

The BillingSettings component is part of the Vantage analytics and data platform that handles all billing-related functionalities for organizations. This component allows users to manage billing contacts, view current subscription plans, track token usage, and manage payment methods. It seamlessly integrates with payment gateways like Stripe, providing a user-friendly interface for billing operations.

Settings

The BillingSettings component maintains several state variables to manage its behavior and display. Below are the detailed explanations of each setting:

1. isLoading

2. billingContact

3. orgUsers

4. contactSaving

5. stripeCustomerId

6. transactions

7. subscriptionInfo

8. paymentMethod

9. clientId

10. billingMode

11. creditBalance

12. currentMonthUsage

13. stripeInvoices

14. tiers

15. buyModalOpen

16. paymentLoading

17. paymentError

18. plans

19. plansModalOpen

20. plansLoading

21. selectedPlanId

22. planCheckoutLoading

23. planCheckoutSecret

24. planError

How It Works

The BillingSettings component uses state management to manage its state and life cycle. When the component mounts, it calls fetchBillingData and fetchPlans functions to retrieve the latest billing information and subscription options from the server. The state values drive the rendering of UI elements reflecting the billing status and user’s interaction capabilities.

Data Expectations

The component expects the following data from the API endpoints:

  1. /api/organization/billing:

    • Should return a JSON object with fields: billingContact, orgUsers, stripeCustomerId, transactions, subscriptionInfo, paymentMethod, clientId, billingMode, creditBalance, currentMonthUsage, tiers, and stripeInvoices.

  2. /api/onboarding/plans:

    • Should return a structure containing a list of available plans that can be subscribed to by the organization.

Use Cases & Examples

Use Case 1: Managing Subscription Plans

A user from an organization needs to upgrade their subscription plan as they have started using more tokens than their current plan allows. They can open the BillingSettings, click on "View Plans", and choose a more suitable subscription based on their usage.

Use Case 2: Tracking Token Usage

An organization wishes to track its monthly token usage to manage costs efficiently under a Pay-As-You-Go model. The BillingSettings component allows users to view their current month usage and provides information about when their next renewal will be.

Use Case 3: Purchasing Credits

Organizations may run low on tokens due to high usage periods. Through the BillingSettings interface, they can easily purchase additional credits without interrupting service.

Example Configuration for Use Case 1

Configuration for switching to a new plan:

Assuming an organization is currently on a basic plan (with ID basic_plan_001) and wishes to upgrade to a premium_plan_002, the handlePlanSubscribe function would be executed with the corresponding priceId of premium_plan_002.

Sample Code Snippet:

javascript
// Example call to upgrade the plan
const priceId = 'premium_plan_002'; // ID of the new plan
handlePlanSubscribe(priceId);

This initiates the process to upgrade the organization’s current subscription plan, which updates the UI if successful, informs the user about the new plan and associated charges, and adjusts the billing state appropriately.

In summary, the BillingSettings component integrates critical billing functions while ensuring usability and accessibility for organizations using the Vantage platform. It plays a vital role in the user experience related to financial matters and helps maintain a clear overview of their billing status.

Related Pages

SettingsUser Editor ModalSettingsAI Query SettingsSettingsDashboard SettingsSettingsUsers Management