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

The Credit balance widget displays the customer’s current available credit amount in a clear and prominent format. The layout includes the following elements:
  • The customer’s current credit balance in tokens (or other configured unit).
  • The balance updates in real time after purchases or top-ups.

​
Customization

​
No-code widget designer

The Stigg app offers a no-code widget designer, which allows you to control the widget colors, typography and layout.

​
Custom CSS

For more advanced customization, custom CSS can be applied using the widget designer of the Stigg app. Alternatively, custom CSS can also be applied using code. Below you can find a list of the supported CSS classes:

​
Main container classes

Class nameDescription
stigg-credit-balance-containerMain wrapper container for the entire CreditBalance widget
stigg-credit-balance-cardCard container with border and padding that wraps the content

​
Content classes

Class nameDescription
stigg-credit-balance-titleTitle/header text at the top of the widget
stigg-credit-balance-value-amountMain balance amount (large number)
stigg-credit-balance-value-suffixUnits or symbol text next to the amount
stigg-credit-balance-value-errorError message when balance fails to load
stigg-credit-balance-value-loadingLoading skeleton state
stigg-credit-balance-value-no-balanceMessage shown 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;

​
Props

  • currencyId (required) — Currency or credit type identifier used to fetch the credit balance
  • decimalPlaces (optional) — Number of decimal places to display for the balance value
  • showSymbol (optional) — Whether to display the currency symbol next to the balance
  • showUnits (optional) — Whether to display the currency unit label (for example, "tokens" or "credits")
  • localization (optional) — Text overrides for customizing widget labels, messages, and states
  • className (optional) — Additional CSS class applied to the root container

​
Additional resources

Get credit balance

ReactReact

Vue.jsVue.js

Next.jsNext.js

Webflow, Wordpress, HTMLWebflow, Wordpress, HTML