Welcome to Part 2 the LaterPay Video 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 video using the LaterPay Connector!
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/mpMlsHwNGQA
There are a number of ways that you can create a paid video with the LaterPay Connector for Video, 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 for Video, 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.
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. In Connector Classic, used for monetizing text content, these templates are used to define which part, and how much, of the text will be hidden by the overlay. We will not be using this for our videos.
Figure 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 singleVideoPurchase (single purchase video 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/videos/video.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 video you want to display the overlay on. This is particularly useful if you have multiple videos 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, depending on which region your are in.
- Template: As mentioned already, we have to assign a template to each purchase in Connector Classic, to distinguish which text will be hidden behind a purchase overlay. This is not needed in Connector for Video.
Figure 3.4: The Single Purchase Dashboard
Right, let’s start by confirming a price and payment parameter - set the price to 200 ($2.00) 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 need to prepare the webpage where you will be inserting your video, in order for it to be able to run smoothly with the Connector for Video.
First, we need to insert a video player script loader.
Note: Throughout this guide, we have chosen to use JWPlayer as our default video software. This is simply because LaterPay offers the most support for that player’s functionalities. You can review other players that LaterPay supports, together with which functionality is supported, here.
The video player script loader for JWPlayer is as follows:
Next, we insert a LaterPay Sandbox script loader. Each video player has a separate video loader; we will be using the one for JWPlayer.
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:
For the U.S., use:
The different URLs for different players and environments (we are using the sandbox environment in this case) can be viewed here.
Now that we have that figured out, we need to prepare the video itself.
The question here is - what is the source of your video, and how will it be embedded? Let us take as an example that your video is just an mp4 file, that is located on a URL - probably uploaded to your server. An example that we will use in this guide is https://laterpayvideo.wpengine.com/wp-content/uploads/2018/08/surfer.mp4
This video needs to run in a player, in order for us to wrap our paywall around it. In our example, we will be reproducing the video with the JWPlayer, because our Connector for Video “knows” how to “talk” to it, in order to display the purchase overlay properly.
So let’s jump straight into it. All you need to do it to add the player wrapper around the link:
Now refresh your video page on your website and you should see the video hidden behind the LaterPay overlay. Try clicking on ‘Pay Later’ to complete the purchase - the video should now play to you and, if you go back to the LaterPay sandbox, you will see the revenue has been in the analytics dashboard!
Figure 3.6: Confirming Revenue in the Analytics Dashboard
You’re are all done! Congratulations on successfully adding the LaterPay Connector for Video to your site!
Checklist: Creating Your First Paid Video
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
Wrap your video in an appropriate player
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 Videos Together: allowing users to buy a number of videos in a single purchase
Prerequisite: Level 3
Objective: Sell two videos as a bundle, meaning that users can buy both of them in a single purchase
Video Tutorial: https://youtu.be/9LG4cVyl7cc
In this scenario we are going to be using the single purchasing option of the connector interface.
You first need to define which videos are going to be sold. Prepare the URLs of these videos - 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 webpage containing the video!
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 videos that you added. Purchasing one of the videos should now unlock both of them. See also Scenario 5.1. For a version of this method using ArticleID!
Scenario 3.2: Selling 2 Videos Separately
Prerequisite: Level 3
Objective: Sell two videos separately, meaning that users will need to buy each video individually to see the content.
Video Tutorial: https://youtu.be/yba-Af6vY34
In this scenario we are going to be using the single purchasing option of the Connector interface to define two purchasing options, all mapping to single videos on the mock webpage. Don’t forget to include the connector for video 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 where the corresponding video is located as an exact match, pricing the videos individually. At the end, you should see a purchasing overlay appear on both videos, 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!