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

Auto-recharge settings include controls that automatically top up your balance when it falls below a defined threshold. The auto-recharge configuration includes the following options:
  • 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

​
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:
Class nameDescription
stigg-automatic-recharge-form-containerAuto-recharge configuration form container
stigg-automatic-recharge-form-cardCard wrapper for the form
stigg-automatic-recharge-form-titleForm title
stigg-automatic-recharge-form-subtitleForm subtitle or description
stigg-automatic-recharge-form-enable-checkboxEnable/disable auto-recharge checkbox
stigg-automatic-recharge-form-threshold-fieldThreshold input field wrapper
stigg-automatic-recharge-form-threshold-inputThreshold input element
stigg-automatic-recharge-form-target-fieldTarget balance field wrapper
stigg-automatic-recharge-form-target-inputTarget balance input element
stigg-automatic-recharge-form-spend-limit-fieldSpend limit field wrapper
stigg-automatic-recharge-form-spend-limit-inputSpend limit input element
stigg-automatic-recharge-form-warningGeneral warning alert
stigg-automatic-recharge-form-spend-limit-warningSpend limit warning message
stigg-automatic-recharge-form-actionsAction buttons container
stigg-automatic-recharge-form-cancel-buttonCancel button
stigg-automatic-recharge-form-save-buttonSave 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
string
required
Customer identifier used to fetch and save auto-recharge configuration.
​
currencyId
string
required
Currency or credit type identifier.
​
currencyUnit
string
Display name for the currency (for example, "Credits" or "Stigg Coins").
​
billingCurrency
string
Billing currency symbol (for example, "$").
​
onManageClick
() => void
Callback triggered when the Manage button is clicked.
​
className
string
Additional CSS class applied to the root container.
​
localization
object
Text overrides for customizing widget labels and messages.

​
Texts

The default widget texts can currently be overridden using code: 
import { AutomaticRechargeConfig } from "@stigg/react-sdk";

// Basic usage
export function CreditsAutoRechargeConfig() {
  return (
    <AutomaticRechargeConfig
      customerId="<CUSTOMER_ID>"
      currencyId="<CURRENCY_ID>"
      currencyUnit="Credits"
      billingCurrency="$"
      localization={{
        title: "Auto-recharge settings",
        enableLabel: "Allow auto-recharge",
        enableDescription: "Recharge credits automatically when balance is low",
        thresholdFieldPlaceholder: "10",
        targetFieldPlaceholder: "100",
        spendLimitFieldPlaceholder: "150.00",
        spendLimitPeriod: "/ month",
        saveButton: "Save settings",
        cancelButton: "Cancel",
        immediateRechargeWarning:
          "Recharge will run immediately after saving. Current balance is below the threshold.",
      }}
    />
  );
}
You can find additional text override options here

​
Additional resources

Auto recharge configuration

ReactReact

Vue.jsVue.js

Next.jsNext.js

Webflow, Wordpress, HTMLWebflow, Wordpress, HTML