skyflow-js 1.21.3 → 1.22.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## [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

@@ -135,7 +135,7 @@ For `env` parameter, there are 2 accepted values in Skyflow.Env
 - [**Using Skyflow File Element to upload a file**](#using-skyflow-file-element-to-upload-a-file)
 ## 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: 
+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. `insert` method also support upsert operations. See below: 
 
 ```javascript
 const records = {
@@ -152,15 +152,21 @@ 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/purejs.html) of an insert call: 
 ```javascript
 skyflowClient.insert({
   "records": [
@@ -305,7 +311,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 +397,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.
+- `upsert`: To support upsert operations while collecting the data from skyflow elements, pass the table and column that have been marked as unique in the table.
 
 ```javascript
 const options = {
@@ -410,15 +417,21 @@ const options = {
       }
       //...additional records here
     ]
-  } //optional
+  }, //optional
+  upsert: [ //optional, upsert operations support in the vault
+    {
+      table: "string", // table name
+      column: "value  ", // unique column in the table
+    }
+  ]
 }
 
-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
@@ -491,6 +504,105 @@ container.collect({
 }
 ```
 
+### End to end example of `upsert` support with Skyflow Elements
+
+**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/upsert-support.html)**
+
+```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"); //assumes there is a div with id="#cvv" in the webpage
+
+// Step 4
+
+container.collect({
+  tokens: true,
+  upsert: [
+    {
+      table: "cards", 
+      column: "card_number", 
+    }
+  ]
+})
+```
+
+**Sample Response :**
+```javascript
+{
+  "records": [
+    {
+      "table": "cards",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+        "cvv": "12f670af-6c7d-4837-83fb-30365fbc0b1e"
+      }
+    }
+  ]
+}
+```
+
 ### Validations
 
 Skyflow-JS provides two types of validations on Collect Elements
@@ -544,7 +656,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/CustomValidations.html) for using custom validations:
 
 ```javascript
 /*
@@ -650,7 +762,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/CollectElementListeners.html) for using listeners
 ```javascript
 //create skyflow client
 const skyflowClient = Skyflow.init({
@@ -785,7 +897,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/purejs.html) of a detokenize call: 
 
 ```javascript
 skyflow.detokenize({
@@ -970,7 +1082,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)