#Handle subscriptions with Subscribe

Now that your paywall strategy is rock solid, you need a tool to handle subscriptions to your premium content. Hopefully, Poool Subscribe is flexible enough to be used with the least possible amount of hassle on your side.

This guide will only cover the easiest integration possible, which only requires a few lines of JavaScript and a bunch of configuration on your Dashboard. We will assume that you don't already manage free accounts nor paid ones.

#Prepare your environment

#1. Configure your payment gateway

The first thing you need to do is configure your payment gateway. Without this, you won't be able to pass the payment step and won't be able to test your subscription flow.

Go to your Dashboard, and click on the Subscribe tab, then Settings. Choose your favorite payment gateway, enable it and add your credentials.

⚠️ The first step is mandatory as some payment providers requires that your offers are synchronized on both side.

#2. Create your first offers

Now that your payment gateway is configured, you need to create your first offers.

Go to your Dashboard, then click Subscribe, Offers and create a new offer. Name it, give it a price and features and save it.

#3. Create your subscription journey

Once you have your first offer, you need to create a subscription journey. The subscription journey will be the entrypoint to your subscription flow and will allow you to display your offers.

A subscription journey includes a landing page and registration/payment forms. The landing page will be the entry point of your subscription journey and will display your offers.

Go to your Dashboard, click on the Subscribe tab, then Subscription Journeys, and create a new one. To build it, you can start from a template or create it yourself from scratch. Don't forget to include one or more subscription offers.

Save your subscription journey, and don't forget to enable it.

#Add Subscribe.js to your site

Now that your environment is fully set-up, you can start integrating Subscribe. We recommend using a local server and a simple index.html file to achieve this guide, but online coding tools like CodePen or JSFiddle also work (although you can't use cookies inside these tools' iframes).

Assuming our html content is:

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="content">
      <h1 class="title">A Wonderful article behind a paywall</h1>
      <p id="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed...</p>
      <p id="full-content" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed, pharetra cursus mauris. Donec ultricies nibh sit amet quam feugiat, vel bibendum nisl pellentesque. In hac habitasse platea dictumst. Sed varius eget ante ac pulvinar. Suspendisse fringilla, quam ac imperdiet consequat, leo massa molestie mi, eget condimentum ligula enim ut mauris. Aliquam egestas malesuada vestibulum. Etiam ut nibh turpis. Fusce mattis blandit bibendum. Vestibulum sodales laoreet lacus ut sollicitudin. Donec tempus iaculis viverra. In congue felis quis sem porta iaculis.</p>
    </div>
    <div id="paywall" style="text-align: center;">
      <h2>Subscribe to read this article</h2>
      <a href="https://premium.example.com">Subscribe</a>
    </div>
  </body>
</html>

We will first add the Subscribe Tag and verify whether our authenticated user is a subscriber or not:

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="content">
      <h1 class="title">A Wonderful article behind a paywall</h1>
      <p id="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed...</p>
      <p id="full-content" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed, pharetra cursus mauris. Donec ultricies nibh sit amet quam feugiat, vel bibendum nisl pellentesque. In hac habitasse platea dictumst. Sed varius eget ante ac pulvinar. Suspendisse fringilla, quam ac imperdiet consequat, leo massa molestie mi, eget condimentum ligula enim ut mauris. Aliquam egestas malesuada vestibulum. Etiam ut nibh turpis. Fusce mattis blandit bibendum. Vestibulum sodales laoreet lacus ut sollicitudin. Donec tempus iaculis viverra. In congue felis quis sem porta iaculis.</p>
    </div>
    <div id="paywall" style="text-align: center;">
      <h2>Subscribe to read this article</h2>
      <a href="https://premium.example.com">Subscribe</a>
    </div>

    <script src="https://assets.poool-subscribe.fr/subscribe.min.js"></script>
    <script>
      const subs = Subscribe.init('<your-app-id>');

      subs.getUser().then(user => {
        if (user && user.subscription && user.subscription.active) {
          document.querySelector('#excerpt').style.display = 'none';
          document.querySelector('#paywall').style.display = 'none';

          document.querySelector('#full-content').style.display = 'block';
        }
      });
    </script>
  </body>
</html>

As you can see, we are using the Subscribe.js script.

After initializing it with an appId, we can directly call the getUser method to verify user status. If the user has authenticated through your subscription page, the user object will be populated with everything needed to handle premium content access easily.

ℹ️ The getUser method, and even auth elements, retrieve data through an iframe loaded from our platform but using cookies set-up on your custom Poool Subscribe subdomain, or a custom domain if applicable, so you don't have anything to achieve authentication-wise to make it work. It will just work out of the box.

You are now able to lock or unlock your premium content based on the current Subscribe user status.

#Display an auth element

Now that we have our premium content access logic, we can display an Auth Element. An Auth Element is a small component that will be created by Subscribe anywhere you want to display Sign-in or Subscribe buttons related to the currently authenticated user.

This can be achieved in two simple steps:

Create an html element that will receive our auth element
Call the createAuthElement method

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="content">
      <div id="signin"></div>
      <h1 class="title">A Wonderful article behind a paywall</h1>
      <p id="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed...</p>
      <p id="full-content" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed, pharetra cursus mauris. Donec ultricies nibh sit amet quam feugiat, vel bibendum nisl pellentesque. In hac habitasse platea dictumst. Sed varius eget ante ac pulvinar. Suspendisse fringilla, quam ac imperdiet consequat, leo massa molestie mi, eget condimentum ligula enim ut mauris. Aliquam egestas malesuada vestibulum. Etiam ut nibh turpis. Fusce mattis blandit bibendum. Vestibulum sodales laoreet lacus ut sollicitudin. Donec tempus iaculis viverra. In congue felis quis sem porta iaculis.</p>
    </div>
    <div id="paywall" style="text-align: center;">
      <h2>Subscribe to read this article</h2>
      <a href="https://premium.example.com">Subscribe</a>
    </div>

    <script src="https://assets.poool-subscribe.fr/subscribe.min.js"></script>
    <script>
      const subs = Subscribe.init('<your-app-id>');

      subs.getUser().then(user => {
        if (user && user.subscription && user.subscription.active) {
          document.querySelector('#excerpt').style.display = 'none';
          document.querySelector('#paywall').style.display = 'none';

          document.querySelector('#full-content').style.display = 'block';
        }
      });

      const authElement = subs.createAuthElement('signin-with-subscribe-button', {
        target: '#signin'
      });
    </script>
  </body>
</html>

As you can see, we added an <div id="signin"></div> element that will receive the auth element when successfully loaded. Then, we created an auth element using the createAuthElement method and our previously created div's id as the target.

And just like that, you should see a Sign-in and a Subscribe button that will redirect you to your subscription site.

#Test your subscription journey

Now that everything is set up, you can test your subscription flow by clicking the Subscribe button. You will then be redirected to your landing page, displaying the wonderful offers you created a few steps ago. Click on any offer, create an account if you don't have one or sign-in, and subscribe.

ℹ️ Life Pro Tip: If you test your subscription journey in preview mode, you will be prompted to pay with test cards (Stripe, ...) or a sandbox account (Paypal, ...).

Now that you have subscribed to a plan, you can click the Return to the content to return to your article.

You will now be recognized as authenticated (the auth-element will now display your email and a sign-out link) and subscribed (the full content will be displayed).

PreviousStripe integration guide