|Topics: Connector · Videos|
|Experience Level: Intermediate|
|December 17, 2019 · 3 min read|
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
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.
There are a number of ways that you can create a paid video 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.
Figure 2: Create a Single Purchase
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 “singleVideoPurchase” representing a single purchase video that costs $1.99).
Figure 3: The Single Purchase Dashboard
- Confirm the 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 4: 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 5: Confirming Revenue in the Analytics Dashboard
You’re are all done! Congratulations on successfully adding the LaterPay Connector for Video 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.