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.

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

$ npm i @vgs/collect-js

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

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.

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

In order to use our library, it's mandatory to establish an Inbound connection first.

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

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:

* {
  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:

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);
  });
});

JS:

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:

* {
  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%;
}

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 support and describe your problem so we can investigate it and fix.

What's next?

PreviousJS NextIntegration

Last updated 8 days ago