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

Use Cases: Interacting with a Publisher-specific Sign-up System

img-integrations-other
Topics: Use Cases · Connector
Experience Level: Advanced
October 31, 2019 · 8 min read

 

 

 

 

 

 

In this particular situation, our partner had their own subscription system and wanted to integrate that with LaterPay in order to provide additional monetization possibilities.

 

This meant that we needed to take the following requirements into account when considering how to best implement that integration:

  • Visitors would need to be able to view paid content if they logged in via our partner’s sign-in system;
  • A button would need to be provided on the subscription overlay that linked directly to the partner’s sign-up / sign-in system;
  • Visitors would also need to be able to purchase individual articles or subscriptions independently from the partner’s own sign up system.

To achieve all of this, we leveraged the following capabilities provided by the LaterPay Connector:

  1. Callbacks - used to detect whether a user is logged on and then display the purchase overlay accordingly’
  2. Free-form Purchasing Options - used to insert the additional button linking to the partner’s own sign-in page.

Taking it Step-by-Step

1) Callbacks

Callbacks enable partners to control events after the Connector has been deployed on the website. In other words, the partner can introduce additional conditions which, if satisfied, will result in the overlay being shown or not.

How does this benefit us in this use case? We can use callbacks to determine whether the user is logged in and, if so, we can disable the purchase overlay being deployed.

In code, the callback looks like this:

 

<!-- Define the global JavaScript callback function -->
<script type="text/javascript">
function lpcReadyCallback(lpcHandle) {
if ([Detect whether user is logged in]){
lpcHandle.preventDefault()
}
}
</script>

<!-- LaterPay Connector In-Page Configuration -->
<script type="application/json" id="laterpay-connector">
{
"callbacks": {
"onReady": "lpcReadyCallback"
}
}
</script>

 

So as you can see, the Connector first needs the function that processes the logic to be declared - in our case this is the lpcReadyCallback function. Following this, we register the callback function with the connector by specifying it in the “callbacks” attribute of the laterpay-connector configuration.

The key here is “[Detect whether user is logged in]”. Unfortunately, there is no silver bullet here - different systems will have different syntax and semantics on how to process this. However, what you should look for is a token that is associated with the authenticated session, or perhaps a function in the native system which would provide you with this information.

The result of this is that lpcReadyCallback is called when the website is ready, and the overlay is conditionally displayed based on the user’s login status.

That covers the part where we have to understand whether the user is logged in or not. You can read more about this here.

Let’s now look at how to redirect the user to the native sign in/sign up page.

 

2) Free-form Purchasing Options

Free form purchasing options enable you to define additional options on the overlay, which can redirect the visitor to a custom URL.The benefits of this are obvious - we can redirect our visitor to a sign-up URL once the purchase overlay is displayed.

The code for this looks as follows:

 

<script type="application/json" id="laterpay-connector">
{
"freeFormPurchaseOptions": [{
"title": "This is your purchasing option",
"description": "You can write here whatever you want. You can even use custom currency",
"price": {
"amount": 150,
"currency": "SFB"
},
"purchaseButtonLabel": "Purchase",
"purchaseUrl": "http:\/\/example.com\/signUp",
"position": 2,
"target":"_blank"
}],

}
</script>

 

And it will be displayed as such on the website:

 

Image 1-1

Let’s go through the individual attributes:

 

Title (Required)
The Free-Form Purchase Option’s title (displayed on the first row of the list entry).

Description (Required)
The Free-Form Purchase Option’s description (displayed on the second row of the list entry).

purchaseUrl (Required)
The Free-Form Purchase Option’s URL. The user will be navigated to this URL when they click the purchase button.

purchaseButtonLabel (Required)
The purchase button label that will be displayed when the Free-Form Purchase Option is selected.

price (Optional)
An object stating the amount and currency. It is used for presentation purposes, only. To display a 1.23 EUR pricing, use this:

 

"price": {
"amount": 123,
"currency": "EUR"
}

 

Remember that you can use whatever currency you like here, because Free-Form Purchase Options don’t correspond to actual LaterPay Purchase Options.

position (Optional)
An index starting with 0 for the top position. It indicates the Free-Form Purchase Option’s position on the purchase list. The default position is the bottom of the list.

target (Optional)
A link target that is used when the Purchase Button is clicked (e.g. _blank for a new window). The default behavior is a redirect (equivalent to the target _self).

 

Summary

In this use-case we showcased how we can integrate LaterPay with a partner-specific sign up system. Although this does not detail a single solution that will work in every case, it does provide guidelines on how the requirement can be fulfilled by using the LaterPay Connector

To do so, we need to leverage the following capabilities provided by the Connector:

  1. Callbacks - used to detect whether a user is logged on, displaying the purchase overlay accordingly. We need to determine whether the hosting system provides a functionality to detect this; otherwise we need to validate whether the user token is present and valid, or something similar;
  2. Free-form Purchasing Options - used to add the additional button linking to the partner sign-in page, and can be customized accordingly.