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

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

React
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 the customer paywall can be achieved in 2 steps:

  1. Set the customer ID, the customer ID can usually be retrieved after a customer signs-in or restores their session.
TypeScript
import { useStiggContext } from '@stigg/react-sdk';  
function App() {  
  const { stigg } = useStiggContext();  
  useEffect(() => {  
    // After user sign in call to setCustomerId  
    stigg.setCustomerId('customer-ID');  
  })  
}
  1. Use the Paywall to render the customer paywall.
React TSX
<Paywall  
  highlightedPlanId="plan-id"  
  onPlanSelected={({ plan, customer }) => {  
    // Handle customer intention to subscribe to plan  
  }}  
/>

​
Additional resources

Stigg's frontend integration