Skip to content

SK-1430 readme and sample add continue on error option in insert batch operation #386

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skyflow-bharti wants to merge 1 commit into
base: main
Choose a base branch
from
Open

SK-1430 readme and sample add continue on error option in insert batch operation #386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 172 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ For `env` parameter, there are 2 accepted values in Skyflow.Env

## Insert data into the vault

To insert data into the vault, use the `insert(records, options?)` method of the Skyflow client. The `records` parameter takes a JSON object of the records to insert into the below format. The `options` parameter takes an object of optional parameters for the insertion. The `insert` method also supports upsert operations.
To insert data into the vault, use the `insert(records, options?)` method of the Skyflow client. The `records` parameter takes a JSON object of the records to insert into the below format. The `options` parameter takes an object of optional parameters for the insertion. This includes an option to return tokenized data, upsert records and continue on error.

```javascript
const records = {
Expand All @@ -156,13 +156,14 @@ const records = {
};

const options = {
tokens: true, // Indicates whether or not tokens should be returned for the inserted data. Defaults to 'true'
upsert: [ // Upsert operations support in the vault
tokens: true, // Optional, Indicates whether or not tokens should be returned for the inserted data. Defaults to 'true'
upsert: [ // Optional, Upsert operations support in the vault
{
table: 'string', // Table name
column: 'value', // Unique column in the table
}
]
],
continueOnError: true // Optional, decides whether to continue if error encountered or not
}

skyflowClient.insert(records, options);
Expand All @@ -188,6 +189,7 @@ The sample response:
{
"records": [
{
"request_index": 0,
"table": "cards",
"fields":{
"skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882",
Expand All @@ -199,6 +201,59 @@ The sample response:
}
```

### Insert call example with continueOnError option

```javascript
skyflowClient.insert({
records: [
{
table: 'cards',
fields: {
card_number: '41111111111',
cvv: '123',
},
},
{
table: 'cards',
fields: {
expiry_date: '12/2027',
card_number: '411111111111111',
namee: 'jane doe',
},
}
],
},{
tokens: true,
continueOnError: true,
});
```

**Sample Response :**
```javascript
{
"records": [
{
"table": "cards",
"fields": {
"skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882",
"card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
"cvv": "12f670af-6c7d-4837-83fb-30365fbc0b1e"
},
"request_index": 0,
}
],
"errors": [
{
"error": {
"code":400,
"description":"Invalid field present in JSON namee - requestId: 87fb2e32-6287-4e61-8304-9268df12bfe8",
"request_index": 1,
}
}
]
}
```

## Using Skyflow Elements to collect data

**Skyflow Elements** provide developers with pre-built form elements to securely collect sensitive data client-side. These elements are hosted by Skyflow and injected into your web page as iFrames. This reduces your PCI compliance scope by not exposing your front-end application to sensitive data. Follow the steps below to securely collect data with Skyflow Elements on your web page.
Expand Down Expand Up @@ -458,6 +513,7 @@ When the form is ready to be submitted, call the `collect(options?)` method on t
- `tokens`: indicates whether tokens for the collected data should be returned or not. Defaults to 'true'
- `additionalFields`: Non-PCI elements data to be inserted into the vault which should be in the `records` object format as described in the above [Insert data into vault](#insert-data-into-the-vault) section.
- `upsert`: To support upsert operations while collecting data from Skyflow elements, pass the table and column marked as unique in the table.
- `continueOnError`: To decides whether to continue if error encountered or not. Defaults to `false`.

```javascript
const options = {
Expand All @@ -480,6 +536,7 @@ const options = {
column: 'value', // Unique column in the table
},
], // Optional
continueOnError: true // Optional, decides whether to continue if error encountered or not
};

container.collect(options);
Expand Down Expand Up @@ -658,6 +715,117 @@ cvvElement.mount('#cvv'); //Assumes there is a div with id='#cvv' in the webpage
]
}
```

### Insert call example with continueOnError support
**Sample Code**

```javascript
//Step 1
const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)

//Step 2
const cardNumberElement = container.create({
table: 'cards',
column: 'card_number',
inputStyles: {
base: {
color: '#1d1d1d',
},
cardIcon:{
position: 'absolute',
left:'8px',
bottom:'calc(50% - 12px)'
},
},
labelStyles: {
base: {
fontSize: '12px',
fontWeight: 'bold'
}
},
errorTextStyles: {
base: {
color: '#f44336'
}
},
placeholder: 'Card Number',
label: 'card_number',
type: Skyflow.ElementType.CARD_NUMBER
})


const cvvElement = container.create({
table: 'pii_fields',
column: 'cvv',
inputStyles: {
base: {
color: '#1d1d1d',
},
cardIcon:{
position: 'absolute',
left:'8px',
bottom:'calc(50% - 12px)'
},
},
labelStyles: {
base: {
fontSize: '12px',
fontWeight: 'bold'
}
},
errorTextStyles: {
base: {
color: '#f44336'
}
},
placeholder: 'CVV',
label: 'cvv',
type: Skyflow.ElementType.CVV
})

// Step 3
cardNumberElement.mount('#cardNumber') //Assumes there is a div with id='#cardNumber' in the webpage.
cvvElement.mount('#cvv'); //Assumes there is a div with id='#cvv' in the webpage.

// Step 4
container.collect({
tokens: true,
additionalFields: {
records: [
{
table: 'table',
fields: {
"cardholder_nam": 'value',
},
},
},
continueOnError: true,
})
```
**Skyflow returns tokens for the record you just inserted.**
```javascript
{
"records": [
{
"table": "cards",
"fields": {
"skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882",
"cardNumber": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
"cvv": "12f670af-6c7d-4837-83fb-30365fbc0b1e"
}
}
],
"errors": [
{
"error": {
"code": 404,
"description": "Object Name table was not found for Vault - requestId : id1234",
}
}
]
}
```

## Using Skyflow Elements to update data

You can update the data in a vault with Skyflow Elements. Use the following steps to securely update data.
Expand Down
131 changes: 131 additions & 0 deletions samples/using-script-tag/insert-with-continueOnError.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pure Js Insert with continueOnError</title>
<script src="https://js.skyflow.com/v1/index.js"></script>
<style>
.field {
padding: 8px;
}
</style>
</head>
<body>
<div>
<h3>Insert</h3>
<form>
<div id="cardNumberContainer" class="field">
<label for="cardNumber">Card Number</label>
<br />
<input
id="cardNumber"
type="text"
placeholder="card number"
name="cardNumber"
/>
</div>
<div id="cardCvvContainer" class="field">
<label for="cardCvv">CVV</label>
<br />
<input id="cardCvv" type="text" placeholder="cvv" minlength="4" />
</div>
<div id="cardExpiryDateContainer" class="field">
<label>Expiry Date</label>
<br />
<input id="cardExpiry" type="text" placeholder="MM/YYYY" />
</div>
<div id="cardHolderNameContainer" class="field">
<label>Card Holder Name</label>
<br />
<input
id="cardHolderName"
type="text"
placeholder="card holder name"
/>
</div>
<br />
<br />
<button id="insertButton" type="button">Insert</button>
</form>
<div>
<h3>Insert Response</h3>
<pre id="insertResponse"></pre>
</div>
</div>
<br />
<script>
try {
const revealView = document.getElementById('revealView');
revealView.style.visibility = 'hidden';

const skyflow = Skyflow.init({
vaultID: '<VAULT_ID>',
vaultURL: '<VAULT_URL>',
getBearerToken: () => {
return new Promise((resolve, reject) => {
const Http = new XMLHttpRequest();

Http.onreadystatechange = () => {
if (Http.readyState === 4 && Http.status === 200) {
const response = JSON.parse(Http.responseText);
resolve(response.accessToken);
}
};
const url = '<TOKEN_END_POINT_URL>';
Http.open('GET', url);
Http.send();
});
},
});

// form insert request

const insertButton = document.getElementById('insertButton');
if (insertButton) {
insertButton.addEventListener('click', () => {
const cardNumberData = document.getElementById('cardNumber').value;
const cardCvvData = document.getElementById('cardCvv').value;
const cardExpiryData = document.getElementById('cardExpiry').value;
const cardholderNameData =
document.getElementById('cardHolderName').value;
const response = skyflow.insert({
records: [
{
fields: {
primary_card: {
cvv: cardCvvData,
card_number: cardNumberData,
expiry_date: cardExpiryData,
},
first_name: cardholderNameData,
},
table: 'pii_fields',
},
],
}, {
continueOnError: true
});
response
.then(
res => {
document.getElementById('insertResponse').innerHTML =
JSON.stringify(res, null, 2); },
err => {
document.getElementById('insertResponse').innerHTML =
JSON.stringify(err, null, 2);
}
)
.catch(err => {
document.getElementById('insertResponse').innerHTML =
JSON.stringify(err, null, 2);
});
});
}
} catch (err) {
console.log(err);
}
</script>
</body>
</html>
Loading