Skip to main content

​
Overview

The Auto-recharge configuration widget allows customers to configure how credits are automatically recharged when their balance runs low. It enables users to define recharge thresholds, target balances, and optional monthly spending limits, as well as to enable or disable auto-recharge entirely. The Auto-recharge configuration widget is designed to be used together with the Auto-recharge status widget.

​
Layout

  • A toggle to enable or disable auto-recharge.
  • A balance threshold that determines when a recharge is triggered.
  • A target balance that the system recharges up to once the threshold is crossed.
  • An optional monthly spending limit to cap total recharge spend.
  • A warning message when saving will immediately trigger a recharge due to the current balance.
  • Save and Cancel actions to apply or discard changes.

​
Customization

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

​
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