# 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.](#vgscardnumberedittext)\*\*

```xml
<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.](#expirationdateedittext)\*\*

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

```xml
<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.](#rangedateedittext)\*\*

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

```xml
<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.](#cardverificationcodeedittext)\*\*

```xml
<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.](#personnameedittext)\*\*

```xml
<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.](#ssnedittext)\*\*

```xml
<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.](#vgsedittext)\*\*

```xml
<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.](#vgstextinputlayout)\*\*

```xml
<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.

```kotlin
// 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.

```xml
<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"/>

```

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

```java
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.

{% code title="Kotlin" %}

```kotlin

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

{% endcode %}

{% code title="Java" %}

```java

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

```

{% endcode %}

Check the [compare fields sample](https://github.com/verygoodsecurity/android-sdk-demo/tree/master/collect/src/main/java/com/vgscollect/androiddemo/samples/compare#compare-sample).

To learn more about all of the features please check out the documentation [here](https://docs.verygoodsecurity.com/vault/developer-tools/vgs-collect/android-sdk/samples).

### 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.

{% code title="Kotlin" %}

```kotlin

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

{% endcode %}

{% code title="Java" %}

```java

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

```

{% endcode %}