/

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 a 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 a 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 passing CSS rules as an argument property to the form.field() method. More details you can find here.
  • 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.
  • Can I integrate the library with React, React Native, Angular, VueJS applications?

    • Yes, you can find integration examples here.
  • 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;
      }
      This is a sample VGS echo server
      This is a login from access credentials
      This is a password from access credentials
      This is a HTTP port number to access
      This is a  sample VGS alias  in a generic format
      This is a sample test  vault id
      This is a username/password pair of  access credentials  for a sample test vault
      This is a sample  vault url, that contains the vault id and the sandbox environment
      This is a sample  vault host,  which contains sample test vault id and sandbox environment
      This is a current Organization ID
      This is a current vault id
      The unique name that identifies a specific iframe
      This is a  sample VGS alias  in a generic format
  • 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'
      block-all-mixed-content
  • 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);
      }
      This is a sample VGS echo server
      This is a login from access credentials
      This is a password from access credentials
      This is a HTTP port number to access
      This is a  sample VGS alias  in a generic format
      This is a sample test  vault id
      This is a username/password pair of  access credentials  for a sample test vault
      This is a sample  vault url, that contains the vault id and the sandbox environment
      This is a sample  vault host,  which contains sample test vault id and sandbox environment
      This is a current Organization ID
      This is a current vault id
      The unique name that identifies a specific iframe
      This is a  sample VGS alias  in a generic format
  • How to change the size of the iframe?

    • To set iframe size you need to add some css rules into your application. For example:
      .parent {
        height: 100px;
        width: 300px;
      }
      .parent iframe {
        width: 100%;
        height: 100%;
      }
      This is a sample VGS echo server
      This is a login from access credentials
      This is a password from access credentials
      This is a HTTP port number to access
      This is a  sample VGS alias  in a generic format
      This is a sample test  vault id
      This is a username/password pair of  access credentials  for a sample test vault
      This is a sample  vault url, that contains the vault id and the sandbox environment
      This is a sample  vault host,  which contains sample test vault id and sandbox environment
      This is a current Organization ID
      This is a current vault id
      The unique name that identifies a specific iframe
      This is a  sample VGS alias  in a generic format
  • 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're available countries 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 universal validation for all countries.

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