# Getting Started

VGS Collect.js is a JavaScript library that allows you to securely collect data via any form. Instantly create custom forms that adhere to PCI, HIPAA, GDPR, or CCPA security requirements. VGS intercepts sensitive data before it hits your servers and replaces it with aliased versions while securing the original data in our vault. The form fields behave like traditional forms while preventing access to the unsecured data by injecting secure iframe components.

### Quick Start

The library is easy to integrate; you just need to designate the places where our fields will be inserted and initialize the Collect form in JS.

Let's start! First and foremost, include the JS file in your application.

{% tabs %}
{% tab title="CDN" %}

```
<script type="text/javascript" src="https://js.verygoodvault.com/vgs-collect/3.2.2/vgs-collect.js"></script>
```

{% endtab %}

{% tab title="NPM" %}

```bash
$ npm i @vgs/collect-js
```

{% endtab %}
{% endtabs %}

Then, initialize the VGS Collect form inside your JS file and pass the vault ID as the first argument to the .create() method.

```javascript
const form = VGSCollect.create('tntsfeqzp4a','sandbox', (state) => {});
```

JavaScript

Once the fields are initialized, VGS Collect.js communicates the state of the fields through a JavaScript callback. The callback returns the current form state as an argument, which contains a lot of useful information about the current field's condition. You can find more information about the form state [here](/vault/developer-tools/vgs-collect/js/reference-documentation.md#state-object).

Finally, create a field instance and configure the submit method.

In order to use our library, it's mandatory to establish an [Inbound connection](/vault/http-proxy/inbound-connection.md) first.

```javascript
form.field('#cc-number', {
  type: 'card-number',
  name: 'card_number',
  placeholder: 'Card number',
  showCardIcon: true,
  validations: ['required', 'validCardNumber'],
  css: { border: '1px solid gray' },
});
form.submit('/post', {}, (status, response) => {
    console.log(response);
});
```

### Full integration example

{% tabs %}
{% tab title="HTML/JS" %}
HTML:

```html
<script type="text/javascript" src="https://js.verygoodvault.com/vgs-collect/3.2.2/vgs-collect.js"></script>
<form id="collect-form">
  <div id="cc-holder" class="form-field"></div>
  <div id="cc-number" class="form-field"></div>
  <div class="form-field-group">
    <div id="cc-expiration-date" class="form-field"></div>
    <div id="cc-cvc" class="form-field"></div>
  </div>
  <button type="submit" className="form-button">Submit</button>
</form>
```

CSS:

```css
* {
  box-sizing: border-box;
}
form {
  width: 300px;
  margin: 0 auto;
}
.form-field {
  width: 100%;
  height: 40px;
  position: relative;
  background: white;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, .3);
  padding: 0 10px;
}
iframe {
  width: 100%;
  height: 100%;
}
.form-field-group {
  display: flex;
  flex-flow: wrap;
}
.form-field-group div {
  flex: 0 0 50%;
}
.form-field-group div:first-child {
  border-radius: 4px 0 0 4px;
}
.form-field-group div:last-child {
  border-radius: 0 4px 4px 0;
}
.form-button {
  border: 1px solid #1f8ab0;
  background-color: #3b495c;
  border-color: #3b495c;
  color: #ced5e0;
  font-family: inherit;
  border-radius: 4px;
  font-size: 16px;
  height: 35px;
  width: 100%;
}
```

JS:

```javascript
const vgsForm = window.VGSCollect.create('tntsfeqzp4a', 'sandbox', () => {});

const css = {
  boxSizing: 'border-box',
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI"',
};

vgsForm.field('#cc-holder', {
  type: 'text',
  name: 'card_holder',
  placeholder: 'Card holder',
  validations: ['required'],
  css: css,
});

vgsForm.field('#cc-number', {
  type: 'card-number',
  name: 'card_number',
  successColor: '#4F8A10',
  errorColor: '#D8000C',
  placeholder: 'Card number',
  showCardIcon: true,
  validations: ['required', 'validCardNumber'],
  css: css,
});

vgsForm.field('#cc-cvc', {
  type: 'card-security-code',
  name: 'card_cvc',
  successColor: '#4F8A10',
  errorColor: '#D8000C',
  placeholder: 'CVC',
  validations: ['required', 'validCardSecurityCode'],
  css: css,
});

vgsForm.field('#cc-expiration-date', {
  type: 'card-expiration-date',
  name: 'card_exp',
  successColor: '#4F8A10',
  errorColor: '#D8000C',
  placeholder: 'MM / YY',
  validations: ['required', 'validCardExpirationDate'],
  css: css,
});

document.getElementById("collect-form").addEventListener('submit', (e) => {
  e.preventDefault();
  vgsForm.submit('/post', {}, (status, response) => {
    if (status === 200) {
      console.log("success");
    }
  }, (error) => {
    console.log(error);
  });
});
```

{% endtab %}

{% tab title="React" %}
JS:

```javascript
import React, { useEffect, useState } from 'react';
import './style.css';

// styles for VGS Collect fields
const styles = {
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI"',
}

const CollectForm = () => {
  const [form, setForm] = useState({});
  const [isLoaded, scriptLoaded] = useState(false);

  // script loading
  useEffect(() => {
    const script = document.createElement("script");
    script.src = 'https://js.verygoodvault.com/vgs-collect/3.2.2/vgs-collect.js';
    script.async = true;
    script.onload = () => scriptLoaded(true);
    document.body.appendChild(script);
  });

  // VGS Collect initialization
  useEffect(() => {
    if (isLoaded) {
      const vgsForm = window.VGSCollect.create('tntsfeqzp4a', 'sandbox', (state) => {
        console.log(state);
      });
      setForm(vgsForm);

      vgsForm.field('#cc-holder', {
        type: 'text',
        name: 'card_holder',
        placeholder: 'Card holder',
        validations: ['required'],
        css: styles,
      });

      vgsForm.field('#cc-number', {
        type: 'card-number',
        name: 'card_number',
        successColor: '#4F8A10',
        errorColor: '#D8000C',
        placeholder: 'Card number',
        showCardIcon: true,
        validations: ['required', 'validCardNumber'],
        css: styles,
      });

      vgsForm.field('#cc-cvc', {
        type: 'card-security-code',
        name: 'card_cvc',
        successColor: '#4F8A10',
        errorColor: '#D8000C',
        placeholder: 'CVC',
        validations: ['required', 'validCardSecurityCode'],
        css: styles,
      });

      vgsForm.field('#cc-expiration-date', {
        type: 'card-expiration-date',
        name: 'card_exp',
        successColor: '#4F8A10',
        errorColor: '#D8000C',
        placeholder: 'MM / YY',
        validations: ['required', 'validCardExpirationDate'],
        css: styles,
      });
    }
  }, [isLoaded]);

  // VGS Collect form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    form.submit(
      '/post',
      {},
      (status, response) => {
        console.log(status, response);
      },
      (error) => {
        console.log(error);
      }
    );
  };

  return (
    <form onSubmit={handleSubmit} className="form">
      <div id="cc-holder" className="form-field"></div>
      <div id="cc-number" className="form-field"></div>
      <div className="form-field-group">
        <div id="cc-expiration-date" className="form-field"></div>
        <div id="cc-cvc" className="form-field"></div>
      </div>
      <button type="submit" className="form-button">Submit</button>
    </form>
  )
}

export default CollectForm;
```

CSS:

```css
* {
  box-sizing: border-box;
}
.form {
  width: 330px;
  margin: 0 auto;
}
.form-field {
  width: 100%;
  height: 40px;
  position: relative;
  background: white;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, .3);
  padding: 0 10px;
}
iframe {
  width: 100%;
  height: 100%;
}
.form-field-group {
  display: flex;
  flex-flow: wrap;
}
.form-field-group div {
  flex: 0 0 50%;
}
.form-field-group div:first-child {
  border-radius: 4px 0 0 4px;
}
.form-field-group div:last-child {
  border-radius: 0 4px 4px 0;
}
.form-button {
  border: 1px solid #1f8ab0;
  background-color: #3b495c;
  border-color: #3b495c;
  color: #ced5e0;
  font-family: inherit;
  border-radius: 4px;
  font-size: 16px;
  height: 35px;
  width: 100%;
}
```

{% endtab %}
{% endtabs %}

### Browser compatibility

* IE 11, Edge
* Chrome latest
* Firefox latest
* Safari 10+

We're happy to help in case of any issues in a particular browser. Please contact us at <support@vgs.io> and describe your problem so we can investigate it and fix.

#### What's next?

* [Integration guide](/vault/developer-tools/vgs-collect/js/integration.md)
* [Customization](/vault/developer-tools/vgs-collect/js/customization.md)
* [Formatting](/vault/developer-tools/vgs-collect/js/formatting.md)
* [Samples](/vault/developer-tools/vgs-collect/js/samples.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verygoodsecurity.com/vault/developer-tools/vgs-collect/js/index.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.