FAQ

VGS Collect.js

How do I separate the expiration date for month and year?
- You can find our cookbook example here.
How can I get a VGS Collect.js file?
- You can find your file on the VGS Collect tab on the Dashboard or ask customer support to generate a JS file for your organization.
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.
Can I get raw data from the inputs?
- No, you can't. The data is isolated from your application.
Is it possible to style VGS Collect.js fields?
- You can customize input appearance by passing CSS rules as an argument property to the form.field() method. More details can be found here.
Does library support Web Fonts?
- You can use only generic Web Fonts to customize your form or apply @font-face property to the field.
Can I integrate the library with React, React Native, Angular, and VueJS applications?
- Yes, you can find integration examples here.
How can I disable analytics requests?
- We strongly recommend keeping them. We do not track and sell any information about your clients. We collect these logs to debug if there are any issues with loading times, request timeouts, performance issues with iframes, etc. If you disable analytics, we will not provide you with precious information in some edge cases. If you want to disable the tools that will help us to debug:

VGSCollect.logLevel("none");

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('<VAULT_ID>', '<ENVIRONMENT>', function (state) {
       const last4 = state['<field_name>'].last4;
       const bin = state['<filed_name>'].bin;
    }

Should I add CSP to my application?
- We strongly recommend adding 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 https://js3.verygoodvault.com https://vgs-collect-keeper.apps.verygood.systems frame-src https://js.verygoodvault.com https://js3.verygoodvault.com script-src https://js.verygoodvault.com https://js3.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' block-all-mixed-content
How to use custom methods for form submission?

form.submit('/patch', {
     method: 'PATCH'
  }, function(status, data) {
     document.getElementById('result').innerHTML = JSON.stringify(data.json, null, 4);
  }

How to change the size of the iframe?
- To set the iframe size, you need to add some CSS rules to your application. For example:

.parent {
    height: 100px;
    width: 300px;
  }
  .parent iframe {
    width: 100%;
    height: 100%;
  }

When a customer submits the form data using VGS Collect, will the alias be a part of the response?
- If you use our echo server (https://echo.apps.verygood.systems) in the inbound route, you will always receive in response the same body what you send in the request, one difference - raw data will be redacted (by VGS Proxy). If you add your own upstream - you can configure any response on your backend side.
What countries are available for postal_code validation?
- UK, JE, GG, IM, US, CA, IE, DE, JP, FR, AU, IT, CH, AT, ES, NL, BE, DK, SE, NO, BR, PT, FI, AX, KR, CN, TW, SG, DZ, AD, AR, AM, AZ, BH, BD, BB, BY, BM, BA, IO, BN, BG, KH, CV, CL, CR, HR, CY, CZ, DO, EC, EG, EE, FO, GE, GR, GL, GT, HT, HN, HU, IS, IN, ID, IL, JO, KZ, KE, KW, LA, LV, LB, LI, LT, LU, MK, MY, MV, MT, MU, MX, MD, MC, MA, NP, NZ, NI, NG, OM, PK, PY, PH, PL, PR, RO, RU, SM, SA, SN, SK, SI, ZA, LK, TJ, TH, TN, TR, TM, UA, UY, UZ, VA, VE, ZM, AS, CC, CK, RS, ME, CS, YU, CX, ET, FK, NF, FM, GF, GN, GP, GS, GU, GW, HM, IQ, KG, LR, LS, MG, MH, MN, MP, MQ, NC, NE, VI, PF, PG, PM, PN, PW, RE, SH, SJ, SO, SZ, TC, WF, XK, YT, INTL
  INTL - can be used as a universal validation for all countries.
Does VGS Collect.js support base64 encoded @font-face?
- Yes, here's an example:

'@font-face': {
  'font-family': 'CustomFont',
  'src': 'url(data:application/x-font-woff;charset=utf-8;base64,<base64 encoded string>,format("woff"))',
},

Is there a way to hide the CVV/CVC value in Collect.js?
- Yes, you can do it by adding a additional property hideValue when initializing the CVV/CVC field:


    const cvv = f.field('#cc-cvv', {
      type: 'card-security-code',
      ...
      hideValue: true,
    });

* We support `hideValue` only for CVC and SSN field types for now.

VGS Collect.js in SSR applications
Under the hood, our JS library creates a global variable that can be accessed by the window.VGSCollect reference. If you're doing server-side rendering, at the moment you're running an application browser-specific API, such as localStorage globals (window, document), would be undefined. It happens because the Node.js environment doesn't support them.
If you're getting window is not defined error, to avoid this issue, simply check if window is defined in your code:
```
const isBrowser = typeof window !== "undefined";

if (isBrowser) {
// initialize VGS Collect.js here
};
```

Known issues

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 the 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.

Field .focus() method on iOS

This method won't work on iOS 13+ due to the new system limitations.

PreviousIntegration with Sardine NextiOS SDK

Last updated 8 days ago