Skip to main content

​
Overview

The Auto-recharge 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.

​
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 settings modal.

​
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

​
Configuration form classes

  • stigg-automatic-recharge-form-container — Auto Recharge configuration form container
  • stigg-automatic-recharge-form-card — Card wrapper for the form
  • stigg-automatic-recharge-form-title — Form title
  • stigg-automatic-recharge-form-subtitle — Form subtitle or description
  • stigg-automatic-recharge-form-enable-checkbox — Enable/disable auto-recharge checkbox
  • stigg-automatic-recharge-form-threshold-field — Threshold input field wrapper
  • stigg-automatic-recharge-form-threshold-input — Threshold input element
  • stigg-automatic-recharge-form-target-field — Target balance field wrapper
  • stigg-automatic-recharge-form-target-input — Target balance input element
  • stigg-automatic-recharge-form-spend-limit-field — Spend limit field wrapper
  • stigg-automatic-recharge-form-spend-limit-input — Spend limit input element
  • stigg-automatic-recharge-form-warning — General warning alert
  • stigg-automatic-recharge-form-spend-limit-warning — Spend limit warning message
  • stigg-automatic-recharge-form-actions — Action buttons container
  • stigg-automatic-recharge-form-cancel-button — Cancel button
  • stigg-automatic-recharge-form-save-button — Save button

​
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