Credit grants table

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

Custom CSS

The widget styling can be customized by applying custom CSS using code. Below you can find a list of the supported CSS classes:

Main container classes

Class name	Description
`stigg-credit-grants-container`	Main wrapper container for the entire CreditGrants widget
`stigg-credit-grants-card`	Card container that wraps the table content

Table classes

Class name	Description
`stigg-credit-grants-table`	Main table component
`stigg-credit-grants-table-error`	Error state styling when the table fails to load
`stigg-credit-grants-table-empty`	Empty state styling when there are no credit grants

Table cell content classes

Class name	Description
`stigg-credit-grants-effective-date`	Received At date column content
`stigg-credit-grants-grant-type`	Grant Type column content
`stigg-credit-grants-status-chip`	Status chip component in the Status column
`stigg-credit-grants-balance`	Balance column content
`stigg-credit-grants-expiry-date`	Expiry 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

string

Currency or credit type identifier used to filter credit grants.

number

Number of credit grant records to load per page.

object

Cursor-based paging configuration for navigating through large result sets.

number

Number of decimal places to display for credit balances.

object

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

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

const creditGrants: CreditGrantsProps = {
  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",
  },
};
</script>

<template>
  <CreditGrants v-bind="creditGrants" />
</template>

Additional resources

Get credit grants

React

Vue.js

Next.js

Webflow, Wordpress, HTML

Introduction

Get started

Usage metering

Credits

Entitlements and access enforcement

Governance

AI agents

Architecture and deployment

Pricing and packaging

Customers, subscriptions and contracts

Workflows

Widgets

Developer tools

Account management

Security & compliance

Overview

Layout

Customization

Custom CSS

Main container classes

Table classes

Table cell content classes

Snippet

Props

Texts

Additional resources

Get credit grants

​Overview

​Layout

​Customization

​Custom CSS

​Main container classes

​Table classes

​Table cell content classes

​Snippet

​Props

​Texts

​Additional resources

Get credit grants

​Related SDKs

Overview

Layout

Customization

Custom CSS

Main container classes

Table classes

Table cell content classes

Snippet

Props

Texts

Additional resources

Related SDKs