# 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 <a href="#validation" id="validation"></a>

Usually `CardVerificationCodeEditText` field has restriction in 3 or 4 digits.

If in the same VGSCollect instance there are bound [VGSCardNumberEditText](https://688d347d6ff7e3e8e92ea9d3--vgs-docs.netlify.app/docs/vgs-collect/android-sdk/card-number-field) and `CardVerificationCodeEditText` fields, the last one will limit digits length according to the card brand detected previously.

### Card brand icon visibility <a href="#card-brand-icon-visibility" id="card-brand-icon-visibility"></a>

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.

```xml
<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 href="#cardverificationcodeedittext" id="cardverificationcodeedittext"></a>

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 <a href="#validation" id="validation"></a>

Usually `CardVerificationCodeEditText` field has restriction in 3 or 4 digits.

If in the same VGSCollect instance there are bound [VGSCardNumberEditText](https://688d347d6ff7e3e8e92ea9d3--vgs-docs.netlify.app/docs/vgs-collect/android-sdk/card-number-field) and `CardVerificationCodeEditText` fields, the last one will limit digits length according to the card brand detected previously.

### Card brand icon visibility <a href="#card-brand-icon-visibility" id="card-brand-icon-visibility"></a>

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.

```xml
<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 <a href="#set-preview-icon-gravity" id="set-preview-icon-gravity"></a>

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.

```xml
<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 <a href="#override-preview-icon" id="override-preview-icon"></a>

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

{% tabs %}
{% tab title="Kotlin" %}

```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)
```

{% endtab %}

{% tab title="Java" %}

```java
CardVerificationCodeEditText cvcField = findViewById(R.id.cvcField);

CVCIconAdapter adapter = new CVCIconAdapter(this) {
    @Override
    protected Drawable getIcon(@NotNull CardType cardType, @Nullable String cardBrand, int cvcLength, @NotNull Rect r) {
        if(cardType == CardType.VISA) {
            return getDrawable(R.drawable.ic_cvc_preview);
        } else {
            return super.getIcon(cardType, cardBrand, cvcLength, r);
        }
    }
};
cvcField.setPreviewIconAdapter(adapter);
```

{% endtab %}
{% endtabs %}

### Set field name <a href="#set-field-name" id="set-field-name"></a>

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.

{% tabs %}
{% tab title="XML" %}

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

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val cvcField = findViewById<CardVerificationCodeEditText>(R.id.cvcField)
cvcField.setFieldName("cvc_code")
```

{% endtab %}

{% tab title="Java" %}

```java
CardVerificationCodeEditText cvcField = findViewById(R.id.cvcField);
cvcField.isRequired(false);
```

{% endtab %}
{% endtabs %}

### Specify the keyboard type <a href="#specify-the-keyboard-type" id="specify-the-keyboard-type"></a>

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`&#x20;

{% tabs %}
{% tab title="XML" %}

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

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val cvcField = findViewById<CardVerificationCodeEditText>(R.id.cvcField)
cvcField.setInputType(InputType.TYPE_CLASS_NUMBER)
```

{% endtab %}

{% tab title="Java" %}

```java
CardVerificationCodeEditText cvcField = findViewById(R.id.cvcField);
cvcField.setInputType(InputType.TYPE_CLASS_NUMBER);
```

{% endtab %}
{% endtabs %}

### Additional XML attributes <a href="#additional-xml-attributes" id="additional-xml-attributes"></a>

<table data-header-hidden><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Description</strong></td></tr><tr><td><pre><code>app:previewIconVisibility
</code></pre><p></p></td><td>Specifies visibility for card security code preview icon.</td></tr><tr><td><pre><code>app:inputType
</code></pre><p></p></td><td>Set the type of the content with a constant as defined for input field.</td></tr><tr><td><pre><code>app:imeOptions
</code></pre></td><td><p>Specify soft input method for the input method action. By default, the system uses a</p><pre><code>actionNext
</code></pre><p>Plain textor</p><pre><code>actionDone
</code></pre><p>Plain textaction.</p></td></tr><tr><td><pre><code>app:fontFamily
</code></pre><p></p></td><td>Default font family (named by string or as a font resource reference) for the text.</td></tr><tr><td><pre><code>app:fieldName
</code></pre></td><td>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.</td></tr><tr><td><pre><code>app:isRequired
</code></pre></td><td>Specifies whether the text inside input field is required to be filled.</td></tr><tr><td><pre><code>app:textSize
</code></pre></td><td>Size of the text.</td></tr><tr><td><pre><code>app:ellipsize
</code></pre></td><td>If set causes words that are longer than the view width to be ellipsized instead of being broken in the middle.</td></tr><tr><td><pre><code>app:ellipsize
</code></pre><p></p></td><td>If set causes words that are longer than the view width to be ellipsized instead of being broken in the middle.</td></tr><tr><td><pre><code>app:enableValidation
</code></pre><p></p></td><td>Set the validation state of this view. Set true if this view enables validation, it's false otherwise.</td></tr><tr><td><pre><code>app:text
</code></pre><p></p></td><td>Text to display.</td></tr><tr><td><pre><code>app:textColor
</code></pre></td><td>Text color.</td></tr><tr><td><pre><code>app:maxLines
</code></pre><p></p></td><td>Makes the View be at most this many lines tall.</td></tr><tr><td><pre><code>app:minLines
</code></pre><p></p></td><td>Makes the View be at least this many lines tall.</td></tr><tr><td><pre><code>app:textStyle
</code></pre><p></p></td><td>Style (normal, bold, italic) for text.</td></tr><tr><td><pre><code>app:cursorVisible
</code></pre><p></p></td><td>Makes the cursor visible (the default) or invisible.</td></tr><tr><td><pre><code>app:gravity
</code></pre><p></p></td><td>Specifies how to align the text by the view’s x- or y-axis when the text is smaller than the view.</td></tr><tr><td><pre><code>app:scrollHorizontally
</code></pre></td><td>When the text is allowed to be wider than the view (and therefore can be scrolled horizontally).</td></tr><tr><td><pre><code>app:hint
</code></pre></td><td>Hint text to display when the text is empty.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verygoodsecurity.com/vault/developer-tools/vgs-collect/android-sdk/cardverificationcodeedittext.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.