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

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.

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

​

Additional resources