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