UI Components

VGSTextInput

The VGSTextInput component is a secure text input field designed for collecting sensitive data using the VGS Collect SDK. This component provides various features such as masking, validation, and tokenization to ensure the secure handling of sensitive information like payment card details, social security numbers, and more.

VGSTextInput props

VGSTextInput has similar props to native iOS/Android TextField attributes.

The VGSTextInput class provides built-in support for input text validation and formatting. You can set pre-defined configuration to each VGSTextInput by setting the type field.

Props	Description
collector	The VGSCollect instance used to register the field.
fieldName	The string name of the field. Should be same as in your Valut Route settings.
type	The VGSInputType type of the input field (e.g., 'card', 'cvc', 'expDate', 'text'). Default is 'text'.
mask	The string mask pattern for the input field (e.g., '#### #### #### ####' for card number).
divider	The string divider to use when replacing non-mask characters on form submission.
serializers	An VGSSerializer[] array of serializers for the input field.
validationRules	An ValidationRule[] array of rules for the input field. Based on type will have predefined values.
placeholder	The string placeholder text for the input field.
keyboardType	The keyboard type for the input field(e.g., 'default'
secureTextEntry	The boolean value whether the input field should have secure text entry (e.g., for passwords). Default is false.
autoCorrect	The boolean value whether the input field should enable auto-correction. Default is false.
containerStyle	The object style for the container view.
textStyle	The object style for the text input.
tokenization	The false or TokenizationConfig tokenization configuration for the input field.
onStateChange	A callback function that is invoked when the input field's state changes.

Methods

Methods	Description
focus()	Focuses the text input field.
blur()	Unfocuses the text input field.

Code example

import React from 'react';
import { View } from 'react-native';
import { VGSTextInput, VGSCollect } from '@vgs/collect-react-native';
import type { VGSTextInputState } from '@vgs/collect-react-native';

const MyComponent = () => {
  const collector = new VGSCollect('your-vault-id', 'your-environment');

  const handleStateChange = (state) => {
    console.log('Input state changed:', state);
  };

  return (
    <View>
      <VGSTextInput
        collector={collector}
        fieldName="ssn"
        type="ssn"
        mask="###-##-####"
        placeholder="Enter your SSN"
        onStateChange={handleStateChange}
        secureTextEntry={true}
        autoCorrect={false}
        containerStyle={{ margin: 10 }}
        textStyle={{ fontSize: 18 }}
      />
    </View>
  );
};

export default MyComponent;

VGSTextInputState

The VGSTextInput component manages its state internally and provides updates via the onStateChange callback. The state includes information such as:

Props	Description
isValid	boolean: Whether the current input is valid based on the validation rules.
isDirty	boolean: Whether the input field has been modified.
isEmpty	boolean: Whether the input field is empty.
isFocused	boolean: Whether the input field is focused.
inputLength	number: The length of the current input.
validationErrors	string[]: An array of validation errors.
fieldName	string: The name of the field.
cardBrand	string: The detected card brand (for card type). Available only for valid card numbers.
cardBin	string: The BIN (Bank Identification Number) of the card (for card type). Available only for valid card numbers.
last4	string: The last 4 digits of the card or SSN (for card or SSN type). Available only for valid card numbers or SSN.

VGSCardInput

The VGSCardInput component is a version of the VGSTextInput component, specifically designed for collecting and handling payment card information. It inherits all the functionality of VGSTextInput and provides additional features tailored for card input fields.

VGSCardInput props

VGSCardInput has similar props to VGSTextInput. In addition, it detects the credit card brand while the user is typing data and displays the card brand image in the card input. All card brand images are included in the SDK, however you still can set your custom images.

Props	Description
iconWidth	The number width of the card brand icon.
iconHeight	The number height of the card brand icon.
iconPadding	The number padding around the card brand icon.
iconPosition	The left or right or none position of the card brand icon.
iconStyle	The object style for the card brand icon.

VGSCVCInput

The VGSCVCInput component is another specialized version of the VGSTextInput component, designed for collecting and handling payment card security code information (CVC/CVV). It inherits all the functionality of VGSTextInput and provides additional features tailored for card security code input fields.

VGSCVCInput props

VGSCVCInput has similar props to VGSTextInput. In addition, it displays a CVC image. The CVC image can change dynamically for a specific card brand (e.g. the CVC image for Amex contains 4 digits).

Props	Description
iconWidth	The number width of the card brand icon.
iconHeight	The number height of the card brand icon.
iconPadding	The number padding around the card brand icon.
iconPosition	The left or right or none position of the card brand icon.
iconStyle	The object style for the card brand icon.