UI Components

UI Components

Your app's user interface and everything that users can see and interact with. VGS Collect SDK provides a variety of pre-built UI fields that allow you easy to build secure user interface for your app.

VGSCardNumberEditText

A user interface element that displays text to the user in card number format. Current widget supports validation with Luhn algorithm for most popular credit card brands.

** Check the VGSCardNumberEditText guide.**

<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="cardNumber"
    app:hint="Card number"
    app:numberDivider=" "
    app:cardBrandIconGravity="end"/>

ExpirationDateEditText

Provides a user interface element for expiration date input for credit cards.

** Check the ExpirationDateEditText guide.**

The card expiration date field validate any date starting from current month during next 20 years.

<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="expiration_date"
    app:datePickerModes="input"
    app:datePattern="MM/yy"/>

RangeDateEditText

Provides a user interface element for date input. It allows to define a range of dates to select from.

** Check the RangeDateEditText guide.**

The range date field validate any date in the range defined with min and max dates.

<com.verygoodsecurity.vgscollect.widget.RangeDateEditText
    android:id="@+id/rangeDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="range_date"
    app:datePickerModes="input"
    app:datePattern="MM/dd/yyyy"
    app:minDate="10/10/2020"
    app:maxDate="10/10/2026"/>

CardVerificationCodeEditText

Provides a user interface element for entering verification codes for payment cards.

** Check the CardVerificationCodeEditText guide.**

<com.verygoodsecurity.vgscollect.widget.CardVerificationCodeEditText
    android:id="@+id/cardCVCField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="card_cvc"/>

PersonNameEditText

Provides a user interface element that represents a person's name.

** Check the PersonNameEditText guide.**

<com.verygoodsecurity.vgscollect.widget.PersonNameEditText
    android:id="@+id/cardHolderNameField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="card_holder_name"/>

SSNEditText

Provides a user interface element that represents a Social Security Number (SSN).

** Check the SSNEditText guide.**

<com.verygoodsecurity.vgscollect.widget.SSNEditText
    android:id="@+id/ssnField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="ssn_field_name"/>

VGSEditText

A base user interface element that displays text.

** Check the EditText guide.**

<com.verygoodsecurity.vgscollect.widget.VGSEditText
    android:id="@+id/infoField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="info_field_name"
    app:inputType="text"/>

VGSTextInputLayout

Material component which wraps the VGS fields to show a floating label when the hint is hidden due to user inputting text.

** Check the VGSTextInputLayout guide.**

<com.verygoodsecurity.vgscollect.widget.VGSTextInputLayout
    android:id="@+id/cardFieldLay"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hint="Card Number">

    <com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
        android:id="@+id/cardField"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fieldName="card_number"
        app:numberDivider="-"/>

</com.verygoodsecurity.vgscollect.widget.VGSTextInputLayout>

Advanced Settings

Setting Custom JSON Structure

When you need to show revealed data from a specific json structure you may do it by adding . notation to fieldName-string. Each . in a fieldName represents a new level of nesting. New field name string could be set into app:fieldName or setFieldName method.

If there are two fieldNames with equal names - the earlier will be overwritten.

// Define field names
val userId = "userId"
val cardNumberFieldKey = "card_data.card_number"
val cardCVCFieldKey = "card_data.cvc"

// Example of transformed JSON structure
{
   "userId": "id12345",
   “card_data: {
      “card_number”:  411111111111111”,
      “cvc”: “123”
   }”
}

The following example shows how it can be used.

<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/infoField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="card_data.card_number"/>

val infoField = findViewById<VGSCardNumberEditText>(R.id.infoField)
infoField.setFieldName("card_data.card_number")
    

VGSCardNumberEditText infoField = findViewById(R.id.infoField);
infoField.setFieldName("card_data.card_number");

Compare fields content

You can compare fields content using isContentEquals function. This function compares raw fields content ignoring all transformations and dividers.

The most common use case for this feature is password verification.

You don't need to bind the verification view to VGSCollect, otherwise the content of the verification view will be added to a back-end request payload.

Kotlin

val passwordField = findViewById<VGSEditText>(R.id.passwordField)
val passwordConfirmField = findViewById<VGSEditText>(R.id.passwordConfirmField)
val isContentEquals = passwordField.isContentEquals(passwordConfirmField)
    

Java

VGSEditText passwordField = findViewById(R.id.passwordField);
VGSEditText passwordConfirmField = findViewById(R.id.passwordConfirmField);
Boolean isContentEquals = passwordField.isContentEquals(passwordConfirmField);

Check the compare fields sample.

To learn more about all of the features please check out the documentation here.

Show/Hide keyboard

You should use showKeyboard() or hideKeyboard() functions of VGS Collect SDK views instead of InputMethodManager.showSoftInput and InputMethodManager.hideSoftInputFromWindow as InputMethodManager require android EditText reference to work correctly.

Kotlin

val vgsEditText = findViewById<VGSEditText>(R.id.vgsEditText)
vgsEditText.requestFocus()
vgsEditText.showKeyboard()
    

Java

VGSEditText vgsEditText = findViewById(R.id.vgsEditText);
vgsEditText.requestFocus();
vgsEditText.showKeyboard();