PCI Proxy

Features
Pricing
Blog

PCI Proxy

Features
Pricing
Blog
Powered by GitBook
Have an account? Sign in

Events

Last updated 2 months ago
Edit on GitHub

Use the secureFields.on(...) callback function to subscribe to one or more of the ready, change, error or validate events.

on ready
on validate
on success
on change
on error

The ready event will be emitted once the iframes are loaded.

secureFields.on("ready", function() { 
 // setting a placholder for the cardNumber field
 secureFields.setPlaceholder("cardNumber", "Card number");
​
 // setting a placeholder for the CVV field
 secureFields.setPlaceholder("cvv", "CVV");
});

The validate event will be emitted once the form was submitted with secureFields.submit();

secureFields.on("validate", function(event) {
  // put a red border around the fields if they are not valid
  secureFields.setStyle("cardNumber.invalid","border: 1px solid #f00");
  secureFields.setStyle("cvv.invalid","border: 1px solid #f00");
});

Where the event callback object has the following structure:

{
  "fields": {
    "cardNumber": {
      "length": 0,
      "valid": false
    },
    "cvv": {
      "length": 3,
      "valid": true
    }
  },
  "hasErrors": true // indicates if one of the fields has valid=false
}

The success event will be emitted if the tokenization was successful.

secureFields.on("success", function(data) {
  if(data.transactionId) {
    // send data.transactionId and the
    // rest of the form to your server
  }
});

Where the event callback object has the following structure:

{
  "result":"success",
  "transactionId":"180403204621339015",
  "cardInfo":
  {
    "brand":"VISA DEBIT",
    "issuer":"Some Bank",
    "type":"debit", // debit or credit
    "distinction":"unknown", // consumer or corporate
    "country":"US"
  }
}

The change event will be emitted whenever one of the following events are getting triggered:

  • focus

  • blur

  • keyUp

  • keyDown

  • touchstart

  • touchmovetouchend

  • touchcancel

  • touchforcechange

secureFields.on("change", function(event) {
  // some fancy stuff
});

Where the event callback object has the following structure:

{
  "fields": {
    "cardNumber": {
      "length": 0,
      "valid": false
    },
    "cvv": {
      "length": 0,
      "valid": false
    }
  },
  "hasErrors": true,
  "event": {
    "field": "cardNumber",  // the affected input field
    "type": "blur"          // the original event
  }
}

The error event will be emitted if there was an error after calling secureFields.initTokenize(...). Possible scenarios are:

  • Wrong merchantId configured in secureFields.initTokenize(...);

  • Wrong name of card number, CVV fields

  • Wrong merchantId configuration on Datatrans side

Those errors should only occur during development/testing.

secureFields.on("error", function(data) {
  // something bad happened
});

​

Previous
Initialization and Styling
Next
Token API