Rendering paywalls

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 publishable key

Initializing the React SDK

The first step is to initialize Stigg’s React SDK with the publishable 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_PUBLISHABLE_KEY">
    <App />
  </StiggProvider>,
  document.getElementById('app'),
);

Rendering the paywall

Rendering the customer paywall can be achieved in 2 steps:

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');  
  })  
}  

Use the Paywall to render the customer paywall.

React TSX

<Paywall  
  highlightedPlanId="plan-id"  
  onPlanSelected={({ plan, customer }) => {  
    // Handle customer intention to subscribe to plan  
  }}  
/>  

Integration guides

Quick start guides

I want to...

Overview

Before we begin

Initializing the React SDK

Rendering the paywall

Additional resources

Stigg's frontend integration

​Overview

​Before we begin

​Initializing the React SDK

​Rendering the paywall

​Additional resources

Stigg's frontend integration

Overview

Before we begin

Initializing the React SDK

Rendering the paywall

Additional resources