onReady - Overflow Documentation

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

type OverflowReadyEvent<T> = { elementType: T };

Example

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.

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

Last modified on July 17, 2026

Related topics

Checkout best practices Wallets Concepts Accept a payment Card reference