Event Listeners

You can subscribe to Events in different ways depending on how your application works:

• If the FatZebra class is instantiated as a singleton service, meaning it is created once and shared across the entire application, it is recommended to use the on method. This ensures the event listener remains active as long as the target object, such as window or a DOM element, exists.
  • If your application instantiates the FatZebra class as a singleton service (i.e. it is created once and shared across the entire application), it is recommended to use the on method. This ensures the event listener remains active as long as the target object, such as window or a DOM element, exists.
    • Note that if a component using the listener is unmounted, the listener will not automatically detach unless you explicitly call off to remove it, which helps prevent memory leaks caused by lingering listeners.
  • If your application instantiates the FatZebra class each time the page renders or the method to create the class is called, it is better to use the onOnce method. This approach ensures the listener automatically unsubscribes itself after receiving the event, preventing unnecessary listeners from remaining active and avoiding potential duplicate events from arising.

Subscribing to an event for lifecycle of window

const fz = new FatZebra({
  username: "MerchantXYZ"
});

// Handle errors related to general errors. For example, client-side validations.
fz.on('fz.validation.error', function(event) {
  // ...
});

// Handle errors related to payment processing. HPP only.
fz.on('fz.payment.error', function(event) {
  // prompt error to customer
  console.log('payment errors: ' + JSON.stringify(event.detail.errors));
});

// Handle successful payment processing. HPP only.
fz.on('fz.payment.success', function(event) {
  console.log('payment data: ' + JSON.stringify(event.detail.data));
});

Unsubscribing from an event

const fz = new FatZebra({
  username: "MerchantXYZ"
});

// Remove event listener HPP only.
fz.off('fz.payment.success');

Subscribing to onOnce event

const fz = new FatZebra({
  username: "MerchantXYZ"
});

// Handle successful payment processing. HPP only. Discard the listener once event has been received
fz.onOnce('fz.payment.success', function(event) {
  console.log('payment data: ' + JSON.stringify(event.detail.data));
});