# Event Listeners

An event is an important part of any operation. Web pages respond according to an event that has recently occurred. Some events are generated by users, and some are generated by API’s.

A Poynt Collect Event Listener is a procedure in JavaScript that waits for an event to occur. A simple example of an event is a user clicking the mouse or pressing a key on the keyboard.

Below are all the event listeners supported by Poynt Collect.

# Ready

This event listener is normally used to guarantee that Poynt Collect is ready and functional.

collect.on("ready", event => {
// handle ready event
});

# Nonce

This code will add an event listener for whenever you get a nonce.

interface NonceEvent {
  data: {
    nonce: string;
    zipCode?: string;
    firstName?: string;
    lastName?: string;
    emailAddress?: string;
    phone?: string;
    line1?: string;
    line2?: string;
    city?: string;
    territory?: string;
    countryCode?: string;
    shippingLine1?: string;
    shippingLine2?: string;
    shippingCity?: string;
    shippingTerritory?: string;
    shippingZip?: string;
  };
}

collect.on("nonce", event: NonceEvent => {
// handle nonce event
});

# Error

Placing this on your code will automatically add a listener to get notified of any errors on the form.

interface Error {
  message?: string;
  developerMessage?: string;
  code?: string;
  httpStatus?: number;
  requestId?: string;
  type?: "invalid_details" | "missing_fields";
  source?: "submit" | "field"; // if the inlineErrors flag was enabled in mount options, only the "submit" event will be triggered
  data?: Record<string, string>;
}

interface ErrorEvent {
  data: Error | { error: Error };
}

collect.on("error", event: ErrorEvent => {
// handle error event
});

# iFrame Height Change

This code will add an event listener to get notified about iFrame content height changes. This is useful if you want to dynamically change the iFrame height based on the content inside it.

interface IFrameHeightChangeEvent {
  data: {
    height: number;
  },
}

collect.on("iframe_height_change", event: IFrameHeightChangeEvent => {
// handle iframe height change event
});
Last Updated: 11/23/2023, 7:56:34 AM