skyflow-js 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
 All notable changes to this project will be documented in this file.
+## [1.7.0] - 2021-11-24
+### Added
+- `validations` option in `CollectElementInput` that takes an array of validation rules
+- `REGEX_MATCH_RULE`, `LENGTH_MATCH_RULE` & `ELEMENT_MATCH_RULE` Validation rules types
+- `PIN` Element type
+
+### Fixed
+- Card Number validation
+
+
 ## [1.6.0] - 2021-11-16
 
 ### Added

package/README.md

@@ -125,13 +125,14 @@ For `env` parameter, there are 2 accepted values in Skyflow.Env
 # Securely collecting data client-side
 -  [**Inserting data into the vault**](#inserting-data-into-the-vault)
 -  [**Using Skyflow Elements to collect data**](#using-skyflow-elements-to-collect-data)
+-  [**Using validations on Collect Elements**](#validations)
 -  [**Event Listener on Collect Elements**](#event-listener-on-collect-elements)
 ## Inserting data into the vault
 
 To insert data into the vault from the browser, use the `insert(records, options?)` method of the Skyflow client. The `records` parameter takes a JSON object of the records to be inserted in the below format. The `options` parameter takes a dictionary of optional parameters for the insertion. See below: 
 
 ```javascript
-var records = {
+const records = {
   "records": [
   	{
       table: "string", //table into which record should be inserted
@@ -144,7 +145,7 @@ var records = {
   ]
 }
 
-var options = {
+const options = {
   tokens: true  //indicates whether or not tokens should be returned for the inserted data. Defaults to 'true'  
 }
 
@@ -199,7 +200,7 @@ const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
 A Skyflow collect Element is defined as shown below: 
 
 ```javascript
-var collectElement =  {
+const collectElement =  {
    table: "string",             //optional, the table this data belongs to
    column: "string",            //optional, the column into which this data should be inserted
    type: Skyflow.ElementType,   //Skyflow.ElementType enum
@@ -209,6 +210,7 @@ var collectElement =  {
    label: "string",             //optional label for the form element
    placeholder: "string",       //optional placeholder for the form element
    altText: "string"            //optional string that acts as an initial value for the collect element
+   validations:[]               // optional array of validation rules
 }
 ```
 The `table` and `column` fields indicate which table and column in the vault the Element corresponds to. **Note**: 
@@ -278,13 +280,14 @@ Finally, the `type` field takes a Skyflow ElementType. Each type applies the app
 - `EXPIRATION_DATE`
 - `CVV`
 - `INPUT_FIELD`
+- `PIN`
 
-The `INPUT_FIELD` type is a custom UI element without any built-in validations.
+The `INPUT_FIELD` type is a custom UI element without any built-in validations.  See the section on [validations](#validations) for more information on validations.
 
 Once the Element object has been defined, add it to the container using the `create(element, options)` method as shown below. The `element` param takes a Skyflow Element object as defined above and the `options` parameter takes a dictionary of optional parameters as described below: 
 
 ```javascript
-var collectElement =  {
+const collectElement =  {
    table: "string",             //the table this data belongs to
    column: "string",            //the column into which this data should be inserted
    type: Skyflow.ElementType,   //Skyflow.ElementType enum
@@ -294,9 +297,10 @@ var collectElement =  {
    label: "string",             //optional label for the form element
    placeholder: "string",       //optional placeholder for the form element
    altText: "string"            //optional string that acts as an initial value for the collect element
+   validations:[]               // optional array of validation rules
 }
 
-var options = {
+const options = {
   required: false,  //indicates whether the field is marked as required. Defaults to 'false'
   enableCardIcon: true // indicates whether card icon should be enabled (only for CARD_NUMBER type Element)
 }
@@ -339,7 +343,7 @@ When the form is ready to be submitted, call the `collect(options?)` method on t
 - `additionalFields`: Non-PCI elements data to be inserted into the vault which should be in the `records` object format as described in the above [Inserting data into vault](#inserting-data-into-the-vault) section.
 
 ```javascript
-var options = {
+const options = {
   tokens: true  //optional, indicates whether tokens for the collected data should be returned. Defaults to 'true'
   additionalFields: {  
     records: [
@@ -428,7 +432,126 @@ container.collect({
 }
 ```
 
+### Validations
 
+Skyflow-JS provides two types of validations on Collect Elements
+
+#### 1. Default Validations:
+Every Collect Element except of type `INPUT_FIELD` has a set of default validations listed below:
+- `CARD_NUMBER`: Card number validation with checkSum algorithm(Luhn algorithm), available card lengths for defined card types
+- `CARD_HOLDER_NAME`: Name should be 2 or more symbols, valid characters should match pattern -  `^([a-zA-Z\\ \\,\\.\\-\\']{2,})$`
+- `CVV`: Card CVV can have 3-4 digits
+- `EXPIRATION_DATE`: Any date starting from current month. By default valid expiration date should be in short year format - `MM/YYYY`
+- `PIN`: Can have 4-12 digits
+
+#### 2. Custom Validations:
+Custom validations can be added to any element which will be checked after the default validations have passed. The following Custom validation rules are currently supported:
+- `REGEX_MATCH_RULE`: You can use this rule to specify any Regular Expression to be matched with the input field value
+
+```javascript
+const regexMatchRule = {
+  type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+  params: {
+    regex: RegExp,
+    error: string // optional, default error is "VALIDATION FAILED"
+  }
+}
+```
+
+- `LENGTH_MATCH_RULE`: You can use this rule to set the minimum and maximum permissible length of the input field value
+
+```javascript
+const lengthMatchRule = {
+  type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+  params: {
+    min : number, // optional
+    max : number, // optional 
+    error: string // optional, default error is "VALIDATION FAILED"
+  }
+}
+```
+
+- `ELEMENT_VALUE_MATCH_RULE`: You can use this rule to match the value of one element with another element
+
+```javascript
+const elementValueMatchRule = {
+  type: Skyflow.ValidationRuleType.ELEMENT_VALUE_MATCH_RULE,
+  params: {
+    element: CollectElement,
+    error: string // optional, default error is "VALIDATION FAILED"
+  }
+}
+```
+
+The Sample code snippet for using custom validations:
+
+```javascript
+/*
+  A simple example that illustrates custom validations.
+  Adding REGEX_MATCH_RULE , LENGTH_MATCH_RULE to collect element.
+*/
+
+// this rule allows 1 or more alphabets
+const alphabetsOnlyRegexRule = {
+  type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+  params:{
+    regex: /^[A-Za-z]+$/,
+    error: "Only alphabets are allowed"
+  }
+}; 
+
+// this rule allows input length between 4 and 6 characters
+const lengthRule = {
+  type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+  params:{
+    min: 4,
+    max: 6,
+    error: "Must be between 4 and 6 alphabets"
+  }
+}; 
+
+ const cardHolderNameElement = collectContainer.create({
+      table: "pii_fields",
+      column: "first_name",
+      ...collectStylesOptions,
+      label: "Card Holder Name",
+      placeholder: "cardholder name",
+      type: Skyflow.ElementType.INPUT_FIELD,
+      validations: [alphabetsOnlyRegexRule, lengthRule]
+    });
+
+/*
+  Reset PIN - A simple example that illustrates custom validations.
+  The below code shows an example of ELEMENT_VALUE_MATCH_RULE
+*/
+
+// for the PIN element
+const pinElement = collectContainer.create({
+  label: "PIN",
+  placeholder: "****",
+  type: Skyflow.ElementType.PIN,
+});
+
+// this rule allows to match the value with pinElement
+let elementMatchRule = {
+  type: Skyflow.ValidationRuleType.ELEMENT_VALUE_MATCH_RULE,
+  params:{
+    element: pinElement,
+    error: "PIN doesn't match"
+  }
+}
+const confirmPinElement = collectContainer.create({
+  label: "Confirm PIN",
+  placeholder: "****",
+  type: Skyflow.ElementType.PIN,
+  validations: [elementMatchRule]
+});
+
+// mount elements on screen - errors will be shown if any of the validaitons fail
+pinElement.mount("#collectPIN");
+confirmPinElement.mount("#collectConfirmPIN");
+
+```
 ### Event Listener on Collect Elements
 
 
@@ -533,7 +656,7 @@ For non-PCI use-cases, retrieving data from the vault and revealing it in the br
     For retrieving using tokens, use the `detokenize(records)` method. The records parameter takes a JSON object that contains `records` to be fetched as shown below.
 
 ```javascript
-var records = {
+const records = {
   "records": [
       {
         token: "string",                    // token for the record to be fetched