Card Attribute Lookup During Card Entry

VGS Collect can provide your front-end insights into the card details. VGS will perform the card attribute lookup after the 11th digit is entered into the Card Number Field. Details on which attributes a card can get access to can be found here.

Step 1: Create Form and Select Attributes

In the VGS Dashboard, create a Collect Form and select all the attributes you wish to be included in the attribute lookup.

Step 2: Implement Card Attribute Lookup Hooks on Collect Form

const form = await VGSCollect.session({
  vaultId: 'tntYOUR_TENANT_ID',
  env: 'sandbox',
  formId: 'default',
  stateCallback: stateCallback.bind(state),
  authHandler: getVGSAuthToken,
  // error handler if config doesn't load
  onErrorCallback: (error) => {
    console.log(error);
  },
});

// Getting card attributes (success handler)
form.on('getCardAttributesSuccess', (lookup) => {
  console.log('getCardAttributesSuccess', lookup)
});

// Getting card attributes (error handler)
form.on('getCardAttributesError', (errors) => {
  console.log(errors)
});

// Fields
form.cardholderNameField('#cc-name .fake-input', {});
form.cardNumberField('#cc-number .fake-input', {});
form.cardExpirationDateField('#cc-exp-date .fake-input', {});
form.cardCVCField('#cc-cvc .fake-input', {});