CardVerificationCodeEditText

A user interface element for entering CVV/CVC codes with smart length limitation.

The CVV/CVC code (Card Verification Value/Code) is located on the back of your credit/debit card on the right side of the white signature strip.

Validation

Usually CardVerificationCodeEditText field has restriction in 3 or 4 digits.

If in the same VGSCollect instance there are bound VGSCardNumberEditText and CardVerificationCodeEditText fields, the last one will limit digits length according to the card brand detected previously.

Card brand icon visibility

By default, cvc preview icon is always invisible. VGS Collect SDK gives the ability to change default behavior and show icon according to the content inside the field. The system makes a decision of how it should adjust the brand visibility based on the app:previewIconVisibility attribute.

The app:previewIconVisibility attribute could be configured with one of the following parameters:

• always: Preview icon is visible all the time.

• ifBrandDetected: Preview icon is visible only when card brand is detected in VGSCardNumberEditText field.

• hasContent: Preview icon is visible when some input exists.

• never: Preview icon is never visible.

<com.verygoodsecurity.vgscollect.widget.CardVerificationCodeEditText
    android:id="@+id/cvcField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="cvcFieldName"
    app:previewIconVisibility="always"/>

CardVerificationCodeEditText

A user interface element for entering CVV/CVC codes with smart length limitation.

The CVV/CVC code (Card Verification Value/Code) is located on the back of your credit/debit card on the right side of the white signature strip.

Validation

Usually CardVerificationCodeEditText field has restriction in 3 or 4 digits.

If in the same VGSCollect instance there are bound VGSCardNumberEditText and CardVerificationCodeEditText fields, the last one will limit digits length according to the card brand detected previously.

Card brand icon visibility

By default, cvc preview icon is always invisible. VGS Collect SDK gives the ability to change default behavior and show icon according to the content inside the field. The system makes a decision of how it should adjust the brand visibility based on the app:previewIconVisibility attribute.

The app:previewIconVisibility attribute could be configured with one of the following parameters:

• always: Preview icon is visible all the time.

• ifBrandDetected: Preview icon is visible only when card brand is detected in VGSCardNumberEditText field.

• hasContent: Preview icon is visible when some input exists.

• never: Preview icon is never visible.

<com.verygoodsecurity.vgscollect.widget.CardVerificationCodeEditText    android:id="@+id/cvcField"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:fieldName="cvcFieldName"    app:previewIconVisibility="always"/>XML

Set preview icon gravity

Specifies how to align the icon by the view’s x-axis. By default, gravity in end position .

Info: At the current moment, we support only start and end position.

<com.verygoodsecurity.vgscollect.widget.CardVerificationCodeEditText
    android:id="@+id/cvcField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="cvcFieldName"
    app:previewIconGravity="end"/>

Override preview icon

VGS Collect offers the default resources for preview and UI identification current ones by your end-user. If none of the prebuilt resources meet your needs, you can override your own resource. Creating your own resource gives you precise control over the appearance of the element on the screen.

You can use CVCIconAdapter class to create custom Drawables as a preview image for the CardVerificationCodeEditText.

Kotlin

val cvcField = findViewById<CardVerificationCodeEditText>(R.id.cvcField)

val adapter = object : CVCIconAdapter(this) {
  override fun getIcon(cardType: CardType, cardBrand: String?, cvcLength: Int, r: Rect): Drawable {
      return if(cardType == CardType.VISA) {
          getDrawable(R.drawable.ic_cvc_preview)
      } else {
          super.getIcon(cardType, cardBrand, cvcLength, r)
      }
  }
}

cvcField.setPreviewIconAdapter(adapter)

Java

Set field name

Sets the text to be used for data transfer to the 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 another way, the input field will be ignored by VGSCollect.

XML

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

Kotlin

Java

Specify the keyboard type

You should always declare the input method for this input fields by adding the app:inputType to tell the system displays 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.CardVerificationCodeEditText
    android:id="@+id/cvcField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:inputType="number"/>

Kotlin

Java

Additional XML attributes

Attribute	Description
app:previewIconVisibility	Specifies visibility for card security code preview icon.
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: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 width to be ellipsized instead of being broken in the middle.
app:ellipsize	If set causes words that are longer than the view width to be ellipsized instead of being broken in the middle.
app:enableValidation	Set the validation state of this view. Set true if this view enables validation, it's false otherwise.
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.