/

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:

Modern Framework Integrations

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'],
});
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

VGS Collect.js will pass this data in the following structure:

{expirationDateCustom: { month_custom_name: '<value>', year_custom_name: '<value>'} }
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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();
});
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format
Warning
This method won't work on iOS 13+ due to the new system limitations.

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.
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format