# Halliday Payments SDK Widget

**Full documentation available here: (https://docs.halliday.xyz/pages/payments-sdk-docs)**

Halliday Payments SDK Widget - Embeddable payments widget for seamless onchain transactions. Deposit, buy, onramp, swap, pay.

- One time crypto deposits and withdrawals on any chain
- Fiat to crypto onramps to any address on any chain
- Seamless cross chain swap transactions

## Embedding inside your own modal

You can embed `<HallidayEmbed>` inside a modal you control (dialog, drawer, sheet) so the widget renders in
place instead of as a full-screen overlay. A few things to know:

### Recommended pattern: Provider outside, Embed inside

Render `<HallidayPaymentsProvider>` **outside** your modal and `<HallidayEmbed>` **inside** it:

```tsx
<HallidayPaymentsProvider apiKey="pk_live_...">
  {/* your app */}
  <MyModal open={open} onClose={() => setOpen(false)}>
    <HallidayEmbed />
  </MyModal>
</HallidayPaymentsProvider>
```

The widget iframe is created once and kept **warm** for the life of the Provider. Closing and reopening your
modal — even when it fully unmounts and remounts with fresh DOM nodes — re-shows the same iframe, correctly
positioned over the new mount point, with **no reload, no skeleton, and no blank frames**, and any in-flight
session state is preserved. Unmounting `<HallidayEmbed>` (closing your modal) hides the widget; it does not
destroy it.

> Putting the entire `<HallidayPaymentsProvider>` inside your modal also works, but it **reloads the whole
> widget on every open** (network fetch, fresh boot, lost session state). Prefer Provider-outside.

### Set `customStyles.zIndex` above your modal backdrop

The embed iframe defaults to `z-index: 1` and is fixed-positioned against `document.body`, so with a typical
modal backdrop (`z-index: 1000+`) it renders **behind** your modal and is invisible/unclickable. Raise the
widget's stacking level above your modal:

```tsx
<HallidayPaymentsProvider apiKey="pk_live_..." customStyles={{ zIndex: 2000 }}>
  ...
</HallidayPaymentsProvider>
```

### Known limitation: entrance/exit animations

Modal open/close **animations** (transform-driven container motion) are not tracked, so the widget may sit
briefly misaligned until the next scroll/resize tick. Prefer opening the widget after your modal's open
animation has settled.