Stigg Widgets — Drop-In UI

Stigg ships pre-built React components (with Next.js SSR support since v0.2.1) and a vanilla-JS client SDK for the most common pricing / billing UI surfaces. These are the canonical way to render paywalls, customer portals, checkout, and credit-balance UIs without rebuilding them. Vue and Embed SDKs also exist — see docs.stigg.io; the patterns below apply.

Before You Start

Per the umbrella stigg skill: search first. Widget props evolve; the Storybook is the live source of truth.

How to read the Storybook from an agent

The Storybook at https://widgets.stigg.io/ is JavaScript-rendered (a basic HTTP fetch returns only the title). But it exposes a machine-readable index — GET https://widgets.stigg.io/index.json returns the full list of story IDs (pattern widgets-<component>--<variant>). Fetch that index whenever the user references widgets, then supplement with the per-widget docs pages under docs.stigg.io/documentation/snap-in-widgets/<widget> for props and snippets.

Full agent recipe — discovery workflow, story-ID categories, per-widget canonical doc paths, why a basic WebFetch only returns the title: references/storybook.md.

Widgets at a Glance

Setup

All widgets live inside a <StiggProvider> (React) or its equivalent in other framework SDKs. Use the publishable key (client-), never a server key.

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

export function App() {
  return (
    <StiggProvider apiKey="<STIGG_CLIENT_API_KEY>" customerId="<LOGGED_IN_CUSTOMER_ID>">
      <NestedComponents />
    </StiggProvider>
  );
}

Next.js: same — @stigg/react-sdk supports SSR, no separate package. Vanilla JS: @stigg/js-client-sdk. Vue: @stigg/vue-sdk follows the same provider shape — see docs.stigg.io.

Production setup must include client-side security hardening (HMAC SHA256 signed customer tokens). Configure under the publishable key’s detail panel. See stigg-api/references/auth.md.

Composition: Customer Portal + Paywall

The CustomerPortal component supports composition — pass the Paywall as a slot / prop:

<CustomerPortal
  paywallComponent={<Paywall />}
  theme={...}
  textOverrides={...}
/>

This wires up the portal’s “Plan picker” section using the same paywall config.

Composition: Modular Customer Portal

If the default portal layout doesn’t fit your app, compose its sections individually under CustomerPortalProvider:

import {
  CustomerPortalProvider,
  CustomerUsageData,
  PaymentDetailsSection,
  // SubscriptionsOverview, AddonsList, Promotions, InvoicesSection, ...
} from '@stigg/react-sdk';

function App() {
  return (
    <CustomerPortalProvider theme={...} textOverrides={...}>
      <CustomerUsageData />
      <PaymentDetailsSection />
    </CustomerPortalProvider>
  );
}

Theming

Two paths:

1. No-code Widget Designer in the Stigg app — colors, typography, layout. Non-engineering owners can tune.
2. Code-level theming — theme={...} prop on each component, plus custom CSS targeting the documented stigg-prefixed classes (e.g. stigg-payment-details-section-layout, stigg-{plan.id}, stigg-compatible-addon-{addon.id}, stigg-entitlement-feature-{feature.id}).

Both can be combined. Re-fetch the docs for the current full CSS-class list.

Text Overrides

Default copy can be overridden via textOverrides:

const textOverrides = {
  manageSubscription: 'Manage',
  usageTabTitle: 'Usage',
  addonsTabTitle: 'Add-ons',
  promotionsTabTitle: 'Promotions',
  paywallSectionTitle: 'Plans',
  // ...
};

<CustomerPortal textOverrides={textOverrides} paywallComponent={<Paywall />} />

The full key list is in the docs — search text overrides if you need a specific one.

Multi-Tenant (Multi-Active Subscriptions)

For products that allow multiple subscriptions per customer (workspaces / projects), pass resourceId everywhere — to Paywall, CustomerPortal, Checkout, and credit widgets:

<Paywall resourceId="workspace-abc" onPlanSelected={({ plan, customer }) => { ... }} />

<CustomerPortal
  resourceId="workspace-abc"
  paywallComponent={<Paywall resourceId="workspace-abc" />}
/>

You also call stigg.setResource('workspace-abc') (and clearResource() when leaving the context) on the JS client so entitlement checks scope correctly.

Picking a Renderer for the Paywall

Stigg’s Paywall exposes the customer’s intent via onPlanSelected. Branch on intentionType:

<Paywall
  onPlanSelected={({ plan, intentionType }) => {
    switch (intentionType) {
      case SubscribeIntentionType.START_TRIAL:
        // provision trial subscription
        break;
      case SubscribeIntentionType.REQUEST_CUSTOM_PLAN_ACCESS:
        // redirect to a contact form
        break;
      case SubscribeIntentionType.UPGRADE_PLAN:
      case SubscribeIntentionType.DOWNGRADE_PLAN:
        // open the Checkout widget or your custom flow
        break;
    }
  }}
/>

Cache Refresh

After your code performs an op that modifies the customer (provisioning, updating, granting), the cache on the JS client may briefly show stale data. The SDK exposes a refresh method — see the React / JS SDK page on cache refresh.

When NOT to Use This Skill

• Headless gating in your backend (no UI) → stigg-entitlements.
• Modeling features / plans / add-ons → stigg-pricing-modeling.
• Provisioning / canceling subscriptions programmatically → stigg-subscriptions.
• Defining credit currencies / grants → stigg-credits.

Common Mistakes