Skip to main content

​
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

  • 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

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

​
Main container classes

  • stigg-auto-recharge-status-container — Outer container for the Auto Recharge widget

​
Status widget classes

  • 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

  • customerId (required) — Customer identifier used to fetch auto-recharge status
  • currencyId (required) — Currency or credit type identifier
  • currencyUnit (optional) — Display name for the currency (for example, "Credits" or "Stigg Coins")
  • billingCurrency (optional) — Billing currency symbol (for example, "$")
  • onManageClick (optional) — Callback triggered when the Manage button is clicked
  • className (optional) — Additional CSS class applied to the root container
  • localization (optional) — Text overrides for customizing widget labels and messages