skyflow-js 1.6.0 → 1.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/README.md +448 -22
  3. package/dist/sdkNodeBuild/index.js +1 -1
  4. package/dist/sdkNodeBuild/index.js.LICENSE.txt +27 -0
  5. package/dist/sdkNodeBuild/index.js.LICENSE.txt.gz +0 -0
  6. package/dist/sdkNodeBuild/index.js.gz +0 -0
  7. package/package.json +6 -2
  8. package/types/Skyflow.d.ts +8 -6
  9. package/types/{container → core}/constants.d.ts +108 -15
  10. package/types/{container/external/PureJsController.d.ts → core/external/SkyflowContainer.d.ts} +4 -3
  11. package/types/core/external/collect/CollectContainer.d.ts +27 -0
  12. package/types/{container/external/element/index.d.ts → core/external/collect/CollectElement.d.ts} +9 -3
  13. package/types/core/external/common/Container.d.ts +3 -0
  14. package/types/{container/external/element → core/external/common}/IFrame.d.ts +0 -0
  15. package/types/core/external/common/SkyflowElement.d.ts +9 -0
  16. package/types/{container/external → core/external/reveal}/RevealContainer.d.ts +5 -4
  17. package/types/core/external/reveal/RevealElement.d.ts +21 -0
  18. package/types/{container → core}/internal/FrameElements.d.ts +0 -0
  19. package/types/core/internal/SkyflowFrame/SkyflowFrameController.d.ts +10 -0
  20. package/types/{container → core}/internal/iFrameForm/index.d.ts +11 -3
  21. package/types/{container → core}/internal/index.d.ts +2 -0
  22. package/types/{container → core}/internal/reveal/RevealFrame.d.ts +3 -0
  23. package/types/{container → core}/internal/reveal/RevealFrameController.d.ts +0 -0
  24. package/types/{core → core-utils}/collect.d.ts +2 -1
  25. package/types/{core → core-utils}/reveal.d.ts +0 -0
  26. package/types/libs/element-options.d.ts +4 -0
  27. package/types/libs/objectParse.d.ts +3 -0
  28. package/types/utils/common/index.d.ts +15 -0
  29. package/types/utils/constants.d.ts +334 -22
  30. package/types/utils/helpers/index.d.ts +6 -0
  31. package/types/utils/logs.d.ts +114 -37
  32. package/types/utils/logsHelper/index.d.ts +1 -1
  33. package/types/utils/validators/index.d.ts +15 -5
  34. package/types/container/external/CollectContainer.d.ts +0 -25
  35. package/types/container/external/reveal/RevealElement.d.ts +0 -11
  36. package/types/container/internal/pureJs/PureJsFrameController.d.ts +0 -9
package/CHANGELOG.md CHANGED
@@ -1,6 +1,46 @@
1
1
  # Changelog
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
+
5
+
6
+ ## [1.9.1] - 2022-01-11
7
+
8
+ ### Fixed
9
+ - Fixes in `invokeSoapConnection` method
10
+
11
+ ## [1.9.0] - 2022-01-11
12
+
13
+ ### Added
14
+ - `Soap protocol` support for connections
15
+
16
+ ## [1.8.0] - 2021-12-07
17
+
18
+ ### Added
19
+ - `setError(error: string)` method to set custom UI error to be displayed on the collect and reveal Elements
20
+ - `resetError()` method is used to clear the custom UI error message set through setError
21
+ - `format` parameter in `collectElementOptions` to support different type of date formats for `EXPIRATION_DATE` element
22
+ - `setValue(value: string)` and `clearValue()` method in DEV env, to set/clear the value of a collect element.
23
+ - `setToken(value: string)` method to set the token for a reveal element.
24
+ - `setAltText(value: string)` and `clearAltText()` method to set/clear the altText for a reveal
25
+ ### Changed
26
+
27
+ - Changed error messages in the logs and callback errors.
28
+ - `altText` support has been deprecated for collect element
29
+ - `vaultID` and `vaultURL` are now optional parameters in Configuration constructor
30
+
31
+ ### Fixed
32
+ - Updating UI error messages
33
+
34
+ ## [1.7.0] - 2021-11-24
35
+ ### Added
36
+ - `validations` option in `CollectElementInput` that takes an array of validation rules
37
+ - `REGEX_MATCH_RULE`, `LENGTH_MATCH_RULE` & `ELEMENT_MATCH_RULE` Validation rules types
38
+ - `PIN` Element type
39
+
40
+ ### Fixed
41
+ - Card Number validation
42
+
43
+
4
44
  ## [1.6.0] - 2021-11-16
5
45
 
6
46
  ### Added
package/README.md CHANGED
@@ -9,6 +9,7 @@ Skyflow’s Javascript SDK can be used to securely collect, tokenize, and reveal
9
9
  - [**Securely collecting data client-side**](#Securely-collecting-data-client-side)
10
10
  - [**Securely revealing data client-side**](#Securely-revealing-data-client-side)
11
11
  - [**Securely invoking Connections client-side**](#Securely-invoking-Connections-client-side)
12
+ - [**Securely invoking Connections client-side using SOAP**](#Securely-invoking-Connections-client-side-using-soap)
12
13
 
13
14
  ---
14
15
 
@@ -125,13 +126,16 @@ For `env` parameter, there are 2 accepted values in Skyflow.Env
125
126
  # Securely collecting data client-side
126
127
  - [**Inserting data into the vault**](#inserting-data-into-the-vault)
127
128
  - [**Using Skyflow Elements to collect data**](#using-skyflow-elements-to-collect-data)
129
+ - [**Using validations on Collect Elements**](#validations)
128
130
  - [**Event Listener on Collect Elements**](#event-listener-on-collect-elements)
131
+ - [**UI Error for Collect Eements**](#ui-error-for-collect-elements)
132
+ - [**Set and Clear value for Collect Elements (DEV ENV ONLY)**](#set-and-clear-value-for-collect-elements-dev-env-only)
129
133
  ## Inserting data into the vault
130
134
 
131
135
  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:
132
136
 
133
137
  ```javascript
134
- var records = {
138
+ const records = {
135
139
  "records": [
136
140
  {
137
141
  table: "string", //table into which record should be inserted
@@ -144,7 +148,7 @@ var records = {
144
148
  ]
145
149
  }
146
150
 
147
- var options = {
151
+ const options = {
148
152
  tokens: true //indicates whether or not tokens should be returned for the inserted data. Defaults to 'true'
149
153
  }
150
154
 
@@ -199,7 +203,7 @@ const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
199
203
  A Skyflow collect Element is defined as shown below:
200
204
 
201
205
  ```javascript
202
- var collectElement = {
206
+ const collectElement = {
203
207
  table: "string", //optional, the table this data belongs to
204
208
  column: "string", //optional, the column into which this data should be inserted
205
209
  type: Skyflow.ElementType, //Skyflow.ElementType enum
@@ -208,10 +212,13 @@ var collectElement = {
208
212
  errorTextStyles:{}, //optional styles that will be applied to the errorText of the collect element
209
213
  label: "string", //optional label for the form element
210
214
  placeholder: "string", //optional placeholder for the form element
211
- altText: "string" //optional string that acts as an initial value for the collect element
215
+ altText: "string" //(DEPRECATED) string that acts as an initial value for the collect element
216
+ validations:[] // optional array of validation rules
212
217
  }
213
218
  ```
214
- The `table` and `column` fields indicate which table and column in the vault the Element corresponds to. **Note**:
219
+ The `table` and `column` fields indicate which table and column in the vault the Element corresponds to.
220
+
221
+ **Note**:
215
222
  - Use dot delimited strings to specify columns nested inside JSON fields (e.g. `address.street.line1`)
216
223
  - `table` and `column` are optional only if the element is being used in invokeConnection()
217
224
 
@@ -278,13 +285,38 @@ Finally, the `type` field takes a Skyflow ElementType. Each type applies the app
278
285
  - `EXPIRATION_DATE`
279
286
  - `CVV`
280
287
  - `INPUT_FIELD`
288
+ - `PIN`
281
289
 
282
- The `INPUT_FIELD` type is a custom UI element without any built-in validations.
290
+ 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.
283
291
 
284
- 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:
292
+ Along with CollectElement we can define other options which takes a dictionary of optional parameters as described below:
285
293
 
286
294
  ```javascript
287
- var collectElement = {
295
+ const options = {
296
+ required: false, //optional, indicates whether the field is marked as required. Defaults to 'false'
297
+ enableCardIcon: true // optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType)
298
+ format: String //optinal, format for the element (only applicable currently for EXPIRATION_DATE ElementType)
299
+ }
300
+ ```
301
+
302
+ `required` parameter indicates whether the field is marked as required or not. If not provided, it defaults to false
303
+
304
+ `enableCardIcon` paramenter indicates whether the icon is visible for the CARD_NUMBER element, defaults to true
305
+
306
+ `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
307
+
308
+ - `MM/YY`
309
+ - `MM/YYYY`
310
+ - `YY/MM`
311
+ - `YYYY/MM`
312
+
313
+ `NOTE` : If not specified or invalid value is passed to the format for EXPIRATION_DATE element, then it defaults to MM/YY format.
314
+
315
+
316
+ 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:
317
+
318
+ ```javascript
319
+ const collectElement = {
288
320
  table: "string", //the table this data belongs to
289
321
  column: "string", //the column into which this data should be inserted
290
322
  type: Skyflow.ElementType, //Skyflow.ElementType enum
@@ -293,12 +325,14 @@ var collectElement = {
293
325
  errorTextStyles:{}, //optional styles that will be applied to the errorText of the collect element
294
326
  label: "string", //optional label for the form element
295
327
  placeholder: "string", //optional placeholder for the form element
296
- altText: "string" //optional string that acts as an initial value for the collect element
328
+ altText: "string" //(DEPRECATED) string that acts as an initial value for the collect element
329
+ validations:[] // optional array of validation rules
297
330
  }
298
331
 
299
- var options = {
300
- required: false, //indicates whether the field is marked as required. Defaults to 'false'
301
- enableCardIcon: true // indicates whether card icon should be enabled (only for CARD_NUMBER type Element)
332
+ const options = {
333
+ required: false, //optional, indicates whether the field is marked as required. Defaults to 'false'
334
+ enableCardIcon: true // optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType)
335
+ format: String //optinal, format for the element (only applicable currently for EXPIRATION_DATE ElementType)
302
336
  }
303
337
 
304
338
  const element = container.create(collectElement, options)
@@ -339,7 +373,7 @@ When the form is ready to be submitted, call the `collect(options?)` method on t
339
373
  - `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.
340
374
 
341
375
  ```javascript
342
- var options = {
376
+ const options = {
343
377
  tokens: true //optional, indicates whether tokens for the collected data should be returned. Defaults to 'true'
344
378
  additionalFields: {
345
379
  records: [
@@ -428,7 +462,126 @@ container.collect({
428
462
  }
429
463
  ```
430
464
 
465
+ ### Validations
466
+
467
+ Skyflow-JS provides two types of validations on Collect Elements
468
+
469
+ #### 1. Default Validations:
470
+ Every Collect Element except of type `INPUT_FIELD` has a set of default validations listed below:
471
+ - `CARD_NUMBER`: Card number validation with checkSum algorithm(Luhn algorithm), available card lengths for defined card types
472
+ - `CARD_HOLDER_NAME`: Name should be 2 or more symbols, valid characters should match pattern - `^([a-zA-Z\\ \\,\\.\\-\\']{2,})$`
473
+ - `CVV`: Card CVV can have 3-4 digits
474
+ - `EXPIRATION_DATE`: Any date starting from current month. By default valid expiration date should be in short year format - `MM/YY`
475
+ - `PIN`: Can have 4-12 digits
476
+
477
+ #### 2. Custom Validations:
478
+ 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:
479
+ - `REGEX_MATCH_RULE`: You can use this rule to specify any Regular Expression to be matched with the input field value
480
+
481
+ ```javascript
482
+ const regexMatchRule = {
483
+ type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
484
+ params: {
485
+ regex: RegExp,
486
+ error: string // optional, default error is "VALIDATION FAILED"
487
+ }
488
+ }
489
+ ```
490
+
491
+ - `LENGTH_MATCH_RULE`: You can use this rule to set the minimum and maximum permissible length of the input field value
492
+
493
+ ```javascript
494
+ const lengthMatchRule = {
495
+ type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
496
+ params: {
497
+ min : number, // optional
498
+ max : number, // optional
499
+ error: string // optional, default error is "VALIDATION FAILED"
500
+ }
501
+ }
502
+ ```
503
+
504
+ - `ELEMENT_VALUE_MATCH_RULE`: You can use this rule to match the value of one element with another element
505
+
506
+ ```javascript
507
+ const elementValueMatchRule = {
508
+ type: Skyflow.ValidationRuleType.ELEMENT_VALUE_MATCH_RULE,
509
+ params: {
510
+ element: CollectElement,
511
+ error: string // optional, default error is "VALIDATION FAILED"
512
+ }
513
+ }
514
+ ```
515
+
516
+ The Sample code snippet for using custom validations:
517
+
518
+ ```javascript
519
+ /*
520
+ A simple example that illustrates custom validations.
521
+ Adding REGEX_MATCH_RULE , LENGTH_MATCH_RULE to collect element.
522
+ */
523
+
524
+ // this rule allows 1 or more alphabets
525
+ const alphabetsOnlyRegexRule = {
526
+ type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
527
+ params:{
528
+ regex: /^[A-Za-z]+$/,
529
+ error: "Only alphabets are allowed"
530
+ }
531
+ };
532
+
533
+ // this rule allows input length between 4 and 6 characters
534
+ const lengthRule = {
535
+ type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
536
+ params:{
537
+ min: 4,
538
+ max: 6,
539
+ error: "Must be between 4 and 6 alphabets"
540
+ }
541
+ };
542
+
543
+ const cardHolderNameElement = collectContainer.create({
544
+ table: "pii_fields",
545
+ column: "first_name",
546
+ ...collectStylesOptions,
547
+ label: "Card Holder Name",
548
+ placeholder: "cardholder name",
549
+ type: Skyflow.ElementType.INPUT_FIELD,
550
+ validations: [alphabetsOnlyRegexRule, lengthRule]
551
+ });
552
+
553
+ /*
554
+ Reset PIN - A simple example that illustrates custom validations.
555
+ The below code shows an example of ELEMENT_VALUE_MATCH_RULE
556
+ */
557
+
558
+ // for the PIN element
559
+ const pinElement = collectContainer.create({
560
+ label: "PIN",
561
+ placeholder: "****",
562
+ type: Skyflow.ElementType.PIN,
563
+ });
564
+
565
+ // this rule allows to match the value with pinElement
566
+ let elementMatchRule = {
567
+ type: Skyflow.ValidationRuleType.ELEMENT_VALUE_MATCH_RULE,
568
+ params:{
569
+ element: pinElement,
570
+ error: "PIN doesn't match"
571
+ }
572
+ }
573
+ const confirmPinElement = collectContainer.create({
574
+ label: "Confirm PIN",
575
+ placeholder: "****",
576
+ type: Skyflow.ElementType.PIN,
577
+ validations: [elementMatchRule]
578
+ });
579
+
580
+ // mount elements on screen - errors will be shown if any of the validaitons fail
581
+ pinElement.mount("#collectPIN");
582
+ confirmPinElement.mount("#collectConfirmPIN");
431
583
 
584
+ ```
432
585
  ### Event Listener on Collect Elements
433
586
 
434
587
 
@@ -468,7 +621,7 @@ values of SkyflowElements will be returned in elementstate object only when `env
468
621
 
469
622
  ##### Sample code snippet for using listeners
470
623
  ```javascript
471
- //create skyflow client with loglevel:"DEBUG"
624
+ //create skyflow client
472
625
  const skyflowClient = Skyflow.init({
473
626
  vaultID: <VAULT_ID>,
474
627
  vaultURL: <VAULT_URL>,
@@ -518,12 +671,70 @@ cardNumber.on(Skyflow.EventName.CHANGE,(state) => {
518
671
  }
519
672
  ```
520
673
 
674
+ ### UI Error for Collect Elements
675
+
676
+ Helps to display custom error messages on the Skyflow Elements through the methods `setError` and `resetError` on the elements.
677
+
678
+ `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.
679
+
680
+ `resetError()` method is used to clear the custom error message that is set using `setError`.
681
+
682
+ ##### Sample code snippet for setError and resetError
683
+
684
+ ```javascript
685
+
686
+ const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
687
+
688
+ const cardNumber = container.create({
689
+ table: "pii_fields",
690
+ column: "primary_card.card_number",
691
+ type: Skyflow.ElementType.CARD_NUMBER,
692
+ });
693
+
694
+ //Set custom error
695
+ cardNumber.setError("custom error");
696
+
697
+ //reset custom error
698
+ cardNumber.resetError();
699
+
700
+ ```
701
+
702
+ ### Set and Clear value for Collect Elements (DEV ENV ONLY)
703
+
704
+ `setValue(value: string)` method is used to set the value of the element. This method will override any previous value present in the element.
705
+
706
+ `clearValue()` method is used to reset the value of the element.
707
+
708
+ `Note:` This methods are only available in DEV env for testing/developmental purposes and MUST NOT be used in PROD env.
709
+
710
+ ##### Sample code snippet for setValue and clearValue
711
+
712
+ ```javascript
713
+ const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
714
+
715
+ const cardNumber = container.create({
716
+ table: "pii_fields",
717
+ column: "primary_card.card_number",
718
+ type: Skyflow.ElementType.CARD_NUMBER,
719
+ });
720
+
721
+ // Set a value programatically
722
+ cardNumber.setValue("4111111111111111");
723
+
724
+ // Clear the value
725
+ cardNumber.clearValue();
726
+
727
+ ```
728
+
521
729
  ---
522
730
 
523
731
 
524
732
  # Securely revealing data client-side
525
733
  - [**Retrieving data from the vault**](#retrieving-data-from-the-vault)
526
734
  - [**Using Skyflow Elements to reveal data**](#using-skyflow-elements-to-reveal-data)
735
+ - [**UI Error for Reveal Elements**](#ui-error-for-reveal-elements)
736
+ - [**Set token for Reveal Elements**](#set-token-for-reveal-elements)
737
+ - [**Set and clear altText for Reveal Elements**](#set-and-clear-alttext-for-reveal-elements)
527
738
 
528
739
  ## Retrieving data from the vault
529
740
 
@@ -533,7 +744,7 @@ For non-PCI use-cases, retrieving data from the vault and revealing it in the br
533
744
  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.
534
745
 
535
746
  ```javascript
536
- var records = {
747
+ const records = {
537
748
  "records": [
538
749
  {
539
750
  token: "string", // token for the record to be fetched
@@ -657,7 +868,7 @@ const revealElement = {
657
868
  inputStyles: {}, //optional styles to be applied to the element
658
869
  labelStyles: {}, //optional, styles to be applied to the label of the reveal element
659
870
  errorTextStyles: {}, //optional styles that will be applied to the errorText of the reveal element
660
- label: "string", //label for the form element
871
+ label: "string", //optional, label for the form element
661
872
  altText: "string" //optional, string that is shown before reveal, will show token if altText is not provided
662
873
  }
663
874
  ```
@@ -799,6 +1010,65 @@ The response below shows that some tokens assigned to the reveal elements get re
799
1010
  }
800
1011
  ```
801
1012
 
1013
+ ### UI Error for Reveal Elements
1014
+ Helps to display custom error messages on the Skyflow Elements through the methods `setError` and `resetError` on the elements.
1015
+
1016
+ `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.
1017
+
1018
+ `resetError()` method is used to clear the custom error message that is set using `setError`.
1019
+
1020
+ ##### Sample code snippet for setError and resetError
1021
+
1022
+ ```javascript
1023
+
1024
+ const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
1025
+
1026
+ const cardNumber = container.create({
1027
+ token: "89024714-6a26-4256-b9d4-55ad69aa4047",
1028
+ });
1029
+
1030
+ //Set custom error
1031
+ cardNumber.setError("custom error");
1032
+
1033
+ //reset custom error
1034
+ cardNumber.resetError();
1035
+
1036
+ ```
1037
+ ### Set token for Reveal Elements
1038
+
1039
+ 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.
1040
+
1041
+ ##### Sample code snippet for setToken
1042
+ ```javascript
1043
+ const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
1044
+
1045
+ const cardNumber = container.create({
1046
+ altText:"Card Number",
1047
+ });
1048
+
1049
+ // set token
1050
+ cardNumber.setToken("89024714-6a26-4256-b9d4-55ad69aa4047");
1051
+
1052
+ ```
1053
+ ### Set and Clear altText for Reveal Elements
1054
+ 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.
1055
+
1056
+ `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.
1057
+ ##### Sample code snippet for setAltText and clearAltText
1058
+
1059
+ ```javascript
1060
+ const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
1061
+
1062
+ const cardNumber = container.create({
1063
+ token:"89024714-6a26-4256-b9d4-55ad69aa4047",
1064
+ });
1065
+
1066
+ // set altText
1067
+ cardNumber.setAltText("Card Number");
1068
+
1069
+ //clear altText
1070
+ cardNumber.clearAltText();
1071
+ ```
802
1072
  # Securely invoking Connections client-side
803
1073
  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.
804
1074
 
@@ -828,7 +1098,7 @@ const response = skyflowClient.invokeConnection(connectionConfig);
828
1098
  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
829
1099
 
830
1100
  **responseBody**:
831
- 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.
1101
+ 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.
832
1102
 
833
1103
  Sample use-cases on using invokeConnection():
834
1104
 
@@ -839,8 +1109,6 @@ Merchant acceptance - customers should be able to complete payment checkout with
839
1109
  ```javascript
840
1110
  // step 1
841
1111
  const skyflowClient = skyflow.init({
842
- vaultID: <vault_Id>,
843
- vaultURL: <vault_url>,
844
1112
  getBearerToken: <helperFunc>
845
1113
  });
846
1114
 
@@ -890,8 +1158,6 @@ In the above example, CVV is being collected from the user input at the time of
890
1158
  ```javascript
891
1159
  // step 1
892
1160
  const skyflowClient = skyflow.init({
893
- vaultID: <vault_Id>,
894
- vaultURL: <vault_url>,
895
1161
  getBearerToken: <helperFunc>
896
1162
  });
897
1163
 
@@ -941,4 +1207,164 @@ Sample Response:
941
1207
 
942
1208
  `Note`:
943
1209
  - `token` is optional for creating reveal element, if it is used for invokeConnection
944
- - responseBody contains collect or reveal elements to render the response from the Connection on UI
1210
+ - responseBody contains collect or reveal elements to render the response from the Connection on UI
1211
+
1212
+ # Securely invoking Connections client-side using SOAP
1213
+
1214
+ To invoke Connections using SOAP, use the `invokeSoapConnection(connectionConfig)` method of the Skyflow client as shown below:
1215
+
1216
+ ```javascript
1217
+ const connectionConfig = {
1218
+ connectionURL: string, // connection url received when creating a Skyflow Connection
1219
+ httpHeaders: any, // optional
1220
+ requestXML: string,
1221
+ responseXML: string, // optional
1222
+ }
1223
+
1224
+ const response = skyflowClient.invokeSoapConnection(connectionConfig);
1225
+ ```
1226
+
1227
+ **httpHeaders** is the JSON object containing key-value pairs that are sent as request headers.
1228
+
1229
+ `Note:` "X-Skyflow-Authorization" key is added in headers by SDK internally. If user specifies it again, it overrides.
1230
+
1231
+ **requestXML** accepts the entire XML request as a string.
1232
+
1233
+ 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.
1234
+
1235
+ **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.
1236
+
1237
+ `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.
1238
+
1239
+ 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.
1240
+
1241
+ ```javascript
1242
+
1243
+ // step 1
1244
+ const skyflowClient = skyflow.init({
1245
+ getBearerToken: '<helperFunc>'
1246
+ });
1247
+
1248
+ // step 2
1249
+ const revealContainer = skyflowClient.container(Skyflow.ContainerType.REVEAL)
1250
+ const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT)
1251
+
1252
+
1253
+ // step 3
1254
+ const cardNumberElement = collectContainer.create({
1255
+ type: skyflow.ElementType.CARD_NUMBER
1256
+ })
1257
+ cardNumberElement.mount("#cardNumber")
1258
+
1259
+ const expiryDateElement = collectContainer.create({
1260
+ type: skyflow.ElementType.EXPIRATION_DATE
1261
+ })
1262
+ expiryDateElement.mount("#expirationDate")
1263
+
1264
+ const cvvElement = revealContainer.create({
1265
+ altText: "###",
1266
+ })
1267
+ cvvElement.mount("#cvv")
1268
+
1269
+ //step 4
1270
+ const cardNumberID = cardNumberElement.getID() // to get element ID
1271
+ const expiryDateID = expiryDateElement.getID()
1272
+ const cvvElementID = cvvElement.getID()
1273
+
1274
+ // step 5
1275
+ const requestXML = `<soapenv:Envelope>
1276
+ <soapenv:Header>
1277
+ <ClientID>1234</ClientID>
1278
+ </soapenv:Header>
1279
+ <soapenv:Body>
1280
+ <GenerateCVV>
1281
+ <CardNumber>
1282
+ <Skyflow>${cardNumberID}</Skyflow>
1283
+ </CardNumber>
1284
+ <ExpiryDate>
1285
+ <Skyflow>${expiryDateID}</Skyflow>
1286
+ </ExpiryDate>
1287
+ </GenerateCVV>
1288
+ </soapenv:Body>
1289
+ </soapenv:Envelope>`
1290
+
1291
+
1292
+ const responseXML = `<soapenv:Envelope>
1293
+ <soapenv:Header>
1294
+ <HeaderList>
1295
+ <HeaderItem>
1296
+ <Name>NodeId</Name>
1297
+ <Value>
1298
+ <Skyflow>${revealNodeId}</Skyflow>
1299
+ </Value>
1300
+ </HeaderItem>
1301
+ <HeaderItem>
1302
+ <Name>ProgramId</Name>
1303
+ <Value>
1304
+ <Skyflow>${revealProgramId}</Skyflow>
1305
+ </Value>
1306
+ </HeaderItem>
1307
+ </HeaderList>
1308
+ <ClientID>1234</ClientID>
1309
+ </soapenv:Header>
1310
+ <soapenv:Body>
1311
+ <GenerateCVV>
1312
+ <CVV>
1313
+ <Skyflow>${cvvElementID}</Skyflow>
1314
+ </CVV>
1315
+ </GenerateCVV>
1316
+ </soapenv:Body>
1317
+ </soapenv:Envelope>`
1318
+
1319
+ const headers = {
1320
+ soapAction: '<soap_action>', // any http headers can be added here
1321
+ }
1322
+
1323
+ const connectionConfig = {
1324
+ connectionURL: '<connection_url>',
1325
+ httpHeaders: headers,
1326
+ requestXML: requestXML,
1327
+ responseXML: responseXML,
1328
+ }
1329
+
1330
+ const response = skyflowClient.invokeSoapConnection(connectionConfig);
1331
+
1332
+ ```
1333
+
1334
+ Sample Response on success:
1335
+
1336
+ ```xml
1337
+ <soapenv:Envelope>
1338
+ <soapenv:Header>
1339
+ <HeaderList>
1340
+ <HeaderItem>
1341
+ <Name>NodeId</Name>
1342
+ </HeaderItem>
1343
+ <HeaderItem>
1344
+ <Name>ProgramId</Name>
1345
+ </HeaderItem>
1346
+ </HeaderList>
1347
+ </soapenv:Header>
1348
+ <soapenv:Body>
1349
+ <GenerateCVV>
1350
+ <ReceivedTimestamp>2019-05-29 21:49:56.625</ReceivedTimestamp>
1351
+ </GenerateCVV>
1352
+ </soapenv:Body>
1353
+ </soapenv:Envelope>
1354
+ ```
1355
+
1356
+ Sample Response on failure:
1357
+
1358
+ ```javascript
1359
+ {
1360
+ code: '<error_code>',
1361
+ description: '<error_description>',
1362
+ xml: '<xml_received_from_server>'
1363
+ }
1364
+ ```
1365
+
1366
+ `Note`: In responseXML we provide the tags that needs to be rendered in UI and stripped out from the actual response.
1367
+ 1. For uniquely identifiable tag, we can give the elementID within a skyflow tag directly corresponding to the actual value.
1368
+ Please refer to the CVV tag in the above example. Here, we wish to strip the actual value present within the CVV tag.
1369
+ 2. For arrays, since we have multiple tags with the same name, we will need to provide identifiers to uniquely identify the required tag.
1370
+ 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.