ExpirationDateEditText

Provides a user interface element for date input. The range of dates supported by this field is not configurable. When you define this input field, you could specify a few attributes which preferable for this control. For example, app:datePickerModes or app:datePattern which are unique for this field type.

Define Date picker mode

Sets type of exact appearance and interaction model of this widget. The user can select a date by tapping on it and can scroll or fling the calendar, spinner to the desired date or just type as a text.

calendar	set date from CalendarView.
spinner	set date from spinner DatePicker.
input	set date manually.

XML

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

Kotlin

Java

How to show DatePicker

To display a DatePicker you need to call a showDatePickerDialog in ExpirationDateEditText class.

Note that by default DatePicker is shown after tapping on a field and if the field has datePickerModes attribute set.

Track DatePicker events

Set a OnDatePickerVisibilityChangeListener listener to be invoked when the dialog is shown or canceled.

Kotlin

val cardExpDateField = findViewById<ExpirationDateEditText>(R.id.cardExpDateField)
cardExpDateField?.setDatePickerVisibilityChangeListener(object : ExpirationDateEditText.OnDatePickerVisibilityChangeListener {
            override fun onShow() { }
            override fun onDismiss() { }
        })

Java

Configure date representation

Representation of dates and times is an international standard covering the exchange of date- and time-related data.

The methods use the ISO 8601 standard.

NoteThe input Date mode supports only MM, yyyy, yy forms.

The datePattern format date and times before showing in the input field.

XML

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

Kotlin

Java

The outputPattern format date and times before sending to the Vault Proxy Server.

XML

<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:outputPattern="yyyy-MM-dd'T'HH:mm:ss.SSSSSSS"/>

Kotlin

Java

Expiration date separation

VGS Collect SDK allows a developer to split card expiration date month and year before submitting. To configure a new structure of date use VGSExpDateSeparateSerializer. The date format will be used according to the value mentioned in app:outputPattern attribute.

Kotlin

cardExpDateField.setSerializer(VGSExpDateSeparateSerializer(
        "expirationDateCustom.month_custom_name",
        "expirationDateCustom.year_custom_name"
    )
)

Java

As a result, a JSON with the following structure:

{    
      expirationDateCustom: {  
            month_custom_name: "<VALUE>", 
             year_custom_name: "<VALUE>" 
      }
}

Set field name

Sets the text to be used for data transfer to VGS proxy. Usually, it is similar to field-name in JSON path in your inbound route filters. It is highly important to specify this parameter because the VGSCollect module relies on it too.

Warning: You must set up fieldName in other way input field will be ignored by VGSCollect.

XML

<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="exp_date"/>

Kotlin

Java

Define the required state

Specifies whether the text inside input field is required to be filled.

When app:isRequired set as true, then input data should be valid only. If app:isRequired set as false, then input data will be valid in case the field is empty. Otherwise input data should be valid.

By default, a widget is required.

XML

<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:isRequired="false"/>

Kotlin

Java

Specify the keyboard type

You should always declare the input method for these input fields by adding the app:inputType to tell the system to display the appropriate soft input method (such as an on-screen keyboard).

For example, if you'd like an input method for entering a phone number, specify app:inputType as number or numberPassword

XML

<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:inputType="number"/>

Kotlin

Java

Additional XML attributes

Attribute	Description
app:datePickerModes	Set the date picker mode(calendar, spinner, or input).
app:datePattern	Representation of dates and times that will be visible for end-user. The method uses the ISO 8601 standard.
app:outputPattern	Representation of date and times which will be sent to the Vault Proxy Server. The method uses the ISO 8601 standard.
app:inputType	Set the type of the content with a constant as defined for input field.
app:imeOptions	Specify soft input method for the input method action. By default, the system uses a actionNext Plain textor actionDone Plain textaction.
app:fontFamily	Default font family (named by string or as a font resource reference) for the text.
app:enableValidation	Set the validation state of this view. Set true if this view enables validation, it's false otherwise.
app:fieldName	Sets the text to be used for data transfer to VGS proxy. Usually, it is similar to field-name in JSON path in your inbound route filters.
app:isRequired	Specifies whether the text inside input field is required to be filled.
app:textSize	Size of the text.
app:ellipsize	If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle.
app:ellipsize	If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle.
app:text	Text to display.
app:textColor	Text color.
app:maxLines	Makes the View be at most this many lines tall.
app:minLines	Makes the View be at least this many lines tall.
app:textStyle	Style (normal, bold, italic) for text.
app:cursorVisible	Makes the cursor visible (the default) or invisible.
app:gravity	Specifies how to align the text by the view’s x- or y-axis when the text is smaller than the view.
app:scrollHorizontally	When the text is allowed to be wider than the view (and therefore can be scrolled horizontally).
app:hint	Hint text to display when the text is empty