Credits auto-recharge status

Overview

The Auto-recharge status widget displays the customer’s current auto-recharge configuration and monthly spend status. It provides a read-only summary of when auto-recharge is triggered, the target balance after recharge, and how much of the monthly spending limit has been used. The Auto-recharge status widget is designed to be used together with the Auto-recharge configuration widget.

Layout

Auto-recharge status includes a compact summary card that shows whether auto-recharge is currently enabled and what rules are in effect. The status layout includes the following elements:

Indicates whether auto-recharge is active or inactive.
Shows the configured recharge rule (for example, recharge to 50 coins when the balance drops below 31).
Displays the current monthly spend relative to the configured monthly limit.
Includes a Manage action that opens the auto-recharge configuration widget.

Customization

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 name	Description
`stigg-auto-recharge-status-container`	Outer container for the Auto-recharge widget

Class name	Description
`stigg-auto-recharge-status`	Main status card container
`stigg-auto-recharge-status-error`	Error state variant of the status card
`stigg-auto-recharge-title`	Widget title text
`stigg-auto-recharge-status-chip`	Status indicator chip (Active / Inactive)
`stigg-auto-recharge-manage-button`	Manage auto-recharge button
`stigg-auto-recharge-description`	Description or helper text
`stigg-auto-recharge-progress`	Progress bar for spend tracking
`stigg-auto-recharge-spend`	Spend amount text
`stigg-auto-recharge-empty`	Empty state container
`stigg-auto-recharge-empty-text`	Empty state message text

Snippet

import { AutoRechargeStatus } from '@Stigg/react-sdk';

  // Basic usage
  <AutoRechargeStatus
    customerId="customer-id"
    currencyId="currency-id"
    currencyUnit="Credits"
    billingCurrency="$"
    onManageClick={() => console.log('Manage clicked')}
  />

Props

string

required

Customer identifier used to fetch auto-recharge status.

string

required

Currency or credit type identifier.

string

Display name for the currency (for example, "Credits" or "Stigg Coins").

string

Billing currency symbol (for example, "$").

() => void

Callback triggered when the Manage button is clicked.

string

Additional CSS class applied to the root container.

object

Text overrides for customizing widget labels and messages.

Texts

The default widget texts can currently be overridden using code:

import { AutoRechargeStatus } from "@stigg/react-sdk";

export function CreditsAutoRechargeStatus() {
  return (
    <AutoRechargeStatus
      customerId="<CUSTOMER_ID>"
      currencyId="<CURRENCY_ID>"
      currencyUnit="AI Tokens"
      billingCurrency="$"
      localization={{
        title: "Auto-recharge",
        activeLabel: "Active",
        descriptionTemplate: "Recharge {{target}} {{currencyUnit}} when {{threshold}} left",
        spendTemplate: "Spend: {{spent}} / {{limit}} per month",
        unlimitedSpendLimit: "Unlimited",
        manageButton: "Manage",
        emptyStateMessage: "Auto-recharge is not enabled",
      }}
      onManageClick={() => {
        // Handle manage click
      }}
    />
  );
}

<script setup lang="ts">
import { AutoRechargeStatus, type AutoRechargeStatusProps } from "@stigg/vue-sdk";

const autoRechargeStatus: AutoRechargeStatusProps = {
  customerId: "<CUSTOMER_ID>",
  currencyId: "<CURRENCY_ID>",
  currencyUnit: "AI Tokens",
  billingCurrency: "$",
  localization: {
    title: "Auto-recharge",
    activeLabel: "Active",
    descriptionTemplate: "Recharge {{target}} {{currencyUnit}} when {{threshold}} left",
    spendTemplate: "Spend: {{spent}} / {{limit}} per month",
    unlimitedSpendLimit: "Unlimited",
    manageButton: "Manage",
    emptyStateMessage: "Auto-recharge is not enabled",
  },
  onManageClick: () => {
    // Handle manage click
  },
};
</script>

<template>
  <AutoRechargeStatus v-bind="autoRechargeStatus" />
</template>

You can find additional text override options here

Additional resources

Auto recharge configuration

React

Vue.js

Next.js

Webflow, Wordpress, HTML

Getting started

Developer tools

Governance (Private Beta)

Modeling your pricing in Stigg

Managing customers, subscriptions and entitlements

Getting usage data into Stigg

Snap-in widgets

Native integrations

Importing and exporting data

Going live

Workflow automation

Rolling out pricing changes with confidence

Price localization

Managing your account

High-availability and scale

Security & compliance

Overview

Layout

Customization

No-code widget designer

Custom CSS

Main container classes

Status widget classes

Snippet

Props

Texts

Additional resources

Auto recharge configuration

​Overview

​Layout

​Customization

​No-code widget designer

​Custom CSS

​Main container classes

​Status widget classes

​Snippet

​Props

​Texts

​Additional resources

Auto recharge configuration

​Related SDKs

Overview

Layout

Customization

No-code widget designer

Custom CSS

Main container classes

Status widget classes

Snippet

Props

Texts

Additional resources

Related SDKs