skyflow-js 1.29.1 → 1.29.3

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.29.1] - 2023-06-22
+### Fixed
+- Patch fix for autofill and iframe loading issue
+
+## [1.29.0] - 2023-06-22
+### Added
+- Added new `delete` interface
+- Added input formatting for collect and reveal elements
+    
 ## [1.28.0] - 2023-03-29
 ### Added
 -  Update data through collect element using skyflow id

package/README.md

@@ -13,6 +13,7 @@ Skyflow’s JavaScript SDK can be used to securely collect, tokenize, and reveal
 - [**Securely collecting data client-side**](#Securely-collecting-data-client-side)
 - [**Securely collecting data client-side using Composable Elements**](#Securely-collecting-data-client-side-using-Composable-Elements)
 - [**Securely revealing data client-side**](#Securely-revealing-data-client-side)
+- [**Securely deleting data cleint-side**](#Securely-deleting-data-client-side)
 
 ---
 
@@ -320,31 +321,62 @@ Along with CollectElement we can define other options which takes a object of op
 ```javascript
 const options = {
   required: false,      // Optional, indicates whether the field is marked as required. Defaults to 'false'.
-  enableCardIcon: true, // Optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType).
-  format: String,       // Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType).
-  enableCopy: false,    // Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false').
+  enableCardIcon: true, // Optional, indicates whether a card icon should be enabled (only applicable for CARD_NUMBER ElementType).
+  enableCopy: false,    // Optional, enables the copy icon to collect elements to copy text to clipboard. Defaults to 'false').
+  format: String,       // Optional, format for the element 
+  translation: {}      // Optional, indicates the allowed data type value for format. 
 };
 ```
 
-`required` parameter indicates whether the field is marked as required or not. If not provided, it defaults to false
+`required`: Indicates whether the field is marked as required or not. If not provided, it defaults to false.
 
-`enableCardIcon` parameter indicates whether the icon is visible for the CARD_NUMBER element, defaults to true
+`enableCardIcon` : Indicates whether the icon is visible for the CARD_NUMBER element. Defaults to true.
 
-`format` parameter takes string value and indicates the format pattern applicable to the element type, It's currently only applicable to `EXPIRATION_DATE` and `EXPIRATION_YEAR` element types.
+`enableCopy` : Indicates whether the copy icon is visible in collect and reveal elements.
 
-`enableCopy` parameter indicates whether the copy icon is visible in collect and reveal elements.
+`format`: A string value that indicates the format pattern applicable to the element type.
+Only applicable to EXPIRATION_DATE, CARD_NUMBER, EXPIRATION_YEAR, and INPUT_FIELD elements.
+  - For INPUT_FIELD elements,
+    - the length of `format` determines the expected length of the user input.
+    - if `translation` isn't specified, the `format` value is considered a string literal.
 
-The values that are accepted for `EXPIRATION_DATE` are
-  - `MM/YY` (default)
-  - `MM/YYYY`
-  - `YY/MM`
-  - `YYYY/MM`
+`translation`: An object of key value pairs, where the key is a character that appears in `format` and the value is a simple regex pattern of acceptable inputs for that character. Each key can only appear once. Only applicable for INPUT_FIELD elements.
 
-The values that are accepted for `EXPIRATION_YEAR` are
-  - `YY` (default)
-  - `YYYY`
+Accepted values by element type:
 
-`NOTE`: If not specified or invalid value is passed to the `format` then it takes default value.
+| Element type    | `format`and `translation` values                                                                                                                                                             | Examples                                                                                                                                   |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| EXPIRATION_DATE | <li>`format`</li> <ul><li>`mm/yy` (default)</li><li>`mm/yyyy`</li><li>`yy/mm`</li><li>`yyyy/mm`</li></ul>                                                                                    | <ul><li>12/27</li><li>12/2027</li> <li>27/12</li> <li> 2027/12</li></ul></ul>                                                              |
+| EXPIRATION_YEAR | <li>`format`</li> <ul><li>`yy` (default)</li><li>`yyyy`</li></ul>                                                                                                                            | <ul><li>27</li><li>2027</li></ul>                                                                                                          |
+| CARD_NUMBER     | <li>`format`</li> <ul><li>`XXXX XXXX XXXX XXXX` (default)</li><li>`XXXX-XXXX-XXXX-XXXX`</li></ul>                                                                                            | <ul><li>1234 5678 9012 3456</li><li>1234-5678-9012-3456</li></ul>                                                                          |
+| INPUT_FIELD     | <li>`format`: A string that matches the desired output, with placeholder characters of your choice.</li><li>`translation`: An object of key/value pairs. Defaults to `{"X": "[0-9]"}`</li>   | With a `format` of `+91 XXXX-XX-XXXX` and a `translation` of `[ "X": "[0-9]"]`, user input of "1234121234" displays as "+91 1234-12-1234". |
+
+**Collect Element Options examples for INPUT_FIELD**
+Example 1
+```js
+const options = {
+  required: true, 
+  enableCardIcon: true,
+  format:'+91 XXXX-XX-XXXX',
+  translation: { 'X': '[0-9]' } 
+}
+```
+
+User input: "1234121234"
+Value displayed in INPUT_FIELD: "+91 1234-12-1234"
+
+Example 2
+```js
+const options = {
+  required: true, 
+  enableCardIcon: true,
+  format: 'AY XX-XXX-XXXX',
+  translation: { 'X': '[0-9]',  'Y': '[A-Z]' } 
+}
+```
+
+User input: "B1234121234"
+Value displayed in INPUT_FIELD: "AB 12-341-2123"
 
 Once the Element object and options 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 and options as defined above:
 
@@ -365,8 +397,9 @@ const collectElement = {
 const options = {
   required: false,      // Optional, indicates whether the field is marked as required. Defaults to 'false'.
   enableCardIcon: true, // Optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType).
-  format: String,       // Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType).
   enableCopy: false,    // Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false').
+  format: String,       // Optional, format for the element
+  translation: {},      // Optional, indicates the allowed data type value for format.
 };
 
 const element = container.create(collectElement, options);
@@ -637,8 +670,9 @@ const collectElement = {
 const options = {
  required: false,             // Optional, indicates whether the field is marked as required. Defaults to 'false'.
  enableCardIcon: true,        // Optional, indicates whether  the element needs a card icon (only applicable for CARD_NUMBER ElementType).
- format: String,              // Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType).
  enableCopy: false,           // Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false').
+ format: String,              // Optional, format for the element
+ translation: {},             // Optional, indicates the allowed data type value for format.
 };
 const element = container.create(collectElement, options);
 ```
@@ -1949,6 +1983,54 @@ errorTextStyles: {
 },
 ```
 
+Along with RevealElementInput, you can define other options in the RevealElementOptions object as described below: 
+```js
+const options = {
+  enableCopy: false,    // Optional, enables the copy icon to reveal elements to copy text to clipboard. Defaults to 'false').
+ format: String,        // Optional, format for the element 
+ translation: {}        // Optional, indicates the allowed data type value for format. 
+}
+```
+
+`format`: A string value that indicates how the reveal element should display the value, including placeholder characters that map to keys `translation` If `translation` isn't specified to any character in the `format` value is considered as a string literal.
+
+`translation`: An object of key value pairs, where the key is a character that appears in `format` and the value is a simple regex pattern of acceptable inputs for that character. Each key can only appear once. Defaults to `{ ‘X’: ‘[0-9]’ }`.
+
+**Reveal Element Options examples:**
+Example 1
+```js
+const revealElementInput = {
+ token: '<token>' 
+};
+
+const options = {
+  format: '(XXX) XXX-XXXX',
+  translation: { 'X': '[0-9]'} 
+};
+
+const revealElement = revealContainer.create(revealElementInput,options);
+```
+
+Value from vault: "1234121234"
+Revealed Value displayed in element: "(123) 412-1234"
+
+Example 2:
+```js
+const revealElementInput = {
+ token: '<token>' 
+};
+
+const options = {
+  format: 'XXXX-XXXXXX-XXXXX',
+  translation: { 'X': '[0-9]' } 
+};
+
+const revealElement = revealContainer.create(revealElementInput,options);
+```
+
+Value from vault: "374200000000004"
+Revealed Value displayed in element: "3742-000000-00004"
+
 Once you've defined a Skyflow Element, you can use the `create(element)` method of the container to create the Element as shown below: 
 
 ```javascript
@@ -2333,6 +2415,62 @@ collectContainer.uploadFiles();
 }
 ```
 
+---
+# Securely deleting data client-side
+-  [**Deleting data from the vault**](#deleting-data-from-the-vault)
+
+## Deleting data from the vault
+
+To delete data from the vault, use the `delete(records, options?)` method of the Skyflow client. The `records` parameter takes an array of records to delete in the following format. The `options` parameter is optional and takes an object of deletion parameters. Currently, there are no supported deletion parameters.
+
+```javascript
+const records = [
+  {
+    id: "<SKYFLOW_ID_1>", // skyflow id of the record to delete
+    table: "<TABLE_NAME>" // Table from which the record is to be deleted
+  },
+  {
+    // ...additional records here
+  },
+],
+
+skyflowClient.delete(records);
+```
+
+An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/delete-pure-js.html) of delete call:
+
+```javascript
+skyflowClient.delete({
+  records: [
+    {
+      id: "29ebda8d-5272-4063-af58-15cc674e332b",
+      table: "cards",
+    },
+    {
+      id: "d5f4b926-7b1a-41df-8fac-7950d2cbd923",
+      table: "cards",
+    }
+  ],
+});
+```
+
+A sample response:
+
+```json
+{
+  "records": [
+    {
+     "skyflow_id": "29ebda8d-5272-4063-af58-15cc674e332b",
+     "deleted": true,
+    },
+    {
+     "skyflow_id": "29ebda8d-5272-4063-af58-15cc674e332b",
+     "deleted": true,
+    }
+  ]
+}
+```
+
 
 ## Reporting a Vulnerability