> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stigg.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](./credit-auto-recharge-status).

## 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.

<img src="https://mintcdn.com/stigg/ZES0NPDIjabPHkQG/images/docs/auto-recharge-config.png?fit=max&auto=format&n=ZES0NPDIjabPHkQG&q=85&s=a68ab48ccc7715042bef346be11bb716" alt="" width="996" height="1062" data-path="images/docs/auto-recharge-config.png" />

## 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 name                                                                                      | Description                                |
| ----------------------------------------------------------------------------------------------- | ------------------------------------------ |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-container`</span>           | Auto-recharge configuration form container |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-card`</span>                | Card wrapper for the form                  |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-title`</span>               | Form title                                 |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-subtitle`</span>            | Form subtitle or description               |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-enable-checkbox`</span>     | Enable/disable auto-recharge checkbox      |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-threshold-field`</span>     | Threshold input field wrapper              |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-threshold-input`</span>     | Threshold input element                    |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-target-field`</span>        | Target balance field wrapper               |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-target-input`</span>        | Target balance input element               |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-spend-limit-field`</span>   | Spend limit field wrapper                  |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-spend-limit-input`</span>   | Spend limit input element                  |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-warning`</span>             | General warning alert                      |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-spend-limit-warning`</span> | Spend limit warning message                |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-actions`</span>             | Action buttons container                   |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-cancel-button`</span>       | Cancel button                              |
| <span style={{whiteSpace: "nowrap"}}>`stigg-automatic-recharge-form-save-button`</span>         | Save button                                |

## Snippet

```jsx theme={null}
import { AutoRechargeStatus } from '@Stigg/react-sdk';

  // Basic usage
  <AutoRechargeStatus
    customerId="customer-id"
    currencyId="currency-id"
    currencyUnit="Credits"
    billingCurrency="$"
    onManageClick={() => console.log('Manage clicked')}
  />
```

### Props

<ParamField body="customerId" type="string" required>
  Customer identifier used to fetch and save auto-recharge configuration.
</ParamField>

<ParamField body="currencyId" type="string" required>
  Currency or credit type identifier.
</ParamField>

<ParamField body="currencyUnit" type="string">
  Display name for the currency (for example, `"Credits"` or `"Stigg Coins"`).
</ParamField>

<ParamField body="billingCurrency" type="string">
  Billing currency symbol (for example, `"$"`).
</ParamField>

<ParamField body="onManageClick" type="() => void">
  Callback triggered when the **Manage** button is clicked.
</ParamField>

<ParamField body="className" type="string">
  Additional CSS class applied to the root container.
</ParamField>

<ParamField body="localization" type="object">
  Text overrides for customizing widget labels and messages.
</ParamField>

### Texts

The default widget texts can currently be overridden using code:

<CodeGroup>
  ```tsx React theme={null}
  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.",
        }}
      />
    );
  }
  ```

  ```bash bash theme={null}
  <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>

  ```
</CodeGroup>

<Note>
  You can find additional text override options [here](https://react-sdk-docs.stigg.io/interfaces/automaticrechargeconfiglocalization)
</Note>

## Additional resources

<Card title="Auto recharge configuration" icon="palette" href="https://react-sdk-docs.stigg.io/interfaces/automaticrechargeconfiguration" horizontal />

## Related SDKs

<CardGroup cols={2}>
  <Card title="" href="/api-and-sdks/integration/frontend/react" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/FZ_ywutvYHnQbKpn/images/react.svg?fit=max&auto=format&n=FZ_ywutvYHnQbKpn&q=85&s=75e8661a7d87b8e2b3493d7fdfb33db9" alt="React" style={{ width: '32px' }} width="23" height="20" data-path="images/react.svg" />

      <span>React</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/vuejs" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/qpsRT7dNo0hXTxnb/images/vue.svg?fit=max&auto=format&n=qpsRT7dNo0hXTxnb&q=85&s=c861442fd84f9822a716d778b10a8dba" alt="Vue.js" style={{ width: '32px' }} width="800" height="800" data-path="images/vue.svg" />

      <span>Vue.js</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/nextjs" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/FZ_ywutvYHnQbKpn/images/next.svg?fit=max&auto=format&n=FZ_ywutvYHnQbKpn&q=85&s=7fea95b3e8f678015cb8b8d58d1e7886" alt="Next.js" style={{ width: '32px' }} width="16" height="16" data-path="images/next.svg" />

      <span>Next.js</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/html" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/aJeGPh9dwMpK_Kcr/images/html.svg?fit=max&auto=format&n=aJeGPh9dwMpK_Kcr&q=85&s=ae948dc9e5ca66cf75892b94859954a0" alt="Webflow, Wordpress, HTML" style={{ width: '32px' }} width="800" height="800" data-path="images/html.svg" />

      <span>Webflow, Wordpress, HTML</span>
    </div>
  </Card>
</CardGroup>