skyflow-js 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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.

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. `insert` method also support upsert operations. 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 = {
@@ -164,9 +164,7 @@ const options = {
 skyflowClient.insert(records, options)
 ```
 
- 
-
-An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/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": [
@@ -213,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
@@ -400,8 +398,8 @@ element.unmount();
 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.
+- `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 = {
@@ -418,12 +416,6 @@ const options = {
       //...additional records here
     ]
   }, //optional
-  upsert: [ //optional, upsert operations support in the vault
-    {
-      table: "string", // table name
-      column: "value  ", // unique column in the table
-    }
-  ]
 }
 
 container.collect(options)
@@ -503,20 +495,18 @@ container.collect({
   ]
 }
 ```
+### Insert call example with upsert support
+**Sample Code**
 
-### 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
+ ```javascript
 //Step 1
 const container = skyflowClient.container(Skyflow.ContainerType.COLLECT) 
-
+ 
 //Step 2
 const cardNumberElement = container.create({           
   table: "cards",
   column: "card_number",
-  inputstyles: {
+  inputStyles: {
       base: {
         color: "#1d1d1d",
       },
@@ -541,11 +531,11 @@ const cardNumberElement = container.create({
   label: "card_number",
   type: Skyflow.ElementType.CARD_NUMBER
 })
-
+ 
 const cvvElement = container.create({           
   table: "cards",
   column: "cvv",
-  inputstyles: {
+  inputStyles: {
       base: {
         color: "#1d1d1d",
       },
@@ -572,12 +562,11 @@ const cvvElement = container.create({
 })
 
 // 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
-
+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({
+ container.collect({
   tokens: true,
   upsert: [
     {
@@ -586,17 +575,17 @@ container.collect({
     }
   ]
 })
-```
 
-**Sample Response :**
+ ```
+ **Skyflow returns tokens for the record you just inserted.**
 ```javascript
 {
   "records": [
     {
       "table": "cards",
       "fields": {
-        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
-        "cvv": "12f670af-6c7d-4837-83fb-30365fbc0b1e"
+        "cardNumber": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+        "gender": "12f670af-6c7d-4837-83fb-30365fbc0b1e"
       }
     }
   ]
@@ -656,7 +645,7 @@ const elementValueMatchRule = {
 }
 ```
 
-The Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/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
 /*
@@ -762,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/using-script-tag/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({
@@ -897,7 +886,7 @@ const records = {
 
 skyflow.detokenize(records)
 ```
-An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/using-script-tag/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({
@@ -1007,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