skyflow-js 1.12.0 → 1.13.0

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.
package/CHANGELOG.md CHANGED
@@ -2,11 +2,30 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
4
 
5
+ ## [1.13.0] - 2022-04-05
6
+
7
+ ### Added
8
+ - - support for application/x-www-form-urlencoded and multipart/form-data content-type's in connections
9
+
10
+ ## [1.12.2] - 2022-03-29
11
+
12
+ ### Changed
13
+ - Added validation of JWT token format from TokenProvider
14
+
15
+ ### Fixed
16
+ - Request headers not getting overriden due to case sensitivity
17
+
18
+ ## [1.12.1] - 2022-03-22
19
+
20
+ Fixed
21
+ - Fixes in multiple skyflow clients creation
22
+
5
23
  ## [1.12.0] - 2022-02-24
6
24
 
7
25
  Added
8
26
  - `requestId` in error logs and error responses
9
27
  - add autocomplete for collect elements
28
+
10
29
  ## [1.11.0] - 2022-02-08
11
30
 
12
31
  ### Added
package/README.md CHANGED
@@ -1,15 +1,17 @@
1
1
  # skyflow-js
2
- 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.
2
+ 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.
3
3
 
4
4
  ---
5
5
 
6
+ [![CI](https://img.shields.io/static/v1?label=CI&message=passing&color=green?style=plastic&logo=github)](https://github.com/skyflowapi/skyflow-js/actions)
7
+ [![GitHub release](https://img.shields.io/github/v/release/skyflowapi/skyflow-js.svg)](https://www.npmjs.com/package/skyflow-js)
8
+ [![License](https://img.shields.io/github/license/skyflowapi/skyflow-android)](https://github.com/skyflowapi/skyflow-js/blob/master/LICENSE)
9
+
6
10
  # Table of Contents
7
11
  - [**Including Skyflow.js**](#Including-Skyflowjs)
8
12
  - [**Initializing Skyflow.js**](#Initializing-Skyflowjs)
9
13
  - [**Securely collecting data client-side**](#Securely-collecting-data-client-side)
10
14
  - [**Securely revealing data client-side**](#Securely-revealing-data-client-side)
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)
13
15
 
14
16
  ---
15
17
 
@@ -157,7 +159,7 @@ skyflowClient.insert(records, options={})
157
159
 
158
160
 
159
161
 
160
- An example of an insert call:
162
+ An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/purejs.html) of an insert call:
161
163
  ```javascript
162
164
  skyflowClient.insert({
163
165
  "records": [
@@ -394,7 +396,7 @@ container.collect(options={})
394
396
 
395
397
  ### End to end example of collecting data with Skyflow Elements
396
398
 
397
- **Sample Code:**
399
+ **[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/skyflowElements.html)**
398
400
 
399
401
  ```javascript
400
402
  //Step 1
@@ -513,7 +515,7 @@ const elementValueMatchRule = {
513
515
  }
514
516
  ```
515
517
 
516
- The Sample code snippet for using custom validations:
518
+ The Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/CustomValidations.html) for using custom validations:
517
519
 
518
520
  ```javascript
519
521
  /*
@@ -619,7 +621,7 @@ state : {
619
621
  `Note:`
620
622
  values of SkyflowElements will be returned in elementstate object only when `env` is `DEV`, else it is empty string i.e, ''
621
623
 
622
- ##### Sample code snippet for using listeners
624
+ ##### Sample [code snippet](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/CollectElementListeners.html) for using listeners
623
625
  ```javascript
624
626
  //create skyflow client
625
627
  const skyflowClient = Skyflow.init({
@@ -741,7 +743,7 @@ cardNumber.clearValue();
741
743
  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
742
744
 
743
745
  - ### Using Skyflow tokens
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.
746
+ 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.
745
747
 
746
748
  ```javascript
747
749
  const records = {
@@ -754,7 +756,7 @@ const records = {
754
756
 
755
757
  skyflow.detokenize(records)
756
758
  ```
757
- An example of a detokenize call:
759
+ An [example](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/purejs.html) of a detokenize call:
758
760
 
759
761
  ```javascript
760
762
  skyflow.detokenize({
@@ -779,7 +781,7 @@ The sample response:
779
781
  ```
780
782
 
781
783
  - ### Using Skyflow ID's
782
- 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.
784
+ 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.
783
785
 
784
786
  ```javascript
785
787
  {
@@ -936,6 +938,7 @@ container.reveal()
936
938
 
937
939
  ### End to end example of all steps
938
940
 
941
+ **[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/master/samples/UsingScriptTag/skyflowElements.html)**
939
942
  ```javascript
940
943
  //Step 1
941
944
  const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
@@ -1070,315 +1073,3 @@ cardNumber.setAltText("Card Number");
1070
1073
  //clear altText
1071
1074
  cardNumber.clearAltText();
1072
1075
  ```
1073
- # Securely invoking Connections client-side
1074
- 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.
1075
-
1076
- ```javascript
1077
- const connectionConfig = {
1078
- connectionURL: string, // connection url recevied when creating a skyflow Connection integration
1079
- methodName: Skyflow.RequestMethod,
1080
- pathParams: any, // optional
1081
- queryParams: any, // optional
1082
- requestHeader: any, // optional
1083
- requestBody: any, // optional
1084
- responseBody: any // optional
1085
- }
1086
-
1087
- const response = skyflowClient.invokeConnection(connectionConfig);
1088
- ```
1089
- `methodName` supports the following methods:
1090
-
1091
- - GET
1092
- - POST
1093
- - PUT
1094
- - PATCH
1095
- - DELETE
1096
-
1097
- **pathParams, queryParams, requestHeader, requestBody** are the JSON objects that will be sent through the Connection integration url.
1098
-
1099
- 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
1100
-
1101
- **responseBody**:
1102
- 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.
1103
-
1104
- Sample use-cases on using invokeConnection():
1105
-
1106
- ### Sample use-case 1:
1107
-
1108
- 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
1109
-
1110
- ```javascript
1111
- // step 1
1112
- const skyflowClient = skyflow.init({
1113
- getBearerToken: <helperFunc>
1114
- });
1115
-
1116
- // step 2
1117
- const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT)
1118
-
1119
- // step 3
1120
- const cardNumberElement = collectContainer.create({
1121
- type: skyflow.ElementType.CARD_NUMBER
1122
- })
1123
- cardNumberElement.mount("#cardNumber")
1124
-
1125
- const cvvElement = collectContainer.create({
1126
- type: skyflow.ElementType.CVV
1127
- })
1128
- cvvElement.mount("#cvv")
1129
-
1130
- // step 4
1131
- const connectionConfig = {
1132
- connectionURL: <connection_url>,
1133
- methodName: Skyflow.RequestMethod.POST,
1134
- requestBody: {
1135
- card_number: cardNumberElement, //it can be skyflow element(collect or reveal) or actual value
1136
- cvv: cvvElement,
1137
- }
1138
- }
1139
-
1140
- const response = skyflowClient.invokeConnection(connectionConfig);
1141
- ```
1142
-
1143
- Sample Response:
1144
- ```javascript
1145
- {
1146
- "receivedTimestamp": "2019-05-29 21:49:56.625",
1147
- "processingTimeinMs": 116
1148
- }
1149
- ```
1150
- In the above example, CVV is being collected from the user input at the time of checkout and not stored anywhere in the vault
1151
-
1152
- `Note:`
1153
- - card_number can be either container element or plain text value (tokens or actual value)
1154
- - `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
1155
-
1156
- ### Sample use-case 2:
1157
-
1158
- Card issuance - customers want to issue cards from card issuer service and should generate the CVV dynamically without increasing their PCI scope.
1159
- ```javascript
1160
- // step 1
1161
- const skyflowClient = skyflow.init({
1162
- getBearerToken: <helperFunc>
1163
- });
1164
-
1165
- // step 2
1166
- const revealContainer = skyflowClient.container(Skyflow.ContainerType.REVEAL)
1167
- const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT)
1168
-
1169
- // step 3
1170
- const cvvElement = revealContainer.create({
1171
- altText: "###",
1172
- })
1173
- cvvElement.mount("#cvv")
1174
-
1175
- const expiryDateElement = collectContainer.create({
1176
- type: skyflow.ElementType.EXPIRATION_DATE
1177
- })
1178
- expiryDateElement.mount("#expirationDate")
1179
-
1180
- //step 4
1181
- const connectionConfig = {
1182
- connectionURL: <connection_url>,
1183
- methodName: Skyflow.RequestMethod.POST,
1184
- pathParams: {
1185
- card_number: "0905-8672-0773-0628" //it can be skyflow element(collect/reveal) or token or actual value
1186
- },
1187
- requestBody: {
1188
- expirationDate: expiryDateElement //it can be skyflow element(collect/reveal) or token or actual value
1189
- },
1190
- responseBody: {
1191
- resource: {
1192
- cvv2: cvvElement // pass the element where the cvv response from the Connection will be mounted
1193
- }
1194
- }
1195
- }
1196
- }
1197
-
1198
- const response = skyflowClient.invokeConnection(connectionConfig);
1199
- ```
1200
-
1201
- Sample Response:
1202
- ```javascript
1203
- {
1204
- "receivedTimestamp": "2019-05-29 21:49:56.625",
1205
- "processingTimeinMs": 116
1206
- }
1207
- ```
1208
-
1209
- `Note`:
1210
- - `token` is optional for creating reveal element, if it is used for invokeConnection
1211
- - responseBody contains collect or reveal elements to render the response from the Connection on UI
1212
-
1213
- # Securely invoking Connections client-side using SOAP
1214
-
1215
- To invoke Connections using SOAP, use the `invokeSoapConnection(connectionConfig)` method of the Skyflow client as shown below:
1216
-
1217
- ```javascript
1218
- const connectionConfig = {
1219
- connectionURL: string, // connection url received when creating a Skyflow Connection
1220
- httpHeaders: any, // optional
1221
- requestXML: string,
1222
- responseXML: string, // optional
1223
- }
1224
-
1225
- const response = skyflowClient.invokeSoapConnection(connectionConfig);
1226
- ```
1227
-
1228
- **httpHeaders** is the JSON object containing key-value pairs that are sent as request headers.
1229
-
1230
- `Note:` "X-Skyflow-Authorization" key is added in headers by SDK internally. If user specifies it again, it overrides.
1231
-
1232
- **requestXML** accepts the entire XML request as a string.
1233
-
1234
- 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.
1235
-
1236
- **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.
1237
-
1238
- `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.
1239
-
1240
- 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.
1241
-
1242
- ```javascript
1243
-
1244
- // step 1
1245
- const skyflowClient = skyflow.init({
1246
- vaultID: '<vault_ID>', // optional
1247
- vaultURL: '<vault_URL>', // optional
1248
- getBearerToken: '<helperFunc>'
1249
- });
1250
-
1251
- // step 2
1252
- const revealContainer = skyflowClient.container(Skyflow.ContainerType.REVEAL)
1253
- const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT)
1254
-
1255
-
1256
- // step 3
1257
- const cardNumberElement = collectContainer.create({
1258
- type: skyflow.ElementType.CARD_NUMBER
1259
- })
1260
- cardNumberElement.mount("#cardNumber")
1261
-
1262
- const expiryMonthElement = revealContainer.create({
1263
- token: "<expiry_month_token>"
1264
- })
1265
- expiryMonthElement.mount("#expirationMonth")
1266
-
1267
- const expiryYearElement = revealContainer.create({
1268
- token: "<expiry_year_token>"
1269
- })
1270
- expiryYearElement.mount("#expirationYear")
1271
-
1272
-
1273
- const cvvElement = revealContainer.create({
1274
- altText: "###",
1275
- })
1276
- cvvElement.mount("#cvv")
1277
-
1278
- //step 4
1279
- const cardNumberID = cardNumberElement.getID() // to get element ID
1280
- const expiryMonthID = expiryDateElement.getID()
1281
- const expiryYearID = expiryYearElement.getID()
1282
- const cvvElementID = cvvElement.getID()
1283
-
1284
- // step 5
1285
- const requestXML = `<soapenv:Envelope>
1286
- <soapenv:Header>
1287
- <ClientID>1234</ClientID>
1288
- </soapenv:Header>
1289
- <soapenv:Body>
1290
- <GenerateCVV>
1291
- <CardNumber>
1292
- <Skyflow>${cardNumberID}</Skyflow>
1293
- </CardNumber>
1294
- <ExpiryMonth>
1295
- <Skyflow>${expiryMonthID}</Skyflow>
1296
- </ExpiryMonth>
1297
- <ExpiryYear>
1298
- <Skyflow>${expiryYearID}</Skyflow>
1299
- </ExpiryYear>
1300
- </GenerateCVV>
1301
- </soapenv:Body>
1302
- </soapenv:Envelope>`
1303
-
1304
-
1305
- const responseXML = `<soapenv:Envelope>
1306
- <soapenv:Header>
1307
- <HeaderList>
1308
- <HeaderItem>
1309
- <Name>NodeId</Name>
1310
- <Value>
1311
- <Skyflow>${revealNodeId}</Skyflow>
1312
- </Value>
1313
- </HeaderItem>
1314
- <HeaderItem>
1315
- <Name>ProgramId</Name>
1316
- <Value>
1317
- <Skyflow>${revealProgramId}</Skyflow>
1318
- </Value>
1319
- </HeaderItem>
1320
- </HeaderList>
1321
- <ClientID>1234</ClientID>
1322
- </soapenv:Header>
1323
- <soapenv:Body>
1324
- <GenerateCVV>
1325
- <CVV>
1326
- <Skyflow>${cvvElementID}</Skyflow>
1327
- </CVV>
1328
- </GenerateCVV>
1329
- </soapenv:Body>
1330
- </soapenv:Envelope>`
1331
-
1332
- const headers = {
1333
- soapAction: '<soap_action>', // any http headers can be added here
1334
- }
1335
-
1336
- const connectionConfig = {
1337
- connectionURL: '<connection_url>',
1338
- httpHeaders: headers,
1339
- requestXML: requestXML,
1340
- responseXML: responseXML,
1341
- }
1342
-
1343
- const response = skyflowClient.invokeSoapConnection(connectionConfig);
1344
-
1345
- ```
1346
-
1347
- Sample Response on success:
1348
-
1349
- ```xml
1350
- <soapenv:Envelope>
1351
- <soapenv:Header>
1352
- <HeaderList>
1353
- <HeaderItem>
1354
- <Name>NodeId</Name>
1355
- </HeaderItem>
1356
- <HeaderItem>
1357
- <Name>ProgramId</Name>
1358
- </HeaderItem>
1359
- </HeaderList>
1360
- </soapenv:Header>
1361
- <soapenv:Body>
1362
- <GenerateCVV>
1363
- <ReceivedTimestamp>2019-05-29 21:49:56.625</ReceivedTimestamp>
1364
- </GenerateCVV>
1365
- </soapenv:Body>
1366
- </soapenv:Envelope>
1367
- ```
1368
-
1369
- Sample Response on failure:
1370
-
1371
- ```javascript
1372
- {
1373
- code: '<error_code>',
1374
- description: '<error_description>',
1375
- xml: '<xml_received_from_server>'
1376
- }
1377
- ```
1378
-
1379
- `Note`:
1380
- - In responseXML we provide the tags that needs to be rendered in UI and stripped out from the actual response.
1381
- 1. For uniquely identifiable tag, we can give the elementID within a skyflow tag directly corresponding to the actual value.
1382
- Please refer to the CVV tag in the above example. Here, we wish to strip the actual value present within the CVV tag.
1383
- 2. For arrays, since we have multiple tags with the same name, we will need to provide identifiers to uniquely identify the required tag.
1384
- 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.