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.
val passwordField = findViewById<VGSEditText>(R.id.passwordField)
val passwordConfirmField = findViewById<VGSEditText>(R.id.passwordConfirmField)
val isContentEquals = passwordField.isContentEquals(passwordConfirmField)
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.
val vgsEditText = findViewById<VGSEditText>(R.id.vgsEditText)
vgsEditText.requestFocus()
vgsEditText.showKeyboard()
VGSEditText vgsEditText = findViewById(R.id.vgsEditText);
vgsEditText.requestFocus();
vgsEditText.showKeyboard();
Last updated