How to use widget events

Paydock has made it possible to construct a widget with an event. Events are actions or occurrences that happen in the system you are programming, this will enable you to respond to your users with any type of action. For example, if a user clicks a button on a webpage, you might want to respond to that action by displaying an information box.

Each event is represented by an object that is based on the interface and may have additional custom fields and/or functions to provide information about its purpose. The documentation for every event can be found here.

Below you can find the piece of code that describes the basic events:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
    iframe {
      border: 0;
      width: 100%;
      height: 300px;
<div id="widget"></div>
<script src="" ></script>
  var widget = new paydock.HtmlWidget('#widget', 'public_key', 'gateway_id');
  widget.on('afterLoad', function(data) {
  widget.on('submit', function(data) {
  });<br>  widget.on('validation', function(data) {
  widget.on('validationError', function(data) {
  widget.on('finish', function(data) {
  widget.on('metaChange', function(data) {
  widget.on('resize', function(data) {
  widget.on('systemError', function(data) {

Let's take a closer look at each presented event separately:

  • afterLoad - shows that the widget is loading.
  • submit - shows what happens after clicking the 'Submit' button. 
  • finish - shows a successful result after hitting 'Submit'. 
  • validation - checks the data validity in the inputs. It allows ensuring that the data is valid before submitting the form which, in its turn, allows avoiding gateway errors. In other words, this is an internal Paydock validation.
  • validationError - shows an unsuccessful result after hitting the 'Submit' button. It means that there was some gateway error. 
  • systemError - shows an error caused by some unpredictable situation. 
  • metaChange - allows tracking data values in inputs and saving them in your database.  
  • resize - similar to the .useAutoResize()method that helps adjust the widget size according to the number and size of fields.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us