Class HadawiCheckout

Browser-side Hadawi checkout controller.

Supports two presentation modes:

  • redirect — navigate the current tab to the hosted checkout (default)
  • popup — open in a new browser window (popups must be allowed by the browser)

Prefer HadawiCheckout.mountButton for the storefront CTA so shoppers always see official Hadawi branding (not a custom merchant button).

Modal / iframe embedding is not supported. ClickPay's hosted payment page responds with X-Frame-Options: deny, so payment cannot complete inside an iframe (including nested frames). Use redirect or popup instead.

Example: Branded button (recommended)

import { HadawiCheckout } from '@hadawi/sdk/browser';

const checkout = new HadawiCheckout({ mode: 'live' });
checkout.mountButton({
  container: '#hadawi-checkout',
  variant: 'primary',
  label: 'split',
  getIntentId: async () => {
    const res = await fetch('/api/create-contribution', { method: 'POST' });
    const data = await res.json();
    return data.intentId;
  },
  open: {
    mode: 'popup',
    onSuccess: () => { window.location.href = '/thank-you'; },
  },
});

Example: Imperative open

checkout.open(intentId, {
  mode: 'popup',
  onSuccess: ({ intentId }) => router.push('/thank-you'),
});

Constructors

constructor

Methods

mountButton open

Constructors

constructor

Methods

mountButton

open

  • open(intentId: string, options?: CheckoutOpenOptions): () => void

    Open the hosted Hadawi checkout for the given intent ID.

    Prefer HadawiCheckout.mountButton for the storefront CTA. Use open() when you already have an intent id and need imperative control.

    Parameters

    • intentId: string

      The intent ID returned by your server after calling POST /intents (or HadawiClient.intents.create()).

    • options: CheckoutOpenOptions = {}

      Presentation mode (redirect | popup), callbacks, and optional return URL.

    Returns () => void

    A close() function — only meaningful in popup mode.

Settings

Member Visibility

On This Page

Constructors
Methods