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

Connector for Video: How to Create Your First Paid Video

img-integrations-other
Topics: Connector · Videos
Experience Level: Intermediate
April 28, 2019 · 3 min read

 

 

 

 

 
 
You’re ready to create your first paid video 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/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.

 

3-2
Figure 1: Sandbox Dashboard
 

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.

 

3-4

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).

3-5

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).

Connector Video 3-5

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.

Let’s start from the top. We need to insert a number of script loaders into your website. What is a script loader? It is a short piece of code that, when run, automatically loads a larger set of JavaScript files (the video player, and Connector for Video in this case) without those files needing to live in your html code - or even on your website at all.

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:

 

<script src="https://content.jwplatform.com/libraries/LBLShe0J.js"" type="text/javascript"></script>

 

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:

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

 

For the U.S., use:

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

 

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:

 

<div id="video-container"></div>

<script type="text/javascript">
           jwplayer('video-container').setup({
               file: 'https://laterpayvideo.wpengine.com/wp-content/uploads/2018/08/surfer.mp4',
               laterpayConnector: {
                   video: {
                       mode: 'sell-video'
                   }
               }
           })
</script>

 

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!

 

3-10

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.

 


Further Reading

Developer Tools