Credits auto-recharge configuration

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

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 name	Description
`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

string

required

Customer identifier used to fetch and save auto-recharge configuration.

string

required

Currency or credit type identifier.

string

Display name for the currency (for example, "Credits" or "Stigg Coins").

string

Billing currency symbol (for example, "$").

() => void

Callback triggered when the Manage button is clicked.

string

Additional CSS class applied to the root container.

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

<script setup lang="ts">
import { AutomaticRechargeConfig, type AutomaticRechargeConfigProps } from "@stigg/vue-sdk";

const autoRechargeConfig: AutomaticRechargeConfigProps = {
  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.",
  },
};
</script>

<template>
  <AutomaticRechargeConfig v-bind="autoRechargeConfig" />
</template>

You can find additional text override options here

Additional resources

Auto recharge configuration

React

Vue.js

Next.js

Webflow, Wordpress, HTML

Getting started

Developer tools

Governance (Private Beta)

Modeling your pricing in Stigg

Managing customers, subscriptions and entitlements

Getting usage data into Stigg

Snap-in widgets

Native integrations

Importing and exporting data

Going live

Workflow automation

Rolling out pricing changes with confidence

Price localization

Managing your account

High-availability and scale

Security & compliance

Credits auto-recharge configuration

Overview

Layout

Customization

No-code widget designer

Custom CSS

Snippet

Props

Texts

Additional resources

Auto recharge configuration

​Overview

​Layout

​Customization

​No-code widget designer

​Custom CSS

​Snippet

​Props

​Texts

​Additional resources

Auto recharge configuration

​Related SDKs

Overview

Layout

Customization

No-code widget designer

Custom CSS

Snippet

Props

Texts

Additional resources

Related SDKs