VGS Collect

Description

VGS Collect is a way to securely collect sensitive data without going through your systems. If you want to know more about VGS, you can access this link: https://www.verygoodsecurity.com/docs/vgs-collect/js/

Environment variables setup

The following environment variables are required:

Add variables for src/env.d.ts

export const VAULT_ENVIRONMENT_VGS: string;
export const VAULT_IDENTIFIER_VGS: string;

Add variables env/{DEV,QA,PROD}/.env:

VAULT_ENVIRONMENT_VGS=<environment>
VAULT_IDENTIFIER_VGS=<vaultIdentifier>

1. ENVIRONMENT_VGS: this variable is used to decide which VGS environment will be used to store the sensitive data.

2. VAULT_IDENTIFIER_VGS: this variable is used to decide which VGS vault will be used to store the sensitive data.

How to use it?

How to use it?

Import the VgsCollectForm into your file:

import {VgsCollectForm} from 'LinkerStudio/modules/VgsCollect/components/organisms';

Import useVgsCollect into your file:

import {useVgsCollect} from 'LinkerStudio/modules/Vault/vgs/hooks';

Import VGS_COLLECT_CONFIG into your file:

import { VGS_COLLECT_CONFIG } from 'LinkerStudio/modules/Vault/vgs/constants';

Import FieldsTypes and ValidationsTypes into your file:

import {
  FieldsTypes,
  ValidationsTypes,
} from 'LinkerStudio/modules/Vault/vgs/utils';

Use the VgsCollectForm component and useVgsCollect custom hook in your file:

const vgsCollect = useVgsCollect();
const {webviewRef,handleEmptyValues,handleOnError,vgsResponse } = vgsCollect;

Use the VgsCollectForm component and useVgsCollect custom hook in your file:

const vgsCollect = useVgsCollect();
const {webviewRef,handleEmptyValues,handleOnError,vgsResponse } = vgsCollect;

<VgsCollectForm
  webviewRef={webviewRef}
  vgsResponse={res => vgsResponse({ ...res})}
  formFields={[
      {
        name: <field name>,
        type: FieldsTypes.<field type>,
        validations: [ValidationsTypes.<validation type>],
        label: <field label>,
		disabled: '',
	    hideValue: false,
	 }
	] as Fields[]
	}
  vgsCollectConfig={
      {
        ...VGS_COLLECT_CONFIG,
        path: <your path>, // example: /vault/save
        options: {
             ...VGS_COLLECT_CONFIG.options,
              data: <object>,
              },
            } as VgsCollectConfig
          }
    onError={res =>handleOnError({...res})}
    setEmptyValues={handleEmptyValues}
    clearInputs={true}
  />

Props Description

1. webviewRef: ref of type webView.

2. vgsResponse: event executed when a request is made to VGS, and returns status and tokenized data in response.

3. formFields: array to define the form fields within the webview.

4. vgsCollectConfig: inbound HTTP Routes configuration of VGS. For more information https://www.verygoodsecurity.com/docs/api/collect/#api-formsubmit.

5. onError: runs when an error occurs in VGS.

6. setEmptyValues: event to handle empty values.

7. clearInputs: boolean value to clear all form inputs after submit.