# Samples

Examples and references that can help you to build your web application on top of VGS Collect.js.

![](/files/rLPxYTl0RVGuBVU5aG6D)

## Frameworks Integration

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th align="center"></th></tr></thead><tbody><tr><td><h4>React.js</h4></td><td>Example integration in React.js application</td><td align="center"><a href="https://stackblitz.com/edit/vgs-collect-js-react?file=src%2FApp.js">Open Example</a></td></tr><tr><td><h4>Vue.js</h4></td><td>Example integration in Vue.js application</td><td align="center"><a href="https://stackblitz.com/edit/vue-lqvqw8?file=src%2FApp.vue,src%2Fvgs%2FVGS.vue">Open Example</a></td></tr><tr><td><h4>Angular.js</h4></td><td>Example integration in Angular.js application</td><td align="center"><a href="https://stackblitz.com/edit/angular-vgs-qf5jun?file=src%2Fapp%2Fapp.component.ts">Open Example</a></td></tr></tbody></table>

## Use Cases

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th align="center"></th></tr></thead><tbody><tr><td><h4>Payment Form</h4></td><td>Build payment form with VGS Collect.js</td><td align="center"><a href="https://github.com/vgs-samples/vgs-collect-examples/tree/master/examples/usecases/credit-card-example">Open Example</a></td></tr><tr><td><h4>Shipping Form Example</h4></td><td>Build shipping form with VGS Collect.js</td><td align="center"><a href="https://github.com/vgs-samples/vgs-collect-examples/tree/master/examples/usecases/shipping-info-example">Open Example</a></td></tr><tr><td><h4>Login Form Example</h4></td><td>Build login form with VGS Collect.js</td><td align="center"><a href="https://github.com/vgs-samples/vgs-collect-examples/tree/master/examples/usecases/login-data-example">Open Example</a></td></tr><tr><td><h4>PII Form Example</h4></td><td>Build PII form with VGS Collect.js</td><td align="center"><a href="https://github.com/vgs-samples/vgs-collect-examples/tree/master/examples/usecases/pii-example">Open Example</a></td></tr></tbody></table>

## Supportive modules

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th align="center"></th></tr></thead><tbody><tr><td><h4>Script Loading NPM module</h4></td><td>Script loading NPM module for the VGS Collect.</td><td align="center"><a href="https://www.npmjs.com/package/@vgs/collect-js">Open Example</a></td></tr><tr><td><h4>React Wrapper for the VGS Collect fields</h4></td><td>React wrapper for VGS Collect.js fields</td><td align="center"><a href="https://www.npmjs.com/package/@vgs/collect-js-react">Open Example</a></td></tr></tbody></table>

## Customization code snippets

* [Add custom card brands](#add-custom-card-brands)
* [Allow only specific card brands support](#allow-only-specific-card-brands-support)
* [Separate month and year for the card expiration date field](#separate-month-and-year-for-the-card-expiration-date-field)
* [Control expiration date year length](#control-expiration-date-year-length)
* [Override default card/cvv icons](#override-default-cardcvv-icons)
* [Change expiration date separator](#change-expiration-date-separator)
* [Configuration of the input type file](#configuration-of-the-input-type-file)
* [Date of Birth validation](#date-of-birth-validation)
* [Compare values equality](#compare-values-equality)
* [Floating labels](https://github.com/vgs-samples/vgs-collect-examples/blob/master/examples/customization/floating-labels-example/README.md)
* [Conditionally remove/hide secure fields](#conditionally-remove-secure-field)

### Add custom card brands

Add new card brand:

```javascript
form.field('<selector>', {
  type: 'card-number',
  name: 'cc-number',
  placeholder: 'Card number',
  validations: ['required', 'validCardNumber'],
  showCardIcon: true,
  addCardBrands: [{
    type: 'mycard',
    pattern: /^221/,
    format: /(\\d{1,4})/g,
    length: [16, 19],
    cvcLength: [3, 4],
    luhn: false,
  },],
});
```

Change existing card brand config:

```javascript
form.field('<selector>', {
    type: 'card-number',
    name: 'cc-number',
    placeholder: 'Card number',
    validations: ['required', 'validCardNumber'],
    showCardIcon: true,
    addCardBrands: [{
      type: 'visa',
      pattern: /^411/, // now visa card will be valid only if starts from 411
    },],
  });
```

### Allow only specific card brands support

```javascript

form.field('<selector>', {
  type: 'card-number',
  name: 'cc-number',
  placeholder: 'Card number',
  validations: ['required', 'validCardNumber'],
  showCardIcon: true,
  validCardBrands: [ { type: 'visa' }, { type: 'mastercard' }]
});

```

### Separate month and year for the card expiration date field

```javascript
form.field('<selector>', {
  type: 'card-expiration-date',
  name: 'expirationDate',
  placeholder: 'MM / YYYY',
  serializers: [form.SERIALIZERS.separate(
    { monthName: '<month_custom_name>', yearName: '<year_custom_name>' }
  )],
  validations: ['required', 'validCardExpirationDate'],
});

form.submit('/post', {
  data: (values) => {
    return {
      card: {
        expiry: {
          month: values.expirationDate['<month_custom_name>'],
          year: values.expirationDate['<year_custom_name>'],
        }
      }
    }
  }
};
```

### Control expiration date year length

```javascript
form.field('<selector>', { yearLength: 2 });
form.field('<selector>', { yearLength: 4 });
```

### Override default card/cvv icons

```javascript

const cvvIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%233BBF45'%3E%3Cg%3E%3Cpath d='M0,0h24v24H0V0z' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M7.64,15H6.49v-4.5l-0.9,0.66 l-0.58-0.89L6.77,9h0.87V15z M13.5,15H9.61v-1.02c1.07-1.07,1.77-1.77,2.13-2.15c0.4-0.42,0.54-0.69,0.54-1.06 c0-0.4-0.31-0.72-0.81-0.72c-0.52,0-0.8,0.39-0.9,0.72l-1.01-0.42c0.01-0.02,0.18-0.76,1-1.15c0.69-0.33,1.48-0.2,1.95,0.03 c0.86,0.44,0.91,1.24,0.91,1.48c0,0.64-0.31,1.26-0.92,1.86c-0.25,0.25-0.72,0.71-1.4,1.39l0.03,0.05h2.37V15z M18.75,14.15 C18.67,14.28,18.19,15,16.99,15c-0.04,0-1.6,0.08-2.05-1.51l1.03-0.41c0.03,0.1,0.19,0.86,1.02,0.86c0.41,0,0.89-0.28,0.89-0.77 c0-0.55-0.48-0.79-1.04-0.79h-0.5v-1h0.46c0.33,0,0.88-0.14,0.88-0.72c0-0.39-0.31-0.65-0.75-0.65c-0.5,0-0.74,0.32-0.85,0.64 l-0.99-0.41C15.2,9.9,15.68,9,16.94,9c1.09,0,1.54,0.64,1.62,0.75c0.33,0.5,0.28,1.16,0.02,1.57c-0.15,0.22-0.32,0.38-0.52,0.48 v0.07c0.28,0.11,0.51,0.28,0.68,0.52C19.11,12.91,19.07,13.66,18.75,14.15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E";
const cardIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%233BBF45'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E";
const css = {
  fontSize: 22,
  fontFamily:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
};
form.field('<selector>', {
  type: 'card-number',
  name: 'cc-number',
  placeholder: '4111 1111 1111 1111',
  showCardIcon: true,
  icons: {
    cardPlaceholder: cardIcon,
  },
  css,
});
form.field('<selector>', {
  type: 'card-security-code',
  name: 'cc-cvv',
  placeholder: '111',
  showCardIcon: true,
  icons: {
    cvvFront: cvvIcon,
    cvvBack: cvvIcon,
  },
  css,
});
  
```

### Change expiration date separator

```javascript
form.field('<selector>', {
  type: 'card-expiration-date',
  name: 'card-expiry',
  validations: ['required', 'validCardExpirationDate'],
  serializers: [form.SERIALIZERS.separate({
    monthName: 'ExpirationMonth',
    yearName: 'ExpirationYear'
  })],
  placeholder: 'MM / YYYY',
});
```

### Configuration of the input type file

```javascript
form.field('<selector>', {
  type: "file", // required
  name: "images", // required
  validations: ["required"],
  /**
   * Optional. A Boolean which, if present, indicates that the user
   * may choose more than one file. By default - false.
   */
  multiple: true,
  /**
   * Optional. Serializer intended to convert each file from the FileList
   * into base64 form and return an array of values.
   */
  serializers: [{ name: "toBase64" }],
  /**
   * Optional. Array of one or more unique file type specifiers describing file types to allow.
   * By default set to "image/*, .pdf".
   * Corresponding validation error: "invalid file name"
   */
  accept: ["image/*"],
  /**
   * Optional. A string indicated what source to use for capturing image data.
   * Available options: "user", "environment"
   */
  capture: "user",
  /**
   * Optional. A number defines maximum file size in Bytes.
   * Corresponding validation error: "uploaded file is too large"
   */
  maxFileSize: 100000,
  /**
   * Optional. A number indicates maximum allowed files number.
   * Corresponding validation error: "maximum 2 files can be uploaded"
   */
  maxFiles: 2,
  css
});
```

### Date of Birth validation

```javascript
const timestamp = Date.parse("01.01.1940");
const dateObject = new Date(timestamp);
const cardNumber = form.field('<selector>', {
  type: "date",
  name: "dob",
  min: "1940-01-01",
  validations: [
    "required",
    {
      type: "compareDate",
      params: {
        field: dateObject,
        function: "more"
      }
    }
  ],
});
```

### Compare values equality

```javascript
const cvc = form.field('<selector>', {
  type: 'text',
  name: 'cardCvc',
  validations: ['required'],
  autoComplete: 'cc-csc',
});

const cvcConfirm = form.field('<selector>', {
  type: 'text',
  name: 'cardCvcConfirm',
  validations: ['required', {
    type: 'compareValue',
    params: {
      field: 'cardCvc',
      function: 'match',
    },
  }],
  autoComplete: 'cc-csc',
});
```

### Conditionally remove secure field

```javascript
... 
  if (shouldHideFields) {
    try { fields.cvc.delete(); } catch {}
    try { fields.expiry.delete(); } catch {}
  }
...
```


---

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