skyflow-js 1.21.4 → 1.23.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.23.0] - 2022-12-27
+### Added
+-  Added new `get` interface.
+
+## [1.22.0] - 2022-11-15
+### Added
+- `upsert` support while collecting data through skyflow elements.
+- `upsert` support for pure js `insert` method.
 ## [1.21.3] - 2022-10-18
 ### Added
 - `cardIcon` and `copyIcon` style objects for collect and reveal elements.

package/README.md

@@ -126,16 +126,16 @@ 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)
+-  [**Insert data into the vault**](#insert-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)
 -  [**UI Error for Collect Eements**](#ui-error-for-collect-elements)
 - [**Set and Clear value for Collect Elements (DEV ENV ONLY)**](#set-and-clear-value-for-collect-elements-dev-env-only)
 - [**Using Skyflow File Element to upload a file**](#using-skyflow-file-element-to-upload-a-file)
-## Inserting data into the vault
+## Insert 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: 
+To insert data into the vault, use the `insert(records, options?)` method of the Skyflow client. The `records` parameter takes a JSON object of the records to insert into the below format. The `options` parameter takes a dictionary of optional parameters for the insertion. The `insert` method also supports upsert operations.
 
 ```javascript
 const records = {
@@ -152,15 +152,19 @@ const records = {
 }
 
 const options = {
-  tokens: true  //indicates whether or not tokens should be returned for the inserted data. Defaults to 'true'  
+  tokens: true,  //indicates whether or not tokens should be returned for the inserted data. Defaults to 'true'  
+  upsert: [ // upsert operations support in the vault
+      {
+        table: "string", // table name
+        column: "value  ", // unique column in the table
+      }
+    ]
 }
 
-skyflowClient.insert(records, options={})
+skyflowClient.insert(records, options)
 ```
 
- 
-
-An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/purejs.html) of an insert call: 
+An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/pure-js.html) of an insert call: 
 ```javascript
 skyflowClient.insert({
   "records": [
@@ -207,8 +211,8 @@ A Skyflow collect Element is defined as shown below:
 
 ```javascript
 const collectElement =  {
-   table: "string",             //optional, the table this data belongs to
-   column: "string",            //optional, the column into which this data should be inserted
+   table: "string",             //required, the table this data belongs to
+   column: "string",            //required, the column into which this data should be inserted
    type: Skyflow.ElementType,   //Skyflow.ElementType enum
    inputStyles: {},             //optional styles that should be applied to the form element
    labelStyles: {},             //optional styles that will be applied to the label of the collect element
@@ -305,7 +309,7 @@ Finally, the `type` field takes a Skyflow ElementType. Each type applies the app
 
 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.
 
-Along with CollectElement we can define other options which takes a dictionary of optional parameters as described below:
+Along with CollectElement we can define other options which takes a object of optional parameters as described below:
 
 ```javascript
 const options = {
@@ -391,10 +395,11 @@ element.unmount();
 
 ### Step 4: Collect data from Elements
 
-When the form is ready to be submitted, call the `collect(options?)` method on the container object. The `options` parameter takes a dictionary of optional parameters as shown below: 
+When the form is ready to be submitted, call the `collect(options?)` method on the container object. The `options` parameter takes a object of optional parameters as shown below: 
 
 - `tokens`: indicates whether tokens for the collected data should be returned or not. Defaults to 'true'
-- `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.
+- `additionalFields`: Non-PCI elements data to be inserted into the vault which should be in the `records` object format as described in the above [Insert data into vault](#insert-data-into-the-vault) section.
+-  `upsert`: To support upsert operations while collecting data from Skyflow elements, pass the table and column marked as unique in the table.
 
 ```javascript
 const options = {
@@ -410,15 +415,15 @@ const options = {
       }
       //...additional records here
     ]
-  } //optional
+  }, //optional
 }
 
-container.collect(options={})
+container.collect(options)
 ```
 
 ### End to end example of collecting data with Skyflow Elements
 
-**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/skyflowElements.html)**
+**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/skyflow-elements.html)**
 
 ```javascript
 //Step 1
@@ -490,6 +495,102 @@ container.collect({
   ]
 }
 ```
+### Insert call example with upsert support
+**Sample Code**
+
+ ```javascript
+//Step 1
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT) 
+ 
+//Step 2
+const cardNumberElement = container.create({           
+  table: "cards",
+  column: "card_number",
+  inputStyles: {
+      base: {
+        color: "#1d1d1d",
+      },
+      cardIcon:{
+        position: "absolute",
+        left:"8px", 
+        bottom:"calc(50% - 12px)"
+    },
+  },
+  labelStyles: {
+      base: {
+        fontSize: "12px",
+        fontWeight: "bold"
+      }
+  },
+  errorTextStyles: {
+      base: {
+        color: "#f44336"
+      }
+  },
+  placeholder: "Card Number",
+  label: "card_number",
+  type: Skyflow.ElementType.CARD_NUMBER
+})
+ 
+const cvvElement = container.create({           
+  table: "cards",
+  column: "cvv",
+  inputStyles: {
+      base: {
+        color: "#1d1d1d",
+      },
+      cardIcon:{
+        position: "absolute",
+        left:"8px", 
+        bottom:"calc(50% - 12px)"
+    },
+  },
+  labelStyles: {
+      base: {
+        fontSize: "12px",
+        fontWeight: "bold"
+      }
+  },
+  errorTextStyles: {
+      base: {
+        color: "#f44336"
+      }
+  },
+  placeholder: "CVV",
+  label: "cvv",
+  type: Skyflow.ElementType.CVV
+})
+
+// Step 3
+cardNumberElement.mount("#cardNumber")  //Assumes there is a div with id="#cardNumber" in the webpage.
+cvvElement.mount("#cvv"); //Aassumes there is a div with id="#cvv" in the webpage.
+ 
+// Step 4
+ container.collect({
+  tokens: true,
+  upsert: [
+    {
+      table: "cards", 
+      column: "card_number", 
+    }
+  ]
+})
+
+ ```
+ **Skyflow returns tokens for the record you just inserted.**
+```javascript
+{
+  "records": [
+    {
+      "table": "cards",
+      "fields": {
+        "cardNumber": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+        "gender": "12f670af-6c7d-4837-83fb-30365fbc0b1e"
+      }
+    }
+  ]
+}
+```
 
 ### Validations
 
@@ -544,7 +645,7 @@ const elementValueMatchRule = {
 }
 ```
 
-The Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/CustomValidations.html) for using custom validations:
+The Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/custom-validations.html) for using custom validations:
 
 ```javascript
 /*
@@ -650,7 +751,7 @@ state : {
 `Note:`
 values of SkyflowElements will be returned in elementstate object only when `env` is  `DEV`,  else it is empty string i.e, ''
 
-##### Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/CollectElementListeners.html) for using listeners
+##### Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/collect-element-listeners.html) for using listeners
 ```javascript
 //create skyflow client
 const skyflowClient = Skyflow.init({
@@ -785,7 +886,7 @@ const records = {
 
 skyflow.detokenize(records)
 ```
-An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/purejs.html) of a detokenize call: 
+An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/pure-js.html) of a detokenize call: 
 
 ```javascript
 skyflow.detokenize({
@@ -895,7 +996,7 @@ Then define a Skyflow Element to reveal data as shown below.
 
 ```javascript
 const revealElement = {
-  token: "string",                    //optional, token of the data being revealed 
+  token: "string",                    //required, token of the data being revealed 
   inputStyles: {},                    //optional styles to be applied to the element
   labelStyles: {},                    //optional, styles to be applied to the label of the reveal element
   errorTextStyles: {},                //optional styles that will be applied to the errorText of the reveal element
@@ -970,7 +1071,7 @@ container.reveal()
 
 ### End to end example of all steps
 
-**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/skyflowElements.html)**
+**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/skyflow-elements.html)**
 ```javascript
 //Step 1
 const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)