Build a Subscription App

This guide walks you through a complete subscription integration — from creating plans in the dashboard to gating content based on what the user has purchased. By the end, you'll have a working pricing page, authentication, and access control.

---

1. Create subscription products

In the tiun.business dashboard, go to Products and create two subscription products:

• Light — e.g. EUR 19/month

• Pro — e.g. EUR 199/month

For each, select Subscription as the pricing type, set the interval to monthly, and configure the fee. Optionally add a trial period. Save and copy both Product IDs.

For more on product configuration, see Products. For navigating the dashboard, see Managing Products.

---

2. Install and initialize the SDK

npm install @tiun/sdk

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

tiun.init({
  snippetId: 'YOUR_SNIPPET_ID',
  language: 'en', // set to your site's language
});

---

3. Build a pricing page

Create a button for each plan. Each one triggers tiun.checkout() with the corresponding product ID.

function onClickLight() {
  tiun.checkout({ productId: 'p-live-light' });
}

function onClickPro() {
  tiun.checkout({ productId: 'p-live-pro' });
}

When the user clicks, tiun opens the checkout overlay. It collects their email, handles authentication, processes payment, and grants access — all in one flow. There's no separate signup step.

---

4. Handle checkout success

After a successful purchase, userChange fires with event: 'checkout'. The user object includes their email and the productAccess array with the product they just bought.

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

---

5. Gate content based on access

Use the productAccess array to control what the user sees. This handler runs on every user state change — including page load, login, checkout, and logout.

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

  const hasProAccess = data.user.productAccess.includes('p-live-pro');
  const hasLightAccess = data.user.productAccess.includes('p-live-light');

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

For more on access patterns, see Access Model and Protecting Content.

---

6. Add login and logout

For returning users who want to access their account without going through checkout again, add login and logout buttons.

function onClickLogin() {
  tiun.login();
}

function onClickLogout() {
  tiun.logout();
}

tiun.login() opens a login overlay where the user enters their email and verifies via a phone OTP. After login, userChange fires with event: 'login' and the user's existing productAccess.

tiun.logout() clears the session. userChange fires with event: 'logout' and isAuthenticated: false.

For more on authentication, see Session Model.

---

7. Handle session restore

When a returning user loads your app, tiun restores their session automatically. userChange fires with event: 'init' and their full user state — including productAccess.

You don't need to do anything special for this. The same userChange handler from step 5 handles it. On first load, it fires with the restored state, and your UI updates accordingly.

For more on session persistence, see Subscriptions.

---

8. Go live

Production is the default environment — if you never set sandbox: true, you're already live.

If you've been testing in sandbox:

1. Remove sandbox: true from your SDK init (or just don't include it)

2. Use your production product IDs (prefixed with p-live-)

See Sandbox Setup and Test Flows for details on the sandbox environment.

---

Full example

Here's the complete integration in one place:

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

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

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

  showLogoutButton(data.user.email);

  const hasProAccess = data.user.productAccess.includes('p-live-pro');
  const hasLightAccess = data.user.productAccess.includes('p-live-light');

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

function checkoutLight() {
  tiun.checkout({ productId: 'p-live-light' });
}

function checkoutPro() {
  tiun.checkout({ productId: 'p-live-pro' });
}

function login() {
  tiun.login();
}

function logout() {
  tiun.logout();
}

---

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

If your backend needs to verify the user's identity before serving protected data, see Verify Subscriptions Server-side.