> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# onReady

> Fires once when an element has mounted and is interactive.

`onReady` fires once when an element has finished mounting and is ready for shopper interaction. Use it to flip a loading skeleton off, focus an input, or kick off follow-up element creation.

## Payload

```typescript theme={null}
type OverflowReadyEvent<T> = { elementType: T };
```

## Example

```javascript theme={null}
overflow.card()
  .on('onReady', () => {
    document.querySelector('#card-skeleton').hidden = true;
  })
  .mount('#card');
```

## One-shot signal

`onReady` fires exactly once per element instance. It does not fire again after `update()`, remount, or theme changes. If you re-mount an element, subscribe again on the new handle.

Do not gate `mount()` on `onReady`; `mount()` is itself the trigger. Subscribe before calling `mount()` so the event is not missed.

## Wallet elements

For `applePay` and `googlePay`, `onReady` is deferred until the device-availability probe resolves. On an unavailable device, `onReady` never fires and `onChange` fires with `{ available: false, reason }` instead.

```javascript theme={null}
const applePay = overflow.applePay();

applePay.on('onChange', ({ available }) => {
  applePayBtn.hidden = !available;
});

applePay.on('onReady', () => {
  // Fires only on available devices, after the probe resolves.
});

applePay.mount('#apple-pay');
```

Use `onChange` (which fires regardless) when you need a signal that fires on every device, including unavailable ones.

## Do not do heavy work inside the handler

The element is mounted but the shopper is about to interact. Avoid blocking work; move analytics fires, network calls, and DOM mutations to a follow-up microtask if they are non-trivial.

## See also

* [`onChange`](/payment-elements/events/on-change)
* [Wallets guide](/payment-elements/guides/wallets)