Availability

Tulo Paywall - Javascript v1.4¶

Target audience: Developers, Stakeholders

Including the javascript¶

For the Tulo Paywall to function as it should, you will need to include our JS on your site. Choose the correct file, depending on what environment and version you are working in.

Environment	URL
Production	https://payway-cdn.worldoftulo.com/js/1.4/paywall.js
Staging	https://payway-cdn-stage.adeprimo.se/js/1.4/paywall.js

Embedding your Tulo Paywall¶

The Paywall Javascript is available in multiple versions. To avoid introducing breaking changes and browser caching issues, new features in the Paywall Javascript will be introduced as new versions. You can read more about all available versions here.

We strongly recommend you use the same version for both the CSS and JavaScript files to guarantee everything works as intended. For example, if you use v1.4 of our JavaScript, you should also be using v1.4 of our CSS. The changes that have been introduced in a version (as compared to it's predecessor) are available at the bottom of the page of each version.

Define the HTML container for your Paywall¶

To embed your Tulo Paywall, you will first need to define an HTML container where the paywall should live. This container can be anywhere on your site, though we recommend you give it plenty of space.

<div id="tulo-paywall">
    <template id="paywall-loader-template">
        <div class='lds-dual-ring'></div><p><i>Loading ..</i></p>
    </template>
    <div id="paywall-container"></div>
</div>

Initializing the Paywall Javascript¶

With the HTML container in place, you must initialize the Javascript. This will take care of embedding your paywall into the container:

<script type="text/javascript">
    new TuloPaywall().Init({
        url: "https://payway-paywall-stage.adeprimo.se/api/paywall",
        jwtToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
        debug: false
        ....
        ....
        ....
    });
</script>

Paywall.Init example

When initializing the Tulo Paywall script, an url and jwtToken must be provided. For information on all available attributes see the version-specific documentation.

Tulo Paywall URL¶

Choose the correct url, depending on what environment you are working in.

Environment	URL
Production	https://paywall.worldoftulo.com/api/paywall
Staging	https://payway-paywall-stage.adeprimo.se/api/paywall

Text resources¶

There are several overridable text resources. Here you'll find which they are and when and where they occur. These resources can overridden using the resources property.

Property	Type	Default value	Description
errorHeader	string	An error has occurred	The header shown when an error occurs
errorDescription	string	Something unexpected happened. Please try again later, and if the problem persists, contact support.	The description shown when an error occurs

Error handling¶

If an error within the Tulo Paywall occurs, an onError function will be triggered. By default, this means that an error will be shown to the end-user, and you will receive debug information (granted the debug flag is set to true) in the browser console.

If you would like to override this behavior, you can simply define an onError function when initializing the paywall. Furthermore, the function should accept one argument, in the form of the exception that was thrown. The exception that is thrown will always contain the following information:

Property	Type	Description
name	string	Will always be set to "PaywallError"
code	string	The error code that was thrown
field	string	The field relating to the error that was thrown
pwCorrelationId	string	The correlation ID of the error. If you contact our support regarding a Tulo Paywall error, this ID should always be included in the support request.
toString	function	Returns a stringified version of the error.

The default error that is shown to the end user will always look like the following, though the text resources are customizable via the resources property.

Tulo Paywall Error

Attributes available on initialization¶

Below is a list of attributes available for use when initializing the Paywall Javascript v 1.4.

Attribute	Type	Description	Required	Available as resource in Paywall template
url	string	Tulo Paywall URL	Yes	No
jwtToken	string	Generated server side in Step 4	Yes	No
containerId	string	The ID of the HTML container where the Paywall should be initialized. Will default to `paywall-container`.	No	No
debug	boolean	Set to true for additional information when troubleshooting	No	No
accountOrigin	string	Read more about Account origin	No	No
trafficSource	string	Read more about Traffic source	No	No
merchantReference	string	Read more about Merchant reference	No	No
returnUrl	string	Read more about Return url	Yes	Yes, [RETURN_URL]
backUrl	string	Can be used as an alternative link back to the website from Tulo Shop, not to be mistaken for the returnUrl.	No	No
loginUrl	string	Can be used to display a link for the customer to log in.	No	Yes, [LOGIN_URL]
shopUrl	string	Can be used for displaying a custom link to the Tulo Shop. For example to all available offers.	No	Yes, [SHOP_URL]
ticketLoginUrl	string	Used to login the user after purchase.	No	Yes, [TICKET_LOGIN_URL]
utmSource	string	GA support	No	No
utmMedium	string	GA support	No	No
utmCampaign	string	GA support	No	No
utmContent	string	GA support	No	No
resources	object	Overridable text resources. You'll find the available resources and default values here.	No	No
engageTracking	object	Engage BI tracking meta data	No	No
articleId	string	If the Tulo Paywall is initiated from an article add the articleId to this parameter.	No	No
categories	array	Categories e.g. ["cat 1", "cat 2"]	No	No
sections	array	Sections e.g. ["sec 1", "sec 2"]	No	No
onError	function	Callback if a Tulo Paywall error occurs. Will override default onError behavior. Read more here.	No	Yes, [ON_ERROR]
onCompleted	function	Callback when the Tulo Paywall is done. This includes both successful and unsuccessful outcomes. Read more here.	No	Yes, [ON_COMPLETED]
onOrderClosed	function	Callback when a order has been successfully placed and closed via the Tulo Paywall. Read more here.	No	Yes, [ON_ORDER_CLOSED]
customVariables	object	Custom variables to be used in the Paywall template upon rendering, a set of keys and values	No	Yes, each supplied key is available
key	string	Value for the custom variable Valid characters for key: [a-zA-Z-_] Size range for key: ..100 Forbidden characters for value: <>{}\ < > Size range for value: ..1024	No	Yes, the key name is capitalized and referenced in the template by adding brackets around the name

Changes from version 1.3¶

Support for alternative offers¶

Alternative offers can now be configured for all Klarna Payment Checkout Paywalls. This will allow you to customize the user experience in more detail whenever the customer is not eligible for the initial promoted price, but the offer evaluation has found an alternative product the customer might be interested in.

Read more about this functionality here.

Support for onCompleted and onOrderClosed callbacks¶

Two additional callbacks, onCompleted and onOrderClosed can now be defined when initializing the Tulo Paywall. These will be used across the entire span of the Paywall, and allow you to better react to events happening within the Paywall.