Skip to content

PayLink Events

Event Handling

The PayLink object uses an event emitter to handle various events. You can subscribe to these events using the on method and unsubscribe using the off method of the PayLink class instance.

Subscribing to Events

//The window.PayLink.on('event-name', callback) call will add a listener for the specified event (if it does not already exist in the events object) and then add the given callback to the event listener.
window.PayLink.on('event-name', callback);

Unsubscribing from Events

//The window.PayLink.off('event-name', callback) will remove the given callback from the specified event listener. 
window.PayLink.off('event-name', callback);

Events

  • "loaded": Indicates that the frame's data has been loaded.
  • "success": Indicates that the application has deployed and is ready to work.
  • "error": Indicates that an error occurred during the execution of the operation.
// Example events object organization where callbacks have been added to event listeners
/*
{
"loaded": [callback1, callback2, ...],
"success": [callback1, callback2, ...],
"error": [callback1, callback2, ...]
}
*/

Example

Here is an example of how to use the PayLink object to create a payment, start a payment, and handle events.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Payment Link Example</title>
  <script async type="module" src="${baseUrl}/payment-link-v1.js"></script>
</head>
<body>
<script>
  document.addEventListener("DOMContentLoaded", function() {

    PayLink.on("loaded", () => {
      console.log("Payment iframe loaded");
    });

    PayLink.on("error", (error) => {
      console.error("Payment error:", error);
    });

    const createPaymentParams = {
      containerId: "element_id",
      token: "****",
    };

    PayLink.CreatePayment(createPaymentParams);

  });
</script>
</body>
</html>