Cookbook

Cookbook - is a collection of tiny jsfiddles that each demonstrates a particular case for VGS Collect.

VGS Collect use cases

You can try how it works on our VGS Collect Examples Page.

Use cases code examples:

VGS Collect Recipes

Expiration date separation

If you want to get a month and year values separately, add form.SERIALIZERS.separate() function to the expiration date field initialization.

Example:

form.field('#space-for-my-field', {
      type: 'card-expiration-date',
      name: 'expirationDateCustom',
      placeholder: '01 / 2019',
      css: {
        'color': 'red',
        'fontSize': '12px',
      }
      serializers: [form.SERIALIZERS.separate({monthName: ' <month_custom_name>', yearName: '<year_custom_name>'})],
      validations: ['required', 'validCardExpirationDate']
  });

VGS Collect will pass this data in the following structure:

{expirationDateCustom: { month_custom_name: '<value>', year_custom_name: '<value>'} }

Field focus

You can explicitly add the focus to the field using our Field .focus() method:

Field#focus()

Example:

const field = form.field('#space-for-my-field', { ... });

document.querySelector('[for=filed]').addEventListener('click', function() {
  field.focus();
});

mapDotToObject usage

// field initialization
form.field('#cc-name', {
    type: 'text',
    name: 'card.name', // will convert dot to an object
    placeholder: 'Joe Business',
    validations: ['required'],
});

form.submit('/tokenize', {
    mapDotToObject: true,
    data: {
      customerEmail: 'joe@example.com',
    },
    headers: {
      'x-application': 'MyApplication 2.8.3',
    },
    },
    function(status, response) {
      console.log("Response has been received", status, response);
    }, function(errors) {}
);

// Will pass the following JSON:
   {
       customerEmail: 'joe@example.com',
       card: {
           name: '<name>',
       }
   }
// Please note! ``mapDotToObject: true`` will overwrite the data with the equivalent name inside the data property
// you passed to submit function. Use ``mapDotToObject: merge`` to merge your data and values from the form.