<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=442498563201411&amp;ev=PageView&amp;noscript=1">

Getting Started with the LaterPay Connector (Part 2)

Welcome to Part 2 the LaterPay Connector Guide!

In Part 1, we already covered the basics of setting up your account and beginning to think about your pricing strategy. If you need a refresher before you move forward, you can access those Levels below

Now it's time to get working on creating your first paid article using the LaterPay Connector!

LEVEL 3: Creating Your First Paid Article

 You’re ready to create your first paid article with LaterPay!

We’re going to walk you through each step, but we’ve also prepared a short video that sets out exactly what you’re going to be doing: https://youtu.be/bz69m5CdXyU

There are a number of ways that you can create an article with the  LaterPay Connector, but for the purposes of this guide, we’re going to walk you through the simplest method. From there, in later steps, we will showcase some of the other possibilities as well as taking a look at other monetization models that you can implement.

To make it easy to learn about the LaterPay Connector, we have created for our customers a virtual sandbox - a testing environment where you can experiment with the Connector, explore different options, and hone your skills before you apply them to your own site, all without any risk of breaking anything!

Let’s get started!

First, navigate to the sandbox merchant account: https://web.sandbox.laterpaytest.net

This is the administrative dashboard for your sandbox account. Here you can find all the information, tools and settings you’ll need. We can start by exploring the different configuration possibilities.

Figure 3.1: Sandbox Dashboard


Click on ‘Connector.’ This will bring you to the area where you can define all the configurations related to your connector. What this means in practice is that you can define:


The purchasing options. As you can see from Figure 3.2, there are multiple different purchasing options that you can choose from - single purchases, time passes, and more.

Templates associated with purchasing options. You will use these templates to define which part, and how much, of the text will be hidden by the overlay.

3-3Figure 3.2: Connector Menu Options


Let’s start off by defining a single purchase. To do this, click on ‘Single Purchases’ and hit the plus sign to create a new one.


Figure 3.3: Create a Single Purchase


In the next screen, you are presented with a series of parameters through which to define your single purchase.


  • Title: This refers to the specific single purchase you’re setting up You can give it any name you want, though we would recommend using a naming convention that can be used consistently for different payment options and prices. For the time being, let’s name it single_purchase_199 (single purchase article that costs $1.99).
  • Match Type: Exact Path / ArticleID
    • If you choose Exact Path, the LaterPay system will match the exact URL of the article that you want to monetize using the Connector. For our example in the video, that URL was https://ttvrdic.github.io/connector-script/AnEconomist/econ_article_1.html. This is great to use if you only have a few articles to monetize, or you’d like to manually set up your payment options.
    • You can also associate an ArticleID with the article you want to display the overlay on. This is particularly useful if you have multiple articles that all have the same structure - so you then can bind them with the same ArticleID and associate them with the same single purchase, even if they are scattered across your website.
  • Price: This is self-explanatory, but please note that all prices are specified in cents - so 400 means 4€ or $4.
  • Template: We have to assign a template to each purchase. Why? As mentioned above, a template is a means of defining which part of the article we want to have covered by the paywall overlay. We’ll learn more about templates in later steps.


Figure 3.4: The Single Purchase Dashboard


Right, let’s start by confirming a price and payment parameter - set the price to 199 ($1.99) and set the payment parameter to ‘Pay Later’ (the other option would be ‘Pay Now,’ whereby readers would need to input their credit card and confirm their payment before accessing the content).


Figure 3.5: Setting the Price and  Payment Parameters


Now we want to choose the right template, which will define how much of the article we want users to pay for, and how much we will leave uncovered. From either the main Connector Menu, or the dashboard for the single purchase we just created, click ‘Add New Template.’


Figure 3.6: Adding a New Template


You will now see a number of fields are displayed:

  • Name: Again, you can give a template any name you want, but for now let’s follow the same naming convention and call it single_purchase_199_template.

  • UUID: A universally unique identifier (UUID) is a 128-bit number used to identify an entry without running the risk of it duplicating an entry that already exists. You do not need to input anything here; the ID will be generated automatically when you hit Save, and it is relevant for In-Page Configuration Tokens. No idea what that is? Ignore it for now (or hold on for a later level)!

  • Content to Sell: Here we employ a CSS selector to define the elements to which we want to apply rules. As we mentioned above, we employ a template in order to define what we want to hide when displaying the paywall prompt and what we leave uncovered. This is achieved by using a proper CSS selector.

For a step-by-step guide to using the CSS selector, please re-watch the video above starting at 8:45.


Figure 3.7: Template Fields


Next you want to insert a LaterPay Sandbox script loader into your website. What is a script loader, you ask? It is a short piece of code that, when run, automatically loads a larger set of JavaScript files (the Connector in his case) without those files needing to live in your html code - or even on your website at all.


You will need to place the following code (depending upon whether you’re in the EU or the U.S.) between the <head> and </head> tags of your html document:


For the EU, use:

<script type="text/javascript" src="https://connector-script.laterpay.net/3-stable/eu/sbx/app-en-us.js"></script>


For the U.S., use:

<script type="text/javascript" src="https://connector-script.laterpay.net/3-stable/us/sbx/app-en-us.js"></script>


Figure 3.8: Inserting the Script Loader between the <head> and </head> Tags


Now refresh your article page on your website and you should see the first paragraph, with the rest of the text hidden behind the LaterPay overlay. Try clicking on ‘Pay Later’ to complete the purchase - the content should now be visible to you and, if you go back to the LaterPay sandbox, you will see the revenue has been in the analytics dashboard!


Figure 3.9: Confirming Revenue in the Analytics Dashboard 


You’re are all done! Congratulations on successfully adding the LaterPay Connector to your site!


Checklist: Creating Your First Paid Article

  • Navigate to your merchant account and verify that your URL is defined in your account

  • Go to the Connector page

  • Define a single purchase, setting the article URL in the “Exact Path” field

  • Associate a template with a purchase, using the CSS selector to hide the content you want to be paid for

  • Insert the Connector script loader into your website

  • Refresh content and confirm you’re all set!

In Part 3 of this blog series, we are going to look at adding subscriptions and time passes. Alternatively, if you'd like to review some more scenarios related to Level 3, please see below!



Scenario 3.1: Bundling Articles Together: allowing users to buy a number of articles in a single purchase

Prerequisite: Level 3

Objective: Sell three articles as a bundle, meaning that users can buy all three of them in a single purchase

Video Tutorial: https://youtu.be/l0AeecVZ-dk



In this scenario we are going to be using the single purchasing option of the connector interface.


You first need to define which articles are going to be sold. Prepare the URLs of these articles - we are going to be inserting them into the single purchase creation interface. Moreover, don’t forget that you need to include the connector script on each article!


You then need to create a new single purchase. The match type will have to be Exact Path, and we will record each of the URL by adding them using the Add Path button. At the end, you should see a purchase overlay appear on all the articles that you added. Purchasing one of the articles should now unlock all three of them. See also Scenario 5.1 for a version of this method using ArticleID!




Scenario 3.2: Selling 3 Articles Separately

Prerequisite:#level-3 #

Objective: Sell three articles separately, meaning that users will need to buy each article separately to see the content.

Video Tutorial: https://youtu.be/OsvfjPYQi8E


In this scenario we are going to be using the single purchasing option of the Connector interface to define three purchasing options, all mapping to single articles on the mock webpage. Don’t forget to include the connector script on each article for which a single purchasing option is created.


You then need to create a new single purchase for each article, inserting the URL of the corresponding article as an exact match, and pricing the articles individually. At the end, you should see a purchasing overlay appear on all three articles, however with different prices set for each, corresponding to the price set in the individual pricing section. See also Scenario 5.3 for a version using ArticleID!