Vanilla JS

The tiun SDK can be loaded directly in a browser using a module script tag — no build tools needed. Import from unpkg (or any CDN that serves the package).

---

Initialize

Load the SDK as an ES module and call init().

<script type="module">
  import { tiun } from 'https://unpkg.com/@tiun/sdk/tiun.js';

  tiun.init({
    snippetId: 'YOUR_SNIPPET_ID',
    language: 'en', // 'en' | 'de' | 'fr'
  });
</script>

---

Checkout

Attach checkout to a button click.

<button id="btn-checkout">Subscribe</button>

<script type="module">
  import { tiun } from 'https://unpkg.com/@tiun/sdk/tiun.js';

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

  document.getElementById('btn-checkout').onclick = () => {
    tiun.checkout({ productId: 'YOUR_PRODUCT_ID' });
  };
</script>

---

Listen for user changes

Update the page when authentication or access changes.

<div id="status">Not logged in</div>

<script type="module">
  import { tiun } from 'https://unpkg.com/@tiun/sdk/tiun.js';

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

  tiun.on('userChange', (data) => {
    const el = document.getElementById('status');

    if (data.isAuthenticated) {
      el.textContent = 'Logged in as ' + data.user.email;
    } else {
      el.textContent = 'Not logged in';
    }
  });
</script>

---

Login and logout

<button id="btn-login">Log in</button>
<button id="btn-logout">Log out</button>

<script type="module">
  import { tiun } from 'https://unpkg.com/@tiun/sdk/tiun.js';

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

  document.getElementById('btn-login').onclick = () => {
    tiun.login();
  };

  document.getElementById('btn-logout').onclick = () => {
    tiun.logout();
  };
</script>

---

Gate content

Show or hide elements based on productAccess.

<div id="premium" style="display:none">Premium content here</div>
<div id="upgrade">
  <p>Subscribe to access premium content.</p>
  <button id="btn-upgrade">Upgrade</button>
</div>

<script type="module">
  import { tiun } from 'https://unpkg.com/@tiun/sdk/tiun.js';

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

  document.getElementById('btn-upgrade').onclick = () => {
    tiun.checkout({ productId: 'YOUR_PRODUCT_ID' });
  };

  tiun.on('userChange', (data) => {
    const hasAccess = data.isAuthenticated &&
      data.user.productAccess.includes('YOUR_PRODUCT_ID');

    document.getElementById('premium').style.display = hasAccess ? 'block' : 'none';
    document.getElementById('upgrade').style.display = hasAccess ? 'none' : 'block';
  });
</script>

---

Read properties

Check SDK state at any point using properties.

<button id="btn-status">Show status</button>
<pre id="output"></pre>

<script type="module">
  import { tiun } from 'https://unpkg.com/@tiun/sdk/tiun.js';

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

  document.getElementById('btn-status').onclick = () => {
    const output = document.getElementById('output');
    output.textContent = JSON.stringify({
      version: tiun.version,
      isReady: tiun.isReady,
      isAuthenticated: tiun.isAuthenticated,
      user: tiun.user
    }, null, 2);
  };
</script>

---

Paywall events (time-based)

For time-based billing, use paywall events to show or hide content.

<div id="paywall">
  <h2>Premium content</h2>
  <button id="btn-access">Get access</button>
</div>
<div id="content" style="display:none">Your premium content</div>

<script type="module">
  import { tiun } from 'https://unpkg.com/@tiun/sdk/tiun.js';

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

  document.getElementById('btn-access').onclick = () => {
    tiun.start();
  };

  tiun.on('paywallHide', () => {
    document.getElementById('paywall').style.display = 'none';
    document.getElementById('content').style.display = 'block';
  });

  tiun.on('paywallShow', () => {
    document.getElementById('paywall').style.display = 'block';
    document.getElementById('content').style.display = 'none';
  });
</script>