Cookbook

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

VGS Collect.js Use Cases

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

Use cases code examples:

VGS Collect.js and 3D Secure

We created an example application of a demo SCA-ready integration: VGS Collect.js with Stripe’s 3DS payment flow. The demo application flow includes:

  • Capturing credit card data via VGS Collect.js
  • Getting 3D Secure authentification link from Stripe
  • Making a test payment to Stripe

You can easily try it out:

In this flow, VGS Collect.js is responsible for collecting payment cards data securely. 3DS flow depending on the payment processor you are integrating with. See this diagram:

'VGS Collect.js page'

VGS Collect.js 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.js 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.