Tulo Paywall - Plug & Play - Paywall Javascript¶
Target audience: Developers, Stakeholders
Introduction¶
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. For more information on the specific versions see the table below.
Versions¶
Version | Documentation |
---|---|
1.0 | Documentation |
1.1 | Documentation |
Embedding your Tulo Paywall¶
Version-independent information can be found below. For documentation on the version-specific functionality see available versions above.
Including the Paywall Javascript¶
To utilize the Payway Paywall Javascript you must include the script. See available versions for the appropriate address of the desired version and environment.
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="paywall-container"></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 Paywall().Init({
url: "https://payway-paywall-stage.adeprimo.se/api/paywall",
jwtToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
debug: false
....
....
....
});
</script>
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 |
---|---|---|---|
loadingText | string | Loading... | Text that is shown under the loading icon when the Tulo Paywall UI is rendering |
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.