Skip to main content

​
Overview

The Credits Balance widget displays a customer’s current prepaid credit balance. It is a read-only component that provides visibility into how many credits remain in the account.

​
Layout

  • Shows the customer’s current credit balance in tokens (or other configured unit).
  • The balance updates in real time after purchases or top-ups.

​
Customization

  • Brand via the no-code widget designer.
  • Use custom CSS when deeper styling is required.

​
Main container classes

  • stigg-credit-balance-container — Main wrapper container for the entire CreditBalance widget
  • stigg-credit-balance-card — Card container with border and padding that wraps the content

​
Content classes

  • stigg-credit-balance-title — Title/header text at the top of the widget
  • stigg-credit-balance-value-amount — Main balance amount (large number)
  • stigg-credit-balance-value-suffix — Units/symbol text next to the amount
  • stigg-credit-balance-value-error — Error message when balance fails to load
  • stigg-credit-balance-value-loading — Loading skeleton state
  • stigg-credit-balance-value-no-balance — Message when no balance data is available

​
Snippet

import { StiggProvider, CreditBalance } from '@stigg/react-sdk';

function App() {
  return (
    <StiggProvider
      apiKey="your-stigg-api-key"
      customerId="customer-demo-01"
    >
      <div className="credit-widgets">
        {/* Basic Credit Balance */}
        <CreditBalance
          currencyId="cred-type-ai-tokens" // Required: currency identifier
          showUnits={true} // Optional: show units text
          showSymbol={false} // Optional: show currency symbol
          decimalPlaces={2} // Optional: limit decimal places (null = no limit)
          localization={{
            title: "Available Credits" // Optional: custom title
          }}
        />
      </div>
    </StiggProvider>
  );
}

export default App;