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.

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)

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.

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

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

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

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.

Last updated