> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stigg.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/documentation/modeling-your-pricing-in-stigg/overview)

- [Installed the Stigg React client SDK](/api-and-sdks/integration/frontend/react#installing-the-sdk)

* [A Stigg **publishable** key](/api-and-sdks/integration/frontend/react#retrieving-the-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.

```javascript React theme={null}
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:

1. Set the customer ID, the customer ID can usually be retrieved after a customer signs-in or restores their session.

```typescript TypeScript   theme={null}
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.

```javascript React TSX   theme={null}
<Paywall  
  highlightedPlanId="plan-id"  
  onPlanSelected={({ plan, customer }) => {  
    // Handle customer intention to subscribe to plan  
  }}  
/>  
```

## Additional resources

<Card title="Stigg's frontend integration" href="/api-and-sdks/integration/overview#frontend" icon="code" horizontal />