# VGS Collect.js FAQ

## VGS Collect.js FAQ

### VGS Collect.js

* **How do I separate the expiration date for month and year?**
  * You can find our cookbook example [here](/vault/developer-tools/vgs-collect/js/samples.md).
* **How can I get a VGS Collect.js file?**
  * You can find your file on the VGS Collect tab on the [Dashboard](https://dashboard.verygoodsecurity.com/) 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](/vault/developer-tools/vgs-collect.md).
* **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](/vault/developer-tools/vgs-collect/js/samples.md#frameworks-integration).
* **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:

```javascript
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:

```javascript
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?**

```javascript
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:

```css
.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:

```css
'@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:

```javascript

    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:

  ```javascript
  const isBrowser = typeof window !== "undefined";

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

## Known issues

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

[Issue description](https://github.com/HubSpot/tether/issues/289)

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](https://popper.js.org/), which is actively developed and supported.

**Possible workaround**

If you're using Tether in your application, please check out [Popper.js](https://popper.js.org/) as an alternative.

### Field .focus() method on iOS

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


---

# 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/faq.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.