Rendering custom paywalls

​

Overview

In this quick start guide we’ll demonstrate how to create a custom customer-facing paywall.

​

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 JavaScript client SDK
• A Stigg client API key

​

Initializing the client SDK

The first step is to initialize Stigg’s client SDK with the client API key of the environment that’s integrated with Stigg, and the ID of the relevant customer.

The customer ID can usually be retrieved after a customer signs-in or restores their session.

import Stigg from '@stigg/js-client-sdk';

const stiggClient = await Stigg.initialize({ 
    apiKey: 'YOUR_CLIENT_API_KEY',
    customerId: "customer-test-id"
});

export default stiggClient; 

​

Rendering the custom paywall

Rendering the paywall can be achieved in 2 steps:

1. Retrieve the paywall content.

const plans = await stiggClient.getPaywall();  

2. Bind the returned content to your company’s branded and fully customized UX components.

​

Additional resources