skyflow-js 1.5.0 → 1.9.0

package/CHANGELOG.md

@@ -1,6 +1,51 @@
 # Changelog
 
 All notable changes to this project will be documented in this file.
+
+
+## [1.9.0] - 2022-01-11
+
+### Added
+- `Soap protocol` support for connections
+
+## [1.8.0] - 2021-12-07
+
+### Added
+- `setError(error: string)` method to set custom UI error to be displayed on the collect and reveal Elements
+- `resetError()` method is used to clear the custom UI error message set through setError 
+- `format` parameter in `collectElementOptions` to support different type of date formats for `EXPIRATION_DATE` element
+- `setValue(value: string)` and `clearValue()` method in DEV env, to set/clear the value of a collect element.
+- `setToken(value: string)` method to set the token for a reveal element.
+- `setAltText(value: string)` and `clearAltText()` method to set/clear the altText for a reveal 
+### Changed
+
+- Changed error messages in the logs and callback errors.
+- `altText` support has been deprecated for collect element
+- `vaultID` and `vaultURL` are now optional parameters in Configuration constructor
+
+### Fixed
+- Updating UI error messages
+
+## [1.7.0] - 2021-11-24
+### Added
+- `validations` option in `CollectElementInput` that takes an array of validation rules
+- `REGEX_MATCH_RULE`, `LENGTH_MATCH_RULE` & `ELEMENT_MATCH_RULE` Validation rules types
+- `PIN` Element type
+
+### Fixed
+- Card Number validation
+
+
+## [1.6.0] - 2021-11-16
+
+### Added
+- `enableCardIcon` option to configure Card Icon visibility
+- `INPUT_FIELD` Element type for custom UI elements
+- `unmount` method to reset collect element to initial state
+
+### Changed
+- New VISA Card Icon with updated Logo
+
 ## [1.5.0] - 2021-11-10
 
 ### Changed

package/README.md

@@ -9,6 +9,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 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)
 
 ---
 
@@ -125,13 +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)
 -  [**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)
 ## 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: 
 
 ```javascript
-var records = {
+const records = {
   "records": [
   	{
       table: "string", //table into which record should be inserted
@@ -144,7 +148,7 @@ var records = {
   ]
 }
 
-var options = {
+const options = {
   tokens: true  //indicates whether or not tokens should be returned for the inserted data. Defaults to 'true'  
 }
 
@@ -199,7 +203,7 @@ const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
 A Skyflow collect Element is defined as shown below: 
 
 ```javascript
-var collectElement =  {
+const collectElement =  {
    table: "string",             //optional, the table this data belongs to
    column: "string",            //optional, the column into which this data should be inserted
    type: Skyflow.ElementType,   //Skyflow.ElementType enum
@@ -208,10 +212,13 @@ var collectElement =  {
    errorTextStyles:{},          //optional styles that will be applied to the errorText of the collect element
    label: "string",             //optional label for the form element
    placeholder: "string",       //optional placeholder for the form element
-   altText: "string"            //optional string that acts as an initial value for the collect element
+   altText: "string"            //(DEPRECATED) string that acts as an initial value for the collect element
+   validations:[]               // optional array of validation rules
 }
 ```
-The `table` and `column` fields indicate which table and column in the vault the Element corresponds to. **Note**: 
+The `table` and `column` fields indicate which table and column in the vault the Element corresponds to. 
+
+**Note**: 
 -  Use dot delimited strings to specify columns nested inside JSON fields (e.g. `address.street.line1`)
 -  `table` and `column` are optional only if the element is being used in invokeConnection()
 
@@ -272,16 +279,44 @@ errorTextStyles: {
 }
 ```
 
-Finally, the `type` field takes a Skyflow ElementType. Each type applies the appropriate regex and validations to the form element. There are currently 4 types:
+Finally, the `type` field takes a Skyflow ElementType. Each type applies the appropriate regex and validations to the form element. There are currently 5 types:
 - `CARDHOLDER_NAME`
 - `CARD_NUMBER`
 - `EXPIRATION_DATE`
 - `CVV`
+- `INPUT_FIELD`
+- `PIN`
+
+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:
+
+```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 //optinal, format for the element (only applicable currently for EXPIRATION_DATE ElementType)
+}
+```
+
+`required` parameter indicates whether the field is marked as required or not. If not provided, it defaults to false
+
+`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
+
+- `MM/YY`
+- `MM/YYYY`
+- `YY/MM`
+- `YYYY/MM`
 
-Once the Element object 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 as defined above and the `options` parameter takes a dictionary of optional parameters as described below: 
+`NOTE` : If not specified or invalid value is passed to the format for EXPIRATION_DATE element, then it defaults to MM/YY format.
+
+
+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:
 
 ```javascript
-var collectElement =  {
+const collectElement =  {
    table: "string",             //the table this data belongs to
    column: "string",            //the column into which this data should be inserted
    type: Skyflow.ElementType,   //Skyflow.ElementType enum
@@ -290,11 +325,14 @@ var collectElement =  {
    errorTextStyles:{},          //optional styles that will be applied to the errorText of the collect element
    label: "string",             //optional label for the form element
    placeholder: "string",       //optional placeholder for the form element
-   altText: "string"            //optional string that acts as an initial value for the collect element
+   altText: "string"            //(DEPRECATED) string that acts as an initial value for the collect element
+   validations:[]               // optional array of validation rules
 }
 
-var options = {
-  required: false  //indicates whether the field is marked as required. Defaults to 'false'
+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 //optinal, format for the element (only applicable currently for EXPIRATION_DATE ElementType)
 }
 
 const element = container.create(collectElement, options)
@@ -322,7 +360,10 @@ Now, when the `mount(domElement)` method of the Element is called, the Element w
 ```javascript
 element.mount("#cardNumber")
 ```
-
+you can use the `unmount` method to reset any collect element to it's initial state.
+```javascript
+element.unmount();
+```
 
 ### Step 4: Collect data from Elements
 
@@ -332,7 +373,7 @@ When the form is ready to be submitted, call the `collect(options?)` method on t
 - `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.
 
 ```javascript
-var options = {
+const options = {
   tokens: true  //optional, indicates whether tokens for the collected data should be returned. Defaults to 'true'
   additionalFields: {  
     records: [
@@ -421,7 +462,126 @@ container.collect({
 }
 ```
 
+### Validations
+
+Skyflow-JS provides two types of validations on Collect Elements
+
+#### 1. Default Validations:
+Every Collect Element except of type `INPUT_FIELD` has a set of default validations listed below:
+- `CARD_NUMBER`: Card number validation with checkSum algorithm(Luhn algorithm), available card lengths for defined card types
+- `CARD_HOLDER_NAME`: Name should be 2 or more symbols, valid characters should match pattern -  `^([a-zA-Z\\ \\,\\.\\-\\']{2,})$`
+- `CVV`: Card CVV can have 3-4 digits
+- `EXPIRATION_DATE`: Any date starting from current month. By default valid expiration date should be in short year format - `MM/YY`
+- `PIN`: Can have 4-12 digits
+
+#### 2. Custom Validations:
+Custom validations can be added to any element which will be checked after the default validations have passed. The following Custom validation rules are currently supported:
+- `REGEX_MATCH_RULE`: You can use this rule to specify any Regular Expression to be matched with the input field value
+
+```javascript
+const regexMatchRule = {
+  type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+  params: {
+    regex: RegExp,
+    error: string // optional, default error is "VALIDATION FAILED"
+  }
+}
+```
+
+- `LENGTH_MATCH_RULE`: You can use this rule to set the minimum and maximum permissible length of the input field value
+
+```javascript
+const lengthMatchRule = {
+  type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+  params: {
+    min : number, // optional
+    max : number, // optional 
+    error: string // optional, default error is "VALIDATION FAILED"
+  }
+}
+```
+
+- `ELEMENT_VALUE_MATCH_RULE`: You can use this rule to match the value of one element with another element
+
+```javascript
+const elementValueMatchRule = {
+  type: Skyflow.ValidationRuleType.ELEMENT_VALUE_MATCH_RULE,
+  params: {
+    element: CollectElement,
+    error: string // optional, default error is "VALIDATION FAILED"
+  }
+}
+```
+
+The Sample code snippet for using custom validations:
+
+```javascript
+/*
+  A simple example that illustrates custom validations.
+  Adding REGEX_MATCH_RULE , LENGTH_MATCH_RULE to collect element.
+*/
+
+// this rule allows 1 or more alphabets
+const alphabetsOnlyRegexRule = {
+  type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+  params:{
+    regex: /^[A-Za-z]+$/,
+    error: "Only alphabets are allowed"
+  }
+}; 
+
+// this rule allows input length between 4 and 6 characters
+const lengthRule = {
+  type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+  params:{
+    min: 4,
+    max: 6,
+    error: "Must be between 4 and 6 alphabets"
+  }
+}; 
+
+ const cardHolderNameElement = collectContainer.create({
+      table: "pii_fields",
+      column: "first_name",
+      ...collectStylesOptions,
+      label: "Card Holder Name",
+      placeholder: "cardholder name",
+      type: Skyflow.ElementType.INPUT_FIELD,
+      validations: [alphabetsOnlyRegexRule, lengthRule]
+    });
+
+/*
+  Reset PIN - A simple example that illustrates custom validations.
+  The below code shows an example of ELEMENT_VALUE_MATCH_RULE
+*/
+
+// for the PIN element
+const pinElement = collectContainer.create({
+  label: "PIN",
+  placeholder: "****",
+  type: Skyflow.ElementType.PIN,
+});
+
+// this rule allows to match the value with pinElement
+let elementMatchRule = {
+  type: Skyflow.ValidationRuleType.ELEMENT_VALUE_MATCH_RULE,
+  params:{
+    element: pinElement,
+    error: "PIN doesn't match"
+  }
+}
+const confirmPinElement = collectContainer.create({
+  label: "Confirm PIN",
+  placeholder: "****",
+  type: Skyflow.ElementType.PIN,
+  validations: [elementMatchRule]
+});
 
+// mount elements on screen - errors will be shown if any of the validaitons fail
+pinElement.mount("#collectPIN");
+confirmPinElement.mount("#collectConfirmPIN");
+
+```
 ### Event Listener on Collect Elements
 
 
@@ -461,7 +621,7 @@ values of SkyflowElements will be returned in elementstate object only when `env
 
 ##### Sample code snippet for using listeners
 ```javascript
-//create skyflow client with loglevel:"DEBUG"
+//create skyflow client
 const skyflowClient = Skyflow.init({
    vaultID: <VAULT_ID>,          
    vaultURL: <VAULT_URL>,
@@ -511,12 +671,70 @@ cardNumber.on(Skyflow.EventName.CHANGE,(state) => {
 }
 ```
 
+### UI Error for Collect Elements
+
+Helps to display custom error messages on the Skyflow Elements through the methods `setError` and `resetError` on the elements.
+
+`setError(error: string)` method is used to set the error text for the element, when this method is trigerred, all the current errors present on the element will be overridden with the custom error message passed. This error will be displayed on the element until `resetError()` is trigerred on the same element.
+
+`resetError()` method is used to clear the custom error message that is set using `setError`.
+
+##### Sample code snippet for setError and resetError
+
+```javascript
+
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
+
+const cardNumber = container.create({
+    table: "pii_fields",
+    column: "primary_card.card_number",
+    type: Skyflow.ElementType.CARD_NUMBER,
+});
+
+//Set custom error
+cardNumber.setError("custom error");
+
+//reset custom error
+cardNumber.resetError();
+
+```
+
+### Set and Clear value for Collect Elements (DEV ENV ONLY)
+
+`setValue(value: string)` method is used to set the value of the element. This method will override any previous value present in the element.
+
+`clearValue()` method is used to reset the value of the element.
+
+`Note:` This methods are only available in DEV env for testing/developmental purposes and MUST NOT be used in PROD env.
+
+##### Sample code snippet for setValue and clearValue
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
+
+const cardNumber = container.create({
+    table: "pii_fields",
+    column: "primary_card.card_number",
+    type: Skyflow.ElementType.CARD_NUMBER,
+});
+
+// Set a value programatically
+cardNumber.setValue("4111111111111111");
+
+// Clear the value
+cardNumber.clearValue();
+
+```
+
 ---
 
 
 # Securely revealing data client-side
 -  [**Retrieving data from the vault**](#retrieving-data-from-the-vault)
 -  [**Using Skyflow Elements to reveal data**](#using-skyflow-elements-to-reveal-data)
+-  [**UI Error for Reveal Elements**](#ui-error-for-reveal-elements)
+-  [**Set token for Reveal Elements**](#set-token-for-reveal-elements)
+- [**Set and clear altText for Reveal Elements**](#set-and-clear-alttext-for-reveal-elements)
 
 ## Retrieving data from the vault
 
@@ -526,7 +744,7 @@ For non-PCI use-cases, retrieving data from the vault and revealing it in the br
     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.
 
 ```javascript
-var records = {
+const records = {
   "records": [
       {
         token: "string",                    // token for the record to be fetched
@@ -645,12 +863,12 @@ const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
 Then define a Skyflow Element to reveal data as shown below. 
 
 ```javascript
-var revealElement = {
+const revealElement = {
   token: "string",                    //optional, 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
-  label: "string",                     //label for the form element
+  label: "string",                    //optional, label for the form element
   altText: "string"                   //optional, string that is shown before reveal, will show token if altText is not provided
 }
 ```
@@ -693,7 +911,7 @@ errorTextStyles: {
 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
-const element = container.create(revealElement, options={})
+const element = container.create(revealElement)
 ```
 
 ### Step 3: Mount Elements to the DOM
@@ -792,6 +1010,65 @@ The response below shows that some tokens assigned to the reveal elements get re
 }
 ```
 
+### UI Error for Reveal Elements
+Helps to display custom error messages on the Skyflow Elements through the methods `setError` and `resetError` on the elements.
+
+`setError(error: string)` method is used to set the error text for the element, when this method is trigerred, all the current errors present on the element will be overridden with the custom error message passed. This error will be displayed on the element until `resetError()` is trigerred on the same element.
+
+`resetError()` method is used to clear the custom error message that is set using `setError`.
+
+##### Sample code snippet for setError and resetError
+
+```javascript
+
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
+
+const cardNumber = container.create({
+   token: "89024714-6a26-4256-b9d4-55ad69aa4047",
+});
+
+//Set custom error
+cardNumber.setError("custom error");
+
+//reset custom error
+cardNumber.resetError();
+
+```
+### Set token for Reveal Elements
+
+The `setToken(value: string)` method can be used to set the token of the Reveal Element. If no altText is set, the set token will be displayed on the UI as well. If altText is set, then there will be no change in the UI but the token of the element will be internally updated.
+
+##### Sample code snippet for setToken
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
+
+const cardNumber = container.create({
+   altText:"Card Number",
+});
+
+// set token 
+cardNumber.setToken("89024714-6a26-4256-b9d4-55ad69aa4047");
+
+```
+### Set and Clear altText for Reveal Elements
+The `setAltText(value: string)` method can be used to set the altText of the Reveal Element. This will cause the altText to be displayed in the UI regardless of whether the token or value is currently being displayed.
+
+`clearAltText()` method can be used to clear the altText, this will cause the element to display the token or actual value of the element. If the element has no token, the element will be empty.
+##### Sample code snippet for setAltText and clearAltText
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
+
+const cardNumber = container.create({
+   token:"89024714-6a26-4256-b9d4-55ad69aa4047",
+});
+
+// set altText
+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.
 
@@ -821,7 +1098,7 @@ const response =  skyflowClient.invokeConnection(connectionConfig);
 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. 
+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():
 
@@ -832,8 +1109,6 @@ Merchant acceptance - customers should be able to complete payment checkout with
 ```javascript
 // step 1
 const skyflowClient = skyflow.init({
-	 vaultID: <vault_Id>, 
-	 vaultURL: <vault_url>, 
 	 getBearerToken: <helperFunc>
 });
 
@@ -883,8 +1158,6 @@ In the above example,  CVV is being collected from the user input at the time of
 ```javascript
 // step 1
 const skyflowClient = skyflow.init({
-	 vaultID: <vault_Id>, 
-	 vaultURL: <vault_url>, 
 	 getBearerToken: <helperFunc>
 });
 
@@ -934,4 +1207,162 @@ Sample Response:
 
 `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 
+- 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.
+
+**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({
+	 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 expiryDateElement = collectContainer.create({
+    type: skyflow.ElementType.EXPIRATION_DATE
+})
+expiryDateElement.mount("#expirationDate")
+
+const cvvElement = revealContainer.create({
+    altText: "###",
+})
+cvvElement.mount("#cvv")
+
+//step 4
+const cardNumberID = cardNumberElement.getID()  // to get element ID
+const expiryDateID = expiryDateElement.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>
+        <ExpiryDate>
+          <Skyflow>${expiryDateID}</Skyflow>
+        </ExpiryDate>
+      </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.