VGS Collect.js

  1. How do I separate the expiration date for month and year?
    • You can find our cookbook example here.
  2. How can I get a VGS Collect.js file?
    • You can find your file on the VGS Collect tab on a Dashboard or ask customer support to generate a JS file for your organization.
  3. What level of PCI Compliance can I achieve using VGS Collect.js?
    • This library is an easy way to achieve PCI Compliance level 1 and protect sensitive data.
  4. Can I get a raw data from the inputs?
    • No, you can’t. The data is isolated from your application.
  5. Is it possible to style VGS Collect.js fields?
    • You can customize input appearance passing CSS rules as an argument property to the form.field() method. More details you can find here.
  6. Does library support non-generic Web Fonts?
    • Unfortunately, right now you can use only generic Web Fonts to customize your form, but we’re working on it.
  7. Can I integrate the library with React, React Native, Angular, VueJS applications?
    • Yes, you can find integration examples here.
  8. How can I get the BIN (first 6 digits) and last 4 digits of credit card?
    • In VGS Collect.js you can get it from the form state:
      VGSCollect.create('<tenant_id>', function (state) {
          const last4 = state['<field_name>'].last4;
          const bin = state['<filed_name>'].bin;
  9. Should I add CSP to my application?
    • We strongly recommend to add the CSP to your application. Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. Please create CSP directives for the following domain:
      connect-src  https://js.verygoodvault.com
      frame-src https://js.verygoodvault.com
      script-src https://js.verygoodvault.com
      default-src 'self'
      form-action 'self'
      style-src 'self' 'unsafe-inline'
      img-src 'self'
      media-src 'none'
      object-src 'none'
      child-src 'self'
  10. How to use custom methods for form submission?
    • Here you can find more information about custom methods and here is an example of how to use it:
      form.submit('/patch', {
      method: 'PATCH'
      }, function(status, data) {
      document.getElementById('result').innerHTML = JSON.stringify(data.json, null, 4);

Known issues

1. VGS Collect.js + Tether. Click delay on iOS.

Issue description

Tether is a small, focused JavaScript library for defining and managing the position of user interface (UI) elements in relation to one another on a web page.

Bootstrap 4 used Tether as a position library for its JavaScript components (tooltips, dropdowns, and popovers) up until Alpha versions. Bootstrap 4 version was recently released in which Tether was dropped in favor of Popper.js which is actively developed and supported.

Possible workaround

If you’re using Tether in your application, please check out Popper.js as an alternative.