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

Connector for Articles: How to Create Your First Paid Article

Topics: Connector · Articles
Experience Level: Intermediate
December 17, 2019 · 3 min read




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

We’re going to walk you through each step, but first re-familiarize yourself with our guide to the Connector Admin Page.
We’ve also prepared a short video that sets out exactly what you’re going to be doing: https://youtu.be/bz69m5CdXyU


Note: When creating a paid article for the first time, we typically recommend that you do this in a sandbox environment - the expression ‘sandbox’ is used for an isolated test environment that allows for testing of site functionality without affecting the live environment, which is used for real business content. You can learn more about the LaterPay sandbox environment here and, for the purposes of the example in the video above, we did precisely that.



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, we will move on to some other options and look at different monetization models that you can implement.


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


In the next screen, you are presented with a series of parameters through which to define your single purchase. You should already be familiar with this from the Connector Admin Page walk-through.


Right, let’s start filling this out.

  • First, provide a unique name for the Single Purchase (in our example, we used “single_purchase_199” representing a single purchase article that costs $1.99).


Figure 1: The Single Purchase Dashboard


  • Confirm the 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 2: 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. Click ‘Add New Template.’ You will now see a number of fields are displayed:


Figure 3: Adding a New Template


  • Name: Again, you can give a template any name you want. In our example we used the same naming convention and called 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 4: Template Fields


Next you need to insert the LaterPay Sandbox script loader into your website - this 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.


Place the following code (choose the right one based on your location: the EU or the U.S.) between the <head> and </head> tags of your page’s html:


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 5: Inserting the Script Loader between the <head> and </head> Tags


Now refresh the 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!


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


Now, when you’re ready, let’s take a look at how we use Subscriptions and Time Passes instead of Single Purchases.


Further Reading

Developer Tools