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

Customising form entry behaviour

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

JavaScript

Hosted.Cashier.formEntry = {
  "numericOnlyRestriction": {
      "fieldNames": ["pan", "valid-from-month", "valid-from-year", "expiry-month", "expiry-year", "issue-number", "csc", "amount"],
      "handlers": {
          "keypress": {
              "restrictKeyboardInput": Function(value, element, event)
          }
      }
  },
  "cardNumberFormatting": {
      "fieldNames": ["pan"],
      "handlers": {
          "keypress": {
              "formatCardNumber": Function(value, element, event)
          },
          "keydown": {
              "reformatCardNumberOnBackspace": Function(value, element, event)
          },
          "paste":{
              "formatCardNumber": Function(value, element, event)
          },
          "cut": {
              "formatCardNumber": Function(value, element, event)
          }
      },
      "scheme": "DEFAULT",
      "cardBrand": Hosted.Cashier.cardBrands["DEFAULT"],
      "identifyBrand": Function(value),
      "formatSpacing": Function(value)
  },
  "additionalFeatures": {},
  "formHandlers": {
      "handlers": {
          "submit": Function(value, element, event)
      }
  }
};

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.formEntry object to tweak the behaviour.

The skin could

Apply the numeric-only input restriction to another field

JavaScript

Hosted.Cashier.formEntry.numericOnlyRestriction.fieldNames.push("field-name"); // the field needs to have the class 'field-name-value'

Change triggering event for numeric-only input restriction (e.g. to keydown) Note: current implementation might not work for a different event.

JavaScript

Hosted.Cashier.formEntry.numericOnlyRestriction.handlers["keydown"] = Hosted.Cashier.formEntry.numericOnlyRestriction.handlers.keypress;
delete Hosted.Cashier.formEntry.numericOnlyRestriction.handlers.keypress;

Overwrite current implementation of numeric-only input restriction

JavaScript

Hosted.Cashier.formEntry.numericOnlyRestriction.handlers.keypress = function (value, element, event) {
  // The new implementation
}

Add additional functionality for numeric-only input restriction

JavaScript

if (Hosted.Cashier.formEntry.numericOnlyRestriction.handlers.hasOwnProperty("keydown")) {
  Hosted.Cashier.formEntry.numericOnlyRestriction.handlers.keydown["additionalNumericOnlyFeature"] = function (value, element, event) {
      // The new feature implementation
  };
} else {
  Hosted.Cashier.formEntry.numericOnlyRestriction.handlers["keydown"] = {
      "additionalNumericOnlyFeature": function (value, element, event) {
          // The new feature implementation
      }
  };
}

Add addition behaviour to any form field

JavaScript

Hosted.Cashier.formEntry.additionalFeatures["customNewFeature"] = {
  "fieldNames": ["expiry-month", "expiry-year", "valid-from-month", "valid-from-year"],
  "handlers": {
      "focus": {
          "highlightFields": Function (value, element, event),
          "showDateSelectorDialog": Function (value, element, event)
      },
      "change": {
          "computeAndShowTimeUntilCardExpires": Function (value, element, event)
      }
  }
}