Vanilla JavaScript integration

import {
  ConnectionIdSchema,
  IssueConnectionTokenResponseSchema,
  createDomain0Client,
  domain0,
} from 'domain0'

const DomainSessionSchema = IssueConnectionTokenResponseSchema.extend({
  connectionId: ConnectionIdSchema,
})

const button = document.querySelector('[data-connect-domain]')
const status = document.querySelector('[data-domain-status]')

button.addEventListener('click', async () => {
  button.disabled = true
  status.textContent = ''

  try {
    const response = await fetch('/api/domain-session', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ domain: button.dataset.domain }),
    })
    if (!response.ok) throw new Error('Could not start domain setup')

    const session = DomainSessionSchema.parse(await response.json())
    const client = createDomain0Client({
      baseUrl: '/api/domain0/',
      token: session.accessToken,
    })

    await domain0.connectDomain({
      client,
      connectionId: session.connectionId,
      applicationName: 'Your product',
      onSuccess: ({ connection }) => {
        status.textContent = `${connection.intent.domain} is connected`
      },
    })
  } catch (error) {
    status.textContent = error instanceof Error ? error.message : 'Domain setup failed'
  } finally {
    button.disabled = false
  }
})

<button type="button" data-connect-domain data-domain="customer.example">
  Connect domain
</button>
<p data-domain-status aria-live="polite"></p>