Credits auto-recharge configuration

​

Overview

​

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

​

No-code widget designer

​

Custom CSS

​

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

​

Texts

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.",
      }}
    />
  );
}

​

Additional resources

​

Related SDKs

React

Vue.js

Next.js

Webflow, Wordpress, HTML