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.

Play with the style

        const field = form.field('#space-for-field', {
          type: 'card-number',
          name: 'card-number',
          placeholder: '4111111111111111',
          css: {
            border: 'none',
            background: 'rgba(215, 224, 235, 0.18);',
            height: '40px',
            lineHeight: 'normal'
            padding: '0 10px',
            color: 'white',
            fontSize: '12px',
            boxSizing: 'border-box',
            borderRadius: '4px',
            letterSpacing: '.7px',
            '&::placeholder': {
              color: 'white',
              fontSize: '12px',
              opacity: '.5',

Field styling examples

Play with the style

Payment form

Total $ 32.99
Play with the style
Play with the style