qariyb-button

A customizable button that opens the full checkout experience in a modal overlay. Perfect for CTAs that don't require a dedicated checkout page.

<qariyb-button event-id="01HWXYZ123ABC456">
  Get Tickets
</qariyb-button>

How It Works

User clicks the button
Modal overlay opens with full checkout
User completes purchase or closes modal
Modal closes, focus returns to button

Attributes

Required

Name
event-id
Type
string
Description
The event ULID from your Qariyb dashboard.

Optional

Name
theme
Type
'light' | 'dark' | 'flat' | 'minimal'
Description
Theme preset. Defaults to 'light'.
Name
accent-color
Type
string
Description
Primary color in hex format. Defaults to '#10b981'.
Name
size
Type
'sm' | 'md' | 'lg'
Description
Button size variant. Defaults to 'md'.

Callback Attributes

Name
on-ready
Type
function
Description
Called when button mounts. Receives { eventId }.
Name
on-modal-opened
Type
function
Description
Called when modal opens. Receives { eventId }.
Name
on-modal-closed
Type
function
Description
Called when modal closes. Receives { eventId, reason }.

Button Content (Slot)

Customize button text and content using the default slot:

<!-- Simple text -->
<qariyb-button event-id="01HW...">
  Reserve Your Spot
</qariyb-button>

<!-- With price -->
<qariyb-button event-id="01HW...">
  Get Tickets - From $25
</qariyb-button>

<!-- With custom HTML -->
<qariyb-button event-id="01HW...">
  <span style="display: flex; align-items: center; gap: 8px;">
    <svg width="20" height="20" viewBox="0 0 24 24"><!-- ticket icon --></svg>
    Reserve Now
  </span>
</qariyb-button>

If no content is provided, defaults to "Get Tickets".

Size Variants

<!-- Small -->
<qariyb-button event-id="01HW..." size="sm">Buy</qariyb-button>

<!-- Medium (default) -->
<qariyb-button event-id="01HW..." size="md">Get Tickets</qariyb-button>

<!-- Large -->
<qariyb-button event-id="01HW..." size="lg">Reserve Your Spot Now</qariyb-button>

Size dimensions:

sm: 8px/16px padding, 0.875rem font
md: 12px/24px padding, 1rem font
lg: 16px/32px padding, 1.125rem font

Events

qariyb:button:ready

Emitted when component mounts.

interface ButtonReadyDetail {
  eventId: string;
}

qariyb:button:modal-opened

Emitted when modal opens.

interface ButtonModalOpenedDetail {
  eventId: string;
}

button.addEventListener('qariyb:button:modal-opened', (e) => {
  analytics.track('checkout_modal_opened', {
    eventId: e.detail.data.eventId,
  });
});

qariyb:button:modal-closed

Emitted when modal closes.

interface ButtonModalClosedDetail {
  eventId: string;
  reason: 'success' | 'cancel' | 'escape' | 'overlay';
}

Reason	Description
`success`	Checkout completed successfully
`cancel`	User clicked close button
`escape`	User pressed Escape key
`overlay`	User clicked backdrop

button.addEventListener('qariyb:button:modal-closed', (e) => {
  const { eventId, reason } = e.detail.data;

  if (reason === 'success') {
    showSuccessMessage();
  } else {
    analytics.track('checkout_abandoned', { reason });
  }
});

Public Methods

open()

Programmatically open the modal:

const button = document.querySelector('qariyb-button');
button.open();

close()

Programmatically close the modal:

const button = document.querySelector('qariyb-button');
button.close();

Checkout Events

The internal checkout emits all standard checkout events. Listen on the document:

document.addEventListener('qariyb:checkout:success', (e) => {
  const { order, tickets } = e.detail.data;
  console.log('Purchase complete:', order.id);
});

Examples

Hero CTA

<section class="hero">
  <h1>Annual Conference 2025</h1>
  <p>Join 500+ professionals</p>

  <qariyb-button
    event-id="01HWXYZ123ABC456"
    size="lg"
    accent-color="#4f46e5"
  >
    Register Now - Early Bird Pricing
  </qariyb-button>
</section>

Sticky Footer

<style>
  .sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
  }
</style>

<div class="sticky-cta">
  <qariyb-button event-id="01HW..." size="lg">
    Get Tickets
  </qariyb-button>
</div>

Multiple Buttons (Same Event)

<!-- Hero -->
<qariyb-button event-id="01HW..." size="lg">Register Now</qariyb-button>

<!-- Sidebar -->
<qariyb-button event-id="01HW..." size="sm">Get Tickets</qariyb-button>

<!-- Footer -->
<qariyb-button event-id="01HW...">Don't Miss Out</qariyb-button>

With Analytics

<qariyb-button
  event-id="01HWXYZ123ABC456"
  on-modal-opened="trackModalOpen"
  on-modal-closed="trackModalClose"
>
  Get Tickets
</qariyb-button>

<script>
  function trackModalOpen(data) {
    gtag('event', 'begin_checkout', { event_id: data.eventId });
  }

  function trackModalClose(data) {
    if (data.reason === 'success') {
      gtag('event', 'purchase_complete');
    } else {
      gtag('event', 'checkout_abandoned', { reason: data.reason });
    }
  }
</script>

Styling

The button inherits from the primary color. Customize via:

Accent Color Attribute

<qariyb-button event-id="01HW..." accent-color="#dc2626">
  Hot Tickets
</qariyb-button>

Global Theme Variables

window.QariybConfig = {
  publishableKey: 'pk_live_...',
  variables: {
    colorPrimary: '#4f46e5',
    borderRadius: '9999px', // Fully rounded
    fontFamily: '"Poppins", sans-serif',
  },
};

Component Rules

window.QariybConfig = {
  publishableKey: 'pk_live_...',
  rules: {
    '.Button': {
      fontWeight: '700',
      textTransform: 'uppercase',
      letterSpacing: '0.05em',
    },
  },
};

Accessibility

The button component includes:

aria-haspopup="dialog" on trigger
aria-expanded state tracking
Focus trap within modal
Escape key closes modal
Focus returns to trigger on close

The modal:

Prevents body scroll when open
Renders to document.body (not Shadow DOM)
Includes backdrop blur effect
Supports click-outside to close
Centers checkout content

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>Event Tickets</title>
  <script>
    window.QariybConfig = {
      publishableKey: 'pk_live_...',
      theme: 'light',
      variables: {
        colorPrimary: '#7c3aed',
        borderRadius: '12px',
      },
    };
  </script>
  <script src="https://js.qariyb.com/v1/qariyb.js"></script>
</head>
<body>
  <header>
    <h1>Tech Conference 2025</h1>

    <qariyb-button
      event-id="01HWXYZ123ABC456"
      size="lg"
      on-modal-closed="handleModalClose"
    >
      Get Tickets - From $99
    </qariyb-button>
  </header>

  <script>
    function handleModalClose(data) {
      if (data.reason === 'success') {
        window.location.href = '/thank-you';
      }
    }

    document.addEventListener('qariyb:checkout:success', (e) => {
      console.log('Order completed:', e.detail.data.order.id);
    });
  </script>
</body>
</html>