# Examples

URL: https://supapulse.app/docs/core/examples

Ready-to-use @supapulse/core snippets for plain HTML, React without the React package, Vue and checkout attribution.

## Plain HTML [#plain-html]

```html
<!doctype html>
<html lang="en">
  <head>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/@supapulse/core@1/dist/browser.js"
      data-token="YOUR_PUBLIC_TOKEN"
    ></script>
  </head>
  <body>
    <button id="cta">Start free trial</button>
    <script>
      document.getElementById('cta').addEventListener('click', function () {
        window.supapulse && window.supapulse.event('cta_click', { location: 'hero' });
      });
    </script>
  </body>
</html>
```

## React without @supapulse/react [#react-without-supapulsereact]

```tsx
import { Supapulse } from '@supapulse/core';
import { useEffect } from 'react';

const supapulse = new Supapulse();

export function App() {
  useEffect(() => {
    supapulse.init({ apiToken: import.meta.env.VITE_SUPAPULSE_TOKEN });
  }, []);

  return <button onClick={() => supapulse.event('cta_click')}>Start</button>;
}
```

`init()` ignores repeat calls, so React's double-run of effects in development is harmless.

## Vue 3 [#vue-3]

```ts title="src/composables/useAnalytics.ts"
import { Supapulse } from '@supapulse/core';

const supapulse = new Supapulse();
let started = false;

export function useAnalytics() {
  if (!started && typeof window !== 'undefined') {
    supapulse.init({ apiToken: import.meta.env.VITE_SUPAPULSE_TOKEN });
    started = true;
  }
  return {
    event: (name: string, data?: Record<string, unknown>) => supapulse.event(name, data),
    sessionId: () => supapulse.getSessionId(),
  };
}
```

## Passing the session ID to checkout [#passing-the-session-id-to-checkout]

```ts title="checkout-button.ts"
document.getElementById('buy')!.addEventListener('click', async () => {
  const response = await fetch('/api/checkout', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ sessionId: supapulse.getSessionId() }),
  });
  const { url } = await response.json();
  location.href = url;
});
```

```ts title="server: create the checkout"
// Stripe Checkout as an example. Store the session ID in metadata so the webhook gets it back.
const session = await stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: [{ price: priceId, quantity: 1 }],
  success_url: 'https://acme.com/thanks',
  metadata: { supapulse_session_id: sessionId },
});
```

The webhook side is in the [Stripe guide](https://supapulse.app/docs/guides/stripe).