Paywall JS SDK Integration

​

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

​

Custom Product component

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

• 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

...

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