skyflow-js 1.12.1 → 1.14.0

package/CHANGELOG.md

@@ -2,11 +2,36 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.14.0] - 2022-04-19
+
+### Added
+- `EXPIRATION_YEAR` element type
+- `EXPIRATION_MONTH` element type
+
+## [1.13.0] - 2022-04-05
+
+### Added
+- support for application/x-www-form-urlencoded and multipart/form-data content-type's in connections
+
+## [1.12.2] - 2022-03-29
+
+### Changed
+- Added validation of JWT token format from TokenProvider
+
+### Fixed 
+-  Request headers not getting overriden due to case sensitivity
+
+## [1.12.1] - 2022-03-22
+
+Fixed
+- Fixes in multiple skyflow clients creation
+
 ## [1.12.0] - 2022-02-24
 
 Added
 - `requestId` in error logs and error responses
 - add autocomplete for collect elements
+
 ## [1.11.0] - 2022-02-08
 
 ### Added

package/README.md

@@ -1,15 +1,17 @@
 # skyflow-js
-Skyflow’s Javascript SDK can be used to securely collect, tokenize, and reveal sensitive data in the browser without exposing your front-end infrastructure to sensitive data. 
+Skyflow’s Javascript SDK can be used to securely collect, tokenize, and reveal sensitive data in the browser without exposing your front-end infrastructure to sensitive data.
 
 ---
 
+[![CI](https://img.shields.io/static/v1?label=CI&message=passing&color=green?style=plastic&logo=github)](https://github.com/skyflowapi/skyflow-js/actions)
+[![GitHub release](https://img.shields.io/github/v/release/skyflowapi/skyflow-js.svg)](https://www.npmjs.com/package/skyflow-js)
+[![License](https://img.shields.io/github/license/skyflowapi/skyflow-android)](https://github.com/skyflowapi/skyflow-js/blob/master/LICENSE)
+
 # Table of Contents
 - [**Including Skyflow.js**](#Including-Skyflowjs) 
 - [**Initializing Skyflow.js**](#Initializing-Skyflowjs)
 - [**Securely collecting data client-side**](#Securely-collecting-data-client-side)
 - [**Securely revealing data client-side**](#Securely-revealing-data-client-side)
-- [**Securely invoking Connections client-side**](#Securely-invoking-Connections-client-side)
-- [**Securely invoking Connections client-side using SOAP**](#Securely-invoking-Connections-client-side-using-soap)
 
 ---
 
@@ -157,7 +159,7 @@ skyflowClient.insert(records, options={})
 
  
 
-An example of an insert call: 
+An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/purejs.html) of an insert call: 
 ```javascript
 skyflowClient.insert({
   "records": [
@@ -283,6 +285,8 @@ Finally, the `type` field takes a Skyflow ElementType. Each type applies the app
 - `CARDHOLDER_NAME`
 - `CARD_NUMBER`
 - `EXPIRATION_DATE`
+- `EXPIRATION_MONTH`
+- `EXPIRATION_YEAR`
 - `CVV`
 - `INPUT_FIELD`
 - `PIN`
@@ -303,15 +307,19 @@ const options = {
 
 `enableCardIcon` paramenter 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 is currently applicable to EXPIRATION_DATE element type only, the values that are accepted are
+`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.
 
-- `MM/YY`
-- `MM/YYYY`
-- `YY/MM`
-- `YYYY/MM`
+The values that are accepted for `EXPIRATION_DATE` are
+  - `MM/YY` (default)
+  - `MM/YYYY`
+  - `YY/MM`
+  - `YYYY/MM`
 
-`NOTE` : If not specified or invalid value is passed to the format for EXPIRATION_DATE element, then it defaults to MM/YY format.
+The values that are accepted for `EXPIRATION_YEAR` are
+  - `YY` (default)
+  - `YYYY`
 
+`NOTE`: If not specified or invalid value is passed to the `format` then it takes default value.
 
 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:
 
@@ -394,7 +402,7 @@ container.collect(options={})
 
 ### End to end example of collecting data with Skyflow Elements
 
-**Sample Code:**
+**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/skyflowElements.html)**
 
 ```javascript
 //Step 1
@@ -513,7 +521,7 @@ const elementValueMatchRule = {
 }
 ```
 
-The Sample code snippet for using custom validations:
+The Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/CustomValidations.html) for using custom validations:
 
 ```javascript
 /*
@@ -619,7 +627,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 for using listeners
+##### Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/CollectElementListeners.html) for using listeners
 ```javascript
 //create skyflow client
 const skyflowClient = Skyflow.init({
@@ -741,7 +749,7 @@ cardNumber.clearValue();
 For non-PCI use-cases, retrieving data from the vault and revealing it in the browser can be done either using the SkyflowID's or tokens as described below
 
 - ### Using Skyflow tokens
-    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.
+    In order to retrieve data from your vault using tokens that you have previously generated for that data, you can use the `detokenize(records)` method. The records parameter takes a JSON object that contains `records` to be fetched as shown below.
 
 ```javascript
 const records = {
@@ -754,7 +762,7 @@ const records = {
 
 skyflow.detokenize(records)
 ```
-An example of a detokenize call: 
+An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/purejs.html) of a detokenize call: 
 
 ```javascript
 skyflow.detokenize({
@@ -779,7 +787,7 @@ The sample response:
 ```
 
 - ### Using Skyflow ID's
-    For retrieving using SkyflowID's, use the `getById(records)` method.The records parameter takes a JSON object that contains `records` to be fetched as shown below.
+    In order to retrieve data from your vault using SkyflowIDs, use the `getById(records)` method.The records parameter takes a JSON object that contains `records` to be fetched as shown below.
 
 ```javascript
 {
@@ -936,6 +944,7 @@ container.reveal()
 
 ### End to end example of all steps
 
+**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/skyflowElements.html)**
 ```javascript
 //Step 1
 const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
@@ -1070,315 +1079,3 @@ cardNumber.setAltText("Card Number");
 //clear altText
 cardNumber.clearAltText(); 
 ```
-# Securely invoking Connections client-side
-Using Skyflow Connections, end-user applications can integrate checkout/card issuance flow without any of their apps/systems touching the PCI compliant fields like cvv, card number. To invoke Connections, use the `invokeConnection(connectionConfig)` method of the Skyflow client.
-
-```javascript
-const connectionConfig = {
-  connectionURL: string, // connection url recevied when creating a skyflow Connection integration
-  methodName: Skyflow.RequestMethod,
-  pathParams: any,	// optional
-  queryParams: any,	// optional
-  requestHeader: any, // optional
-  requestBody: any,	// optional
-  responseBody: any	// optional
-}
-
-const response =  skyflowClient.invokeConnection(connectionConfig);
-```
-`methodName` supports the following methods:
-
-- GET
-- POST
-- PUT
-- PATCH
-- DELETE
-
-**pathParams, queryParams, requestHeader, requestBody** are the JSON objects that will be sent through the Connection integration url.
-
-The values in the above parameters can contain collect elements, reveal elements or actual values. When elements are provided inplace of values, they get replaced with the value entered in the collect elements or value present in the reveal elements
-
-**responseBody**:  
-It is a JSON object that specifies where to render the response in the UI. The values in the responseBody can contain collect elements or reveal elements. The actual values corresponding to these elements will be stripped out from the actual response, which is then forwarded from the SDK to the client application.
-
-Sample use-cases on using invokeConnection():
-
-###  Sample use-case 1:
-
-Merchant acceptance - customers should be able to complete payment checkout without cvv touching their application. This means that the merchant should be able to receive a CVV and process a payment without exposing their front-end to any PCI data
-
-```javascript
-// step 1
-const skyflowClient = skyflow.init({
-	 getBearerToken: <helperFunc>
-});
-
-// step 2
-const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT)
-
-// step 3
-const cardNumberElement = collectContainer.create({           
-  type: skyflow.ElementType.CARD_NUMBER
-})
-cardNumberElement.mount("#cardNumber")
-
-const cvvElement = collectContainer.create({
-    type: skyflow.ElementType.CVV
-})
-cvvElement.mount("#cvv")
-
-// step 4
-const connectionConfig = { 
-  connectionURL: <connection_url>,
-  methodName: Skyflow.RequestMethod.POST,
-  requestBody: {
-   card_number: cardNumberElement, //it can be skyflow element(collect or reveal) or actual value
-   cvv: cvvElement,  
-  }
-}
-
-const response =  skyflowClient.invokeConnection(connectionConfig);
-```
-
-Sample Response:
-```javascript
-{
-   "receivedTimestamp": "2019-05-29 21:49:56.625",
-   "processingTimeinMs": 116
-}
-```
-In the above example,  CVV is being collected from the user input at the time of checkout and not stored anywhere in the vault
-
-`Note:`  
-- card_number can be either container element or plain text value (tokens or actual value)
-- `table` and `column` names are not required for creating collect element, if it is used for invokeConnection method, since they will not be stored in the vault
-
- ### Sample use-case 2:
- 
- Card issuance -  customers want to issue cards from card issuer service and should generate the CVV dynamically without increasing their PCI scope.
-```javascript
-// step 1
-const skyflowClient = skyflow.init({
-	 getBearerToken: <helperFunc>
-});
-
-// step 2
-const revealContainer = skyflowClient.container(Skyflow.ContainerType.REVEAL)
-const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT)
-
-// step 3
-const cvvElement = revealContainer.create({
-    altText: "###",
-})
-cvvElement.mount("#cvv")
-
-const expiryDateElement = collectContainer.create({
-    type: skyflow.ElementType.EXPIRATION_DATE
-})
-expiryDateElement.mount("#expirationDate")
-
-//step 4
-const connectionConfig = { 
-  connectionURL: <connection_url>,
-  methodName: Skyflow.RequestMethod.POST,
-  pathParams: {
-     card_number: "0905-8672-0773-0628"	//it can be skyflow element(collect/reveal) or token or actual value
-  },
-  requestBody: {
-    expirationDate: expiryDateElement //it can be skyflow element(collect/reveal) or token or actual value
- },
- responseBody: {
-     resource: {
-         cvv2: cvvElement   // pass the element where the cvv response from the Connection will be mounted
-       }
-     }  
-   }
-}
-
-const response = skyflowClient.invokeConnection(connectionConfig);
-```
-
-Sample Response:
-```javascript
-{
-   "receivedTimestamp": "2019-05-29 21:49:56.625",
-   "processingTimeinMs": 116
-}
-```
-
-`Note`:
-- `token` is optional for creating reveal element, if it is used for invokeConnection
-- responseBody contains collect or reveal elements to render the response from the Connection on UI 
-
-# Securely invoking Connections client-side using SOAP
-
- To invoke Connections using SOAP, use the `invokeSoapConnection(connectionConfig)` method of the Skyflow client as shown below:
-
- ```javascript
-const connectionConfig = {
-  connectionURL: string, // connection url received when creating a Skyflow Connection
-  httpHeaders: any,      // optional
-  requestXML: string,
-  responseXML: string,   // optional
-}
-
-const response =  skyflowClient.invokeSoapConnection(connectionConfig);
-```
-
-**httpHeaders** is the JSON object containing key-value pairs that are sent as request headers.
-
-`Note:` "X-Skyflow-Authorization" key is added in headers by SDK internally. If user specifies it again, it overrides.
-
-**requestXML** accepts the entire XML request as a string.
-
-The values in the **requestXML** can contain collect element IDs or reveal element IDs or actual values. When the IDs are provided in place of values, they get replaced with the value entered in the collect elements or value present in the reveal elements.
-
-**responseXML** accepts the entire XML request as a string. It specifies where to render the response in the UI. The values in the responseXML can contain collect element IDs or reveal element IDs. The actual values corresponding to these IDs will be stripped out from the actual response, which is then forwarded from the SDK to the client application.
-
-`Note:` If the user needs to use Skyflow Elements in place of values in the requestXML or responseXML, they will pass in an additional tag **Skyflow** containing the ID of the particular element.
-
-Please ensure that the paths configured in the responseXML are present in the actual response. In case of a misconfigured path, the response from the server will be discarded and an error will be thrown.
-
-```javascript
-
-// step 1
-const skyflowClient = skyflow.init({
-   vaultID: '<vault_ID>',   // optional
-   vaultURL: '<vault_URL>', // optional
-	 getBearerToken: '<helperFunc>'
-});
-
-// step 2
-const revealContainer = skyflowClient.container(Skyflow.ContainerType.REVEAL)
-const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT)
-
-
-// step 3
-const cardNumberElement = collectContainer.create({           
-  type: skyflow.ElementType.CARD_NUMBER
-})
-cardNumberElement.mount("#cardNumber")
-
-const expiryMonthElement = revealContainer.create({
-    token: "<expiry_month_token>"
-})
-expiryMonthElement.mount("#expirationMonth")
-
-const expiryYearElement = revealContainer.create({
-    token: "<expiry_year_token>"
-})
-expiryYearElement.mount("#expirationYear")
-
-
-const cvvElement = revealContainer.create({
-    altText: "###",
-})
-cvvElement.mount("#cvv")
-
-//step 4
-const cardNumberID = cardNumberElement.getID()  // to get element ID
-const expiryMonthID = expiryDateElement.getID()
-const expiryYearID = expiryYearElement.getID()
-const cvvElementID = cvvElement.getID()
-
-// step 5
-const requestXML = `<soapenv:Envelope>
-    <soapenv:Header>
-      <ClientID>1234</ClientID>
-    </soapenv:Header>
-    <soapenv:Body>
-      <GenerateCVV>
-        <CardNumber>
-          <Skyflow>${cardNumberID}</Skyflow>
-        </CardNumber>
-        <ExpiryMonth>
-          <Skyflow>${expiryMonthID}</Skyflow>
-        </ExpiryMonth>
-        <ExpiryYear>
-          <Skyflow>${expiryYearID}</Skyflow>
-        </ExpiryYear>
-      </GenerateCVV>
-    </soapenv:Body>
-</soapenv:Envelope>`
-
-
-const responseXML = `<soapenv:Envelope>
-    <soapenv:Header>
-      <HeaderList>
-        <HeaderItem>
-          <Name>NodeId</Name>
-          <Value>
-            <Skyflow>${revealNodeId}</Skyflow>
-          </Value>
-        </HeaderItem>
-        <HeaderItem>
-          <Name>ProgramId</Name>
-          <Value>
-            <Skyflow>${revealProgramId}</Skyflow>
-          </Value>
-        </HeaderItem>
-      </HeaderList>
-      <ClientID>1234</ClientID>
-    </soapenv:Header>
-    <soapenv:Body>
-      <GenerateCVV>
-        <CVV>
-          <Skyflow>${cvvElementID}</Skyflow>
-        </CVV>
-      </GenerateCVV>
-    </soapenv:Body>
-</soapenv:Envelope>`
-
-const headers = {
- soapAction: '<soap_action>', // any http headers can be added here
-}
-
-const connectionConfig = { 
-  connectionURL: '<connection_url>',
-  httpHeaders: headers,
-  requestXML: requestXML,
-  responseXML: responseXML,
-}
-
-const response =  skyflowClient.invokeSoapConnection(connectionConfig);
-
-```
-
-Sample Response on success:
-
-```xml
-<soapenv:Envelope>
-    <soapenv:Header>
-      <HeaderList>
-        <HeaderItem>
-            <Name>NodeId</Name>
-        </HeaderItem>
-        <HeaderItem>
-            <Name>ProgramId</Name>
-        </HeaderItem>
-      </HeaderList>
-    </soapenv:Header>
-    <soapenv:Body>
-      <GenerateCVV>
-        <ReceivedTimestamp>2019-05-29 21:49:56.625</ReceivedTimestamp>
-      </GenerateCVV>
-    </soapenv:Body>
-</soapenv:Envelope>
-```
-
-Sample Response on failure:
-
-```javascript
-{
-  code: '<error_code>',
-  description: '<error_description>',
-  xml: '<xml_received_from_server>'
-}
-```
-
-`Note`: 
-- In responseXML we provide the tags that needs to be rendered in UI and stripped out from the actual response. 
-    1. For uniquely identifiable tag, we can give the elementID within a skyflow tag directly corresponding to the actual value.
-    Please refer to the CVV tag in the above example. Here, we wish to strip the actual value present within the CVV tag.
-    2. For arrays, since we have multiple tags with the same name, we will need to provide identifiers to uniquely identify the required tag.
-    Please refer to HeaderItem tag. Here, we have provided NodeId within the Name tag which acts as an identifier and we wish to strip the actual value present in the Value tag.