Skip to main content

​
Overview

The Credit Grants Table widget provides visibility into all credit grants associated with a customer. It shows the origin of credits, their usage, and their current state in a structured table format.

​
Layout

The Credit grants widget displays a structured list of credit grants associated with a customer, providing a clear overview of how credits were issued, their current status, remaining balances, and expiration dates. The layout includes the following elements:
  • Received — timestamp when the grant was issued.
  • Grant Type — type of credit (e.g., promotional, paid, subscription).
  • State — current status of the grant (Available, Scheduled, Expired, Voided).
  • Balance — remaining credits versus the original amount.
  • Expires — expiration date, if applicable.
This widget is especially useful for distinguishing between purchased and promotional credits, tracking upcoming expirations, and auditing adjustments over time.

​
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:

​
Main container classes

Class nameDescription
stigg-credit-grants-containerMain wrapper container for the entire CreditGrants widget
stigg-credit-grants-cardCard container that wraps the table content

​
Table classes

Class nameDescription
stigg-credit-grants-tableMain table component
stigg-credit-grants-table-errorError state styling when the table fails to load
stigg-credit-grants-table-emptyEmpty state styling when there are no credit grants

​
Table cell content classes

Class nameDescription
stigg-credit-grants-effective-dateReceived At date column content
stigg-credit-grants-grant-typeGrant Type column content
stigg-credit-grants-status-chipStatus chip component in the Status column
stigg-credit-grants-balanceBalance column content
stigg-credit-grants-expiry-dateExpiry Date column content

​
Snippet

import React from 'react';
import { StiggProvider, CreditGrants } from '@stigg/react-sdk';

function App() {
  return (
    <StiggProvider
      apiKey="your-stigg-api-key"
      customerId="customer-demo-01"
    >
      <div className="credit-widgets">
        {/* Credit Grants Table */}
        <CreditGrants
          currencyId="cred-type-ai-tokens" // Required: currency identifier
          
          // Optional: Custom column labels and messages
          localization={{
            receivedAt: "Grant Date",
            grantType: "Type",
            status: "Status",
            balance: "Amount",
            expiryDate: "Expires",
            emptyState: "No credit grants found for this currency",
            loadingState: "Loading grants...",
            errorState: "Unable to load credit grants"
          }}
        />
      </div>
    </StiggProvider>
  );
}

export default App;

​
Props

  • currencyId (optional) — Currency or credit type identifier used to filter credit grants
  • pageSize (optional) — Number of credit grant records to load per page
  • paging (optional) — Cursor-based paging configuration for navigating through large result sets
  • decimalPlaces (optional) — Number of decimal places to display for credit balances
  • localization (optional) — Text overrides for customizing table headers, labels, and states

​
Texts

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

// Basic usage
export function CustomerCreditGrants() {
  return (
    <CreditGrants
      currencyId="<CURRENCY_ID>"
      pageSize={10}
      localization={{
        receivedAt: "Received",
        grantType: "Grant type",
        status: "State",
        balance: "Balance",
        expiryDate: "Expires",
        loadingState: "Loading credit grants...",
        emptyState: "No credit grants available",
        errorState: "Failed to load credit grants",
        effectiveAt: "Effective at",
      }}
    />
  );
}

​
Additional resources

Get credit grants

ReactReact

Vue.jsVue.js

Next.jsNext.js

Webflow, Wordpress, HTMLWebflow, Wordpress, HTML