Protecting time-based content has two parts: gating the UI with paywall events, and telling tiun what the user is viewing so metering and billing stay accurate.
Wire your screens to the paywall events: show the premium UI when paywallHide fires, replace it with a paywall when paywallShow fires.
tiun.on('paywallShow', () => {
hidePremiumContent();
showPaywall();
});
tiun.on('paywallHide', () => {
hidePaywall();
showPremiumContent();
});Start your app with the paywall visible — the default state is locked until the user connects a payment method via tiun.start().
The SDK needs to know what the user is on so it can meter correctly. Call tiun.setContent() on every route or section change that affects what counts as billable.
You pass a content type describing how tiun should treat the current view:
'active'
Paid, billable content. Time accrues per your product rules.
'inactive'
Free or non-billable content. Metering pauses and the user is not billed.
'paused'
Temporarily not accruing — for example an interstitial, an ad break, or a deliberate user pause.
Keeping setContent() accurate across navigation prevents incorrect charges and keeps paywall state trustworthy.
How tiun interprets engagement depends on the media type of the content:
'text' (default)
Tied to visibility and scroll — reading in view counts as engagement; leaving the viewport can pause or stop metering.
'audio'
Stays active during background or locked-screen playback — suited to podcasts and music.
'video'
Follows play and pause — billing tracks actual playback rather than page presence.
Pick the media type that matches the asset so sessions reflect real usage:
The optional contentId you pass to setContent() is a stable identifier — an article slug, an episode ID, a video asset key. It surfaces in dashboard analytics so you can tie charges and sessions to specific pieces of content.
The paywall events and setContent() calls cover the client side. If your backend serves the premium payload itself (an article body, a stream URL, an API response), you should also verify the session on the server before responding — clients can lie about whether paywallHide fired.
See server-side session verification for the flow using the sessionId from paywallHide.
Last updated
Was this helpful?
Was this helpful?
function onRouteChange(path) {
tiun.setContent({
type: isPaidContent(path) ? 'active' : 'inactive',
contentId: path,
});
}tiun.setContent({
type: 'active',
contentId: 'episode-42',
mediaType: 'audio',
});