Monetize with subscriptions

This guide walks through wiring up a subscription product — pricing buttons, checkout, and gating content based on what the user has purchased. Login and logout are not covered here; see authenticating your user for those.

---

1. Create subscription products

Create one product per plan in the dashboard. The full walkthrough is in creating your first product — repeat it for each plan (for example, Light and Pro) and copy the product IDs.

---

2. Install and initialize the SDK

Install @tiun/sdk and call tiun.init once at app startup. The Quickstart has the full install commands.

import { tiun } from '@tiun/sdk';

tiun.init({
  snippetId: 'YOUR_SNIPPET_ID',
  language: 'en',
});

---

3. Build a pricing page

Keep product IDs in one place so checkout buttons, gating logic, and analytics all reference the same source. The JS will throw on typos instead of failing silently.

const TIUN_PRODUCTS = {
  light: 'p-live-light',
  pro: 'p-live-pro',
};

Wire one button per plan, each calling tiun.checkout() with the matching product ID:

function onClickLight() {
  tiun.checkout({ productId: TIUN_PRODUCTS.light });
}

function onClickPro() {
  tiun.checkout({ productId: TIUN_PRODUCTS.pro });
}

When the user clicks, tiun opens the checkout overlay — it collects their email, handles identity verification, processes payment, and grants access in one flow. For what the overlay does behind the scenes, see Checkout / How it works in Reference.

---

4. Handle checkout success

After a successful purchase, userChange fires with event: 'checkout'. The user object includes their email and a productAccess array containing the product they just bought. productAccess is the canonical source of truth for what the user can access — see Product access in Reference for how it's populated and updated.

tiun.on('userChange', (data) => {
  if (data.event === 'checkout' && data.user) {
    console.log('Subscribed to:', data.user.productAccess);
  }
});

For the journey from checkout through renewal and expiration, see Subscriptions in Reference.

---

5. Gate content based on access

Use the productAccess array to decide what to show. The same userChange handler covers checkout success, login, logout, and the initial session restore on page load — so your gates stay in sync without extra work.

tiun.on('userChange', (data) => {
  if (!data.isAuthenticated) {
    showPricingPage();
    return;
  }

  const hasProAccess = data.user.productAccess.includes(TIUN_PRODUCTS.pro);
  const hasLightAccess = data.user.productAccess.includes(TIUN_PRODUCTS.light);

  if (hasProAccess) {
    showProContent();
  } else if (hasLightAccess) {
    showLightContent();
  } else {
    showUpgradePrompt();
  }
});

---

6. Add login and logout

Returning users can sign in without going through checkout again. The setup is covered in authenticating your user — once that's wired up, your subscribers can log back in and the same userChange handler picks up their existing productAccess.

---

7. Go live

If you've been testing in sandbox, set up live as a separate environment in the dashboard, then for production traffic:

1. Remove sandbox: true from your tiun.init (or set it to false).

2. Use your live snippet ID and live product IDs (prefixed p-live-).

3. If you verify server-side, switch to the live API base URL and a live API key.

See setting up your environment for the full sandbox / live workflow.

---

Full example

The subscription-specific integration in one place (login / logout wiring lives in the Auth guide):

import { tiun } from '@tiun/sdk';

const TIUN_PRODUCTS = {
  light: 'p-live-light',
  pro: 'p-live-pro',
};

tiun.on('userChange', (data) => {
  if (!data.isAuthenticated) {
    showPricingPage();
    return;
  }

  const hasProAccess = data.user.productAccess.includes(TIUN_PRODUCTS.pro);
  const hasLightAccess = data.user.productAccess.includes(TIUN_PRODUCTS.light);

  if (hasProAccess) {
    showProContent();
  } else if (hasLightAccess) {
    showLightContent();
  } else {
    showUpgradePrompt();
  }
});

tiun.init({
  snippetId: 'YOUR_SNIPPET_ID',
  language: 'en',
});

function checkoutLight() {
  tiun.checkout({ productId: TIUN_PRODUCTS.light });
}

function checkoutPro() {
  tiun.checkout({ productId: TIUN_PRODUCTS.pro });
}

---

For framework-specific implementations, see React, Vue, and Nuxt in the SDK reference.

If your backend needs to verify the user's subscription before serving protected data, see server-side subscription verification.