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. It’s built on top of the JavaScript SDK and is the recommended method for integrating Stigg into your React application.Installing the SDK
You have a few options for using the@stigg/react-sdk
package in your project:
From npm:
Retrieving the client API key
In the Stigg app, 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 singleStiggProvider
component. that will provide the React Context to components that are placed inside your application:
Importing the styles
If you plan to use the widget components, add an import statement to include the bundled styles:Setting the customer context
Set the customer ID of the user that’s accessing your app, usually after the customer signs in or restores a session. ThecustomerId
can be passed to the StiggProvider
component:
customerId
is not available when you render the StiggProvider
component so it’s more convenient to use the setCustomerId
function directly from the Stigg JS SDK:
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
Custom hooks
The React SDK provides hooks that give you access to the Stigg object, entitlement checks, and helper methods for fetching data:- useStiggContext
- useBooleanEntitlement
- useNumericEntitlement
- useMeteredEntitlement
- useActiveSubscriptions
- useCustomerPortal
- usePaywall
useStiggContext
Use theuseStiggContext
React hook to access Stigg’s JavaScript client easily from every component:
useBooleanEntitlement
TheuseBooleanEntitlement
allows checking access for boolean entitlement:
useNumericEntitlement
TheuseNumericEntitlement
allows checking access for numeric entitlement:
useMeteredEntitlement
TheuseMeteredEntitlement
allows checking access for metered entitlement:
useActiveSubscriptions
TheuseActiveSubscriptions
return the active subscriptions list:
useCustomerPortal
TheuseCustomerPortal
return the customer portal object:
usePaywall
TheusePaywall
return the paywall object:
Entitlement guard components
Entitlement guard components are useful in the cases where you need to wrap some part of the UI with an entitlement check and show a component in case the customer has no access to the feature:BooleanEntitlementGuard
NumericEntitlementGuard
MeteredEntitlementGuard
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 toStiggProvider
component. Doing so will affect all Stigg widgets that are descendent to the provider.
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:Offline mode
During local development or testing, you might want to avoid making network requests to the Stigg API. To do this, you can run the React SDK in offline mode by enabling the offline option. When enabled, API key validation will always succeed, regardless of the key provided.Full SDK reference
React SDK reference
SDK changelog
React SDK changelog
Migration from older SDK versions to v3.x
-
Removed CSS class names:
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:to: