VGS Collect.js examples

VGS Collect.js is a javascript library that allows you to integrate secure fields with non-secure fields in your page.
The secure fields behave like traditional input fields while preventing access to the unsecured data.

Codesandbox playground

Card holder Alphabetic only

          f.field('#cc-holder', {...})
            .replacePattern('/[^a-zA-Z\s]+/g');

ZIP code Numeric only

          f.field('#zip-code', {...})
            .replacePattern('/[^\\d]+/g');

Phone number +1 (XXX) XXX-XX-XX

          f.field('#phone-number', {...})
            .mask('+1 (999) 999-99-99');

SSN XXX-XX-XXXX

          f.field('#ssn', {...})
            .mask('999-99-9999', '*');

Birth date (MM/DD/YYYY)

          f.field('#birth-date', {...})
            .mask('99/99/9999', '_');

Expiration date MM/YY

          f.field('#cc-exp-short',
            {yearLength: '2'});

Expiration date MM/YYYY

          f.field('#cc-exp-full .field-space',
            {yearLength: '4'});