How to securely capture your users’ sensitive data with VGS Collect

With current payment card industry (PCI) regulations and growing numbers of sensitive and personal data leaks, there is increasingly high demand for dependable security solutions that protect your customers’ personal data. It’s imperative that companies shield their users’ information from the very first interaction with your application, when customers often enter their most sensitive data.

Today, we’re excited to share our simple, easy-to-implement solution: VGS Collect. With the launch of VGS Collect, we are demonstrating how quickly and easily you can apply our technology to your application without needing to implement anything else around the existing infrastructure.

With VGS Collect, sensitive customer data is quickly gathered from a merchant site before being securely transmitted to VGS. We execute this safe transfer by using Secure Socket Layer/Transport Layer Security (SSL/TLS) technology, establishing an encrypted link between a web server and a browser. VGS takes on the responsibility and liability of securing your sensitive data, thus eliminating the risk of data breaches while reducing your compliance overhead.

Getting started with VGS Collect

What is VGS Collect, exactly? It’s a javascript library that enables you to integrate secure fields with non-secure fields on your page. The secure fields behave like traditional input fields while preventing access to the unsecured data.

By allowing you to control the styling and the types of fields, we generate a secure iframe for every field and isolate sensitive information from your application.

Integrating VGS Collect library into your application is just a few simple steps.

First, sign up for the VGS Dashboard, where you will be given a pre-created organization and vault. Then, navigate to the “VGS Collect” page, which can be found in “Integration.”

You should see your organization’s library link, short instructions, and useful links. If you don’t see a generated link, please wait a bit since it can take a moment to fully process your personal link.

You can copy and include the generated JS file into your application. The link consists of a common path and your unique organization id:

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

Initialize it in your application code, as seen in the example.

const form = VGSCollect.create(<vault-id>, function(state) {});

And, finally, configure:

// Create VGS Collect field for credit card name
  form.field('#cc-name', {
    type: 'text',
    name: 'card_name',
    placeholder: 'Joe Business',
    validations: ['required'],
  });

  // Create VGS Collect field for credit card number
  form.field('#cc-number', {
    type: 'card-number',
    name: 'card_number',
    successColor: '#4F8A10',
    errorColor: '#D8000C',
    placeholder: '4111 1111 1111 1111',
    validations: ['required', 'validCardNumber'],
  });

  // Create VGS Collect field for CVC
  form.field('#cc-cvc', {
    type: 'card-security-code',
    name: 'card_cvc',
    placeholder: '344',
    validations: ['required', 'validCardSecurityCode'],
  });

  // Create VGS Collect field for credit card expiration date
  form.field('#cc-expiration-date', {
    type: 'card-expiration-date',
    name: 'card_expirationDate',
    placeholder: '01 / 2016',
    validations: ['required', 'validCardExpirationDate']
  });

Go to the Access Logs page. Enable “Record Payloads” so that, after you submit your form, VGS will be able to capture your requested payload. You can then choose from the log which fields you want to secure. Submit your form and open the request in the Access Logs list. You should see your data in the request body.

Click “secure this payload” and choose the sensitive fields you want to secure.

After saving filters, the inbound connection is established and your VGS Collect is completely integrated. That’s it.

To test it, we sent requests again and checked out an access log request. Along with all other fields, we successfully secured our sensitive fields and can now see aliases instead of the raw data.

After testing in the sandbox environment, you can go live. Copy all the configurations and you can now send live data!

How to customize VGS Collect

The most exciting part of VGS Collect is the ability to choose the type of secure fields, enabling you to make them consistent, with the existing styles of your page. You can also add custom placeholders and validations. The full list of available configurations can be found in our docs.

Field customization example:

form.field('#cc-number', {
  'successColor': '#3c763d',
  'errorColor': '#a94442',
  'lineHeight': '1.5rem',
  'fontSize': '24px',
  'fontFamily': 'Comic Sans',
  'color': '#31708f',
  'placeholder': 'Card number',
  'name': 'cc-number',
  'type': 'card-number',
  'validations: ['required', 'validCardNumber'],
});

Also, feel free to use this repository, which is filled with examples. You can play around with various stylings and fields as you explore this technology’s flexibility.

Why use VGS Collect for your integration?

Anyone involved with the processing, transmission, or storage of card data must comply with the Payment Card Industry Data Security Standards (PCI DSS). With VGS Collect, your application seamlessly achieves PCI regulations, because no sensitive data hits your servers. Currently, customers with web applications wanting to achieve PCI DSS Level 1 Compliance need to use VGS Collect.

VGS Collect doesn't stop with just achieving PCI Level 1, however, as it is capable of collecting any and all sensitive data.

Additionally, with VGS, after you’ve collected and stored your sensitive data, you can easily manage interaction with third parties, without worrying about potential data breaches.

Useful references

• VGS Collect documentation
• Use cases example page
• Use cases code examples:
  -- Credit Card code example
  -- Shipping Info code example
  -- Login Data code example
  -- PII code example