Rendering a customer portal

​

Overview

In this quick start guide we’ll demonstrate how to create a customer portal using Stigg’s embeddable widgets.
The customer portal widget built to be modular and every component can be used as a standalone so it’s possible to composite and build your own customer portal by using only specific component or build your own unique customer portal layout.

​

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 customer portal

Rendering the customer portal can be achieved using 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');  
  })  
}

2. Use the CustomerPortal component to render the customer portal.
   The CustomerPortal component support component composition so it’s possible to pass as a parameter the Paywall component and it will be rendered inside the customer portal.

<CustomerPortal  
    paywallComponent={<Paywall />}  
    theme={...}  
    textOverrides={...}  
/>

​

Additional resources