Paywall JS SDK Integration

Corrily no-code Paywalls are used to minimize effort required for Pricing Page implementation by providing ready-to-use front-end Paywall component. Simply install Corrily SDK and render the complete paywall with a few lines of code.

Corrily Paywalls works through a ReactJS SDK. If your use another framework, please, send implementation request to hello@corrily.com.

​

Integrating ReactJS SDK

1. Install @corrily/react-sdk package:

   cd front-end
   npm i --save @corrily/react-sdk
   

   For React version lower, than 17.0.2:

   npm i --save @corrily/react-sdk --legacy-peed-deps
   

2. Get Corrily API Key from Resources page and store it in .env.local:

   REACT_APP_CORRILY_API_KEY=...
   

3. Embed Paywall into your code:

   import { CorrilyProvider, Paywall } from '@corrily/react-sdk';
   import '@corrily/react-sdk/style.css';
   
   // Corrily API Key
   const CORRILY_API_KEY = process.env.REACT_APP_CORRILY_API_KEY as string;
   
   
   export const App = () => {
     // For authenticated users, provide user_id
     // For unauthenticated, set userId to null
     const userId = 'test-user-id';
   
     // For authenticated users, provide country User belongs to
     // For unauthenticated, use IP address to let Corrily guess country by IP
     const country = "US";
   
     const params = {
       user_id: userId,
       country: country,
     };
   
     return (
       <div className="App">
         <CorrilyProvider
           apiKey={CORRILY_API_KEY}
           params={params}
         >
           <Paywall />
         </CorrilyProvider>
       </div>
     );
   }
   

4. Define “on-click” behaviour for selected product in ProductList.tsx. To do that replace <Paywall /> with PaywallWrapper in the code above:

   return (
     <div className="App">
       <CorrilyProvider
         apiKey={CORRILY_API_KEY}
         params={params}
       >
         <PaywallWrapper />
       </CorrilyProvider>
     </div>
   );
   

   and define PaywallWrapper component itself:

   export const PaywallWrapper = () => {
     const handleProductSelected = async (product: Product) => {
       // Redirect to signup page or send API call to create Stripe Checkout Session
   
       fetch(`https://example.com/api/create-checkout-session`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           product_api_id: product.api_id,
           // userId and country of your authenticated user
           user_id: userId,
           country: country,
           success_url: "https://example.com/success",
           cancel_url: "https://example.com/cancel",
         }),
       })
         .then(async (response) => {
           const res = await response.json();
           // Assume checkout session created on back-end, and it's URL returned in response
           window.location.href = res.session_url;
         })
         .catch((err) => {
           console.error(err);
         });
       };
   
     return (
       <Paywall
         onProductSelected={handleProductSelected}
       />
     );
   };
   

​

Customization

​

Applying custom styles to Paywall elements

Use custom CSS styles to change the appearance of Paywall elements. All elements inside Paywall have corrily-- prefix to separate Paywall classes from your front-end classnames.

​

Custom Product component

In case you want to change Product card layout, use CardComponent property of the <Paywall />. Here is an example:

import { Product, CardProps } from '@corrily/react-sdk';

const CustomCard = ({
  product,
  previousProduct,
  highlighted,
  buttonCaption,
  buttonColor,
  onProductSelected,
}: CardProps) => {
  return (
    <div className={highlighted ? 'highlighted' : ''}>
      <h1>{product.name}</h1>

      <div>
        {previousProduct && <s>{previousProduct.price}</s>}
        {product.price}
      </div>

      <h3>Features:</h3>
      <ul>
        {product.features.map(feature => (
          <li key={feature.id}>{feature.name}</li>
        ))}
      </ul>

      <button
        onClick={(e) => {onProductSelected && onProductSelected(product)}}
        style={{ backgroundColor: buttonColor }}
      >
        {buttonCaption}
      </button>
    </div>
  );
};

export const PaywallWrapper = () => {
  ...
  return (
    <Paywall
      onProductSelected={handleProductSelected}
      CardComponent={CustomCard}
    />
  );
};

​

Additional Parameters

Under the hood Paywall SDK will send API request to fetch products and calculate prices for a given user. In some cases you might want pass additional parameters to that API request.

Common usecases are:

• send "dev": true at the time of testing to disable DB writes
• send "experiment_id": ... to enforce a specific experiment being used
• send "arm_id": ... to enforce a specific arm
• send "override": true to ignore previously stored user price and recompute prices from scratch

Check the full list of parameters available in API Reference in body params section.

Code example with custom params:

...

export const App = () => {
  ...

  const params = {
    user_id: userId,
    country: country,
    dev: true,
    experiment_id: 1234,
    arm_id: 5678,
  };

  return (
    <div className="App">
      <CorrilyProvider
        apiKey={CORRILY_API_KEY}
        params={params}
      >
        ...
      </CorrilyProvider>
    </div>
  );
}

​

Integration Examples

Check the Implementation Examples Repo to see the examples of React SDK usage: https://github.com/corrily/integration-examples/tree/main/react-sdk-integration