Overview

In this quick start guide we'll demonstrate how to create a customer-facing paywall using Stigg's embeddable widget.

Before we begin

In order to complete this guide in your application code, please make sure that you have:

• Modeled your pricing in Stigg
• Installed the Stigg React client SDK
• A Stigg client API key

Initializing the React SDK

The first step is to initialize Stigg's React SDK with the client API key by wrapping your application with StiggProvider component.

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

ReactDOM.render(
  <StiggProvider apiKey="YOUR_CLIENT_API_KEY">
    <App />
  </StiggProvider>,
  document.getElementById('app'),
);

Rendering the paywall

Rendering pricing tables

Pricing table widget

Additional resources

Pricing table widget

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