Cards & Wallets · PaySuite payment page · Customising the payment page · Skin JavaScript

Customising client-side validation

The Javascript validation code has been written so that the skin can alter the validation performed. Before the skin javascript is included on the page, the 'Hosted' object is updated with the details of the validation bindings.

Example Validation Bindings
Hosted.Cashier.validation = {
  "inputEventHandlers": {
      "pan": {
          "blur": {
              "regexCheck": Function(value, element, event),
              "luhnCheck": Function(value, element, event)
          },
          "keydown": {
              "merchantCustomCheck": Function(value, element, event)
          }
      }
      ...
  },
  "formValidation": {
      "standardFormValidationDisabled": true,
      "handlers": {
          "submit": Function(value, element, event)
      }
  },
  "showError": Function(fieldName, element),
  "hideError": Function(fieldName, element)
}

Only after the skin javascript has been included and executed, are these events actually bound to the elements on the page. This means the skin javascript can update the Hosted.Cashier.validation object to tweak the behaviour.

The skin could

Change triggering event for specific validation

JavaScript
Hosted.Cashier.validation.inputEventHandlers.pan["keydown"] = Hosted.Cashier.validation.inputEventHandlers.pan.blur;
delete Hosted.Cashier.validation.inputEventHandlers.pan.blur;

Change one of the existing handlers (e.g. regexCheck)

JavaScript
Hosted.Cashier.validation.inputEventHandlers.pan.blur.regexCheck = function (value, element, event) {
  // The new validation
}

Add additional handler for validation on the same event

JavaScript
Hosted.Cashier.validation.inputEventHandlers.pan.blur["additionalCustomCheck"] = function (value, element, event) {
  // The new validation
}

Add additional handler for validation on different event (e.g. keyup)

JavaScript
if (Hosted.Cashier.validation.inputEventHandlers.pan.hasOwnProperty("keyup")) {
  Hosted.Cashier.validation.inputEventHandlers.pan.keyup["additionalCustomCheck"] = function (value, element, event) {
      // The new validation
  };
} else {
  Hosted.Cashier.validation.inputEventHandlers.pan["keyup"] = {
      "additionalCustomCheck": function (value, element, event) {
          // The new validation
      }
  };
}

Disable pay now button (submit event) functionality and revert to standard browser form validation

JavaScript
Hosted.Cashier.validation.formValidation.standardFormValidationDisabled = false;

Change submit event handler

JavaScript
Hosted.Cashier.validation.formValidation.handlers.submit = function (value, element, event) {
  // New submit handler and form validation
}

Add new form event handler

JavaScript
Hosted.Cashier.validation.formValidation.handlers["change"] = {
  "additionalCustomCheck": function (value, element, event) {
      // The new validation
  }
};

Adjust error behaviours

JavaScript
Hosted.Cashier.validation.showError = function (fieldName, element) {
  // New functionality to show error
}

Hosted.Cashier.validation.hideError = function (fieldName, element) {
  // New functionality to hide error
}

Add validation to a new field, e.g. billing address postcode

main.js
Hosted.Cashier.validation.inputEventHandlers["billing-address-postcode"] = {
  "blur": {
      "regexCheck": function(value, element, event) {
          var regex = /^((GIR 0AA)|((([A-Z][0-9]{1,2})|(([A-Z][A-HJ-Y][0-9]{1,2})|(([A-Z][0-9][A-Z])|([A-Z][A-HJ-Y][0-9]?[A-Z])))) [0-9][A-Z]{2}))$/i;
          return regex.test(value);
      }
  }
};
messages.properties
validation.transaction.billing-address-postcode = Please enter a valid UK postcode