Overview

The Stigg React SDK is a Javascript library for implementing pricing and packaging in React apps with Stigg. it provides plug and play components and custom React hooks.

📚
Full SDK reference ↗️

Installing the SDK

You have a few options for using the @stigg/react-sdk package in your project:

From npm:

npm install @stigg/react-sdk

From yarn:

yarn add @stigg/react-sdk

Retrieving the client API key

In the Stigg Cloud Console, go to Settings > Account > Environments.

Copy the Client API key of the relevant environment.

Getting started

First, you'll need to wrap your application in a single StiggProvider component. that will provide the React Context to components that are placed inside your application:

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

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

Importing the styles

If you plan to use the widget components, add an import statement to include the bundled styles:

import '@stigg/react-sdk/dist/styles.css';

Rendering widgets

Pricing table

Allow customers to select the plan that that they'd like to subscribe to from your public pricing page or in-app paywall

Customer portal

Introduce self-service and drive in-app expansions using only a few lines of codes

Checkout

Easily accept payments without ever worrying about changes to your pricing model or migration to another billing provider

Customization options

The widgets that are included in this package include a default theme, which can be customized to match the appearance of your application.

Global theming

You can pass customization options such as theming and locale to StiggProvider component. Doing so will affect all Stigg widgets that are descendent to the provider.

import React from 'react';  
import ReactDOM from 'react-dom';  
import { StiggProvider } from '@stigg/react-sdk';  
import App from './App';

// Example of the options that are available for the theme  
const theme = {  
  palette: {  
    primary: '#FFA500',  
    backgroundPaper: '#fcfbf8',  
    backgroundHighlight: '#FFF3E0',  
    outlinedHoverBackground: '#FFE0B2',
    text: {
      primary: '#333bf8',
      secondary: '#fcf222',
      disabled: '#fcf111',
    },
  },  
  layout: {  
    planMinWidth: '250px',  
    planMaxWidth: '250px',  
    ctaAlignment: 'center',  
    headerAlignment: 'center',  
    descriptionAlignment: 'center',  
  },  
  typography: {
    fontFamily: 'custom-font, DM Sans, sans-serif',
    h1: {
      fontSize: '32px',
      fontWeight: 'bold',
    },
    h2: {
      fontSize: '24px',
      fontWeight: 'normal',
    },
    h3: {
      fontSize: '16px',
      fontWeight: 'normal',
    },
    body: {
      fontSize: '14px',
      fontWeight: 'normal',
    },
  }
};

ReactDOM.render(  
  <StiggProvider apiKey="YOUR_CLIENT_API_KEY" theme={theme} locale="de-DE">  
    <App />  
  </StiggProvider>,  
  document.getElementById('app'),  
);

📘
You can find more theming options here

Widget-specific customization

Each widget can be customized separately via the no-code widget designer in the Stigg app or using code.

Widget-specific customization capabilities can be found under the dedicated page of each widget.

Refreshing the cache

Stigg's SDK refreshes its cache of customer entitlements and usage data upon initialization (for example: when a page is refreshed), as well as periodically every 30 seconds.

After performing an operation on the backend that can modify the customer entitlements or the usage of a feature (for example: updating subscriptions or reporting usage), it's useful to immediately refresh the cache.

To do so, call the below method:

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

function App() {
	const { stigg, refreshData } = useStiggContext();
  
  const addSeats = async () => {
    // Api call which modify customer entitlements (e.g. add seats or report usage)
    await api.addSeats();
    await refreshData();
  }
}

Hooks

Use the useStiggContext React hook to access Stigg's JavaScript client easily from every component:

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

function App() {  
  const { stigg } = useStiggContext();

  useEffect(() => {  
    // Use stigg Javascript client function  
    stigg.getBooleanEntitlement(...)  
  })  
}

Full SDK reference

React SDK reference

Migration from older SDK versions to v3.x

Removed CSS class names (For an updated list of CSS class names check here)
- stigg-overview-subscriptions-list-layout
- stigg-overview-subscriptions-list
- stigg-billing-information-layout
- stigg-billing-information-title
- stigg-update-billing-button

Paywall textOverrides.price.paid paid text customization callback signature was changed:
from:

{
  price: {
    paid?: (planPrice: Price, plan: Plan, selectedBillingPeriod: BillingPeriod) => PlanPriceText;
  }
}

to:

{
  price: {
    paid?: (priceData: {
      planPrices: Price[];
      paywallCalculatedPrice?: PaywallCalculatedPricePoint;
      plan: Plan;
      selectedBillingPeriod: BillingPeriod;
    }) => PlanPriceText;
  }
}