Credits 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

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

currencyId

string

Currency or credit type identifier used to filter credit grants.

pageSize

number

Number of credit grant records to load per page.

paging

object

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

decimalPlaces

number

Number of decimal places to display for credit balances.

localization

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

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

Overview

Layout

Customization

No-code widget designer

Custom CSS

Main container classes

Table classes

Table cell content classes

Snippet

Props

Texts

Additional resources

Get credit grants

​Overview

​Layout

​Customization

​No-code widget designer

​Custom CSS

​Main container classes

​Table classes

​Table cell content classes

​Snippet

​Props

​Texts

​Additional resources

Get credit grants

​Related SDKs

Overview

Layout

Customization

No-code widget designer

Custom CSS

Main container classes

Table classes

Table cell content classes

Snippet

Props

Texts

Additional resources

Related SDKs