Skip to content

Quickstart Widget

Opción A: integración manual (recomendada)

html
<div id="bt-widget"></div>
<button id="pay-btn" type="button" disabled>Continuar al pago</button>

<script src="https://widget.bticketing.com/v1/widget.iife.js"></script>
<script>
  const instance = BeTickets.init({
    container: '#bt-widget',
    channelSlug: 'teatro-calderon',
    sessionId: 83,
    apiKey: 'wk_xxxx',
    apiBaseUrl: 'https://api.bticketing.com/api',
    onOrderUpdate: (order) => {
      const hasItems = (order?.items?.length ?? 0) > 0 ||
        (order?.events ?? []).some((ev) => (ev.sessions ?? []).some((s) => (s.items ?? []).length > 0));
      document.getElementById('pay-btn').disabled = !hasItems;
    }
  });

  document.getElementById('pay-btn').addEventListener('click', () => {
    instance.startCheckout();
  });
</script>

Opción B: loader con data-*

html
<div
  data-bt-widget
  data-channel-slug="teatro-calderon"
  data-session-id="83"
  data-api-key="wk_xxxx"
  data-lang="es"
  data-api-url="https://api.bticketing.com/api"
></div>

<script src="https://widget.bticketing.com/v1/loader.js"></script>