VGSCardNumberEditText

A user interface element for entering and modifying the credit card number of different card brands. When you define this input field, you could specify a few attributes that are preferable for this control. For example, app:numberDivider or app:cardBrandIconGravity which are unique for this field type.

Validation

By default, all fields have their specific validations that allow for getting more accurate user data. In case a developer needs to change or override the default validation, we give such a possibility.

Note: Default behavior validates only already recognized card numbers that meet the requirements. Read more about already existing brands.

There are several ways to change the basic validation flow:

• XML attributes: app:enableValidation, app:validationRule;

• Validation builder

Determining validation rules

XML

<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:validationRule="acceptUnknown"/>

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)
val rule : PaymentCardNumberRule = PaymentCardNumberRule.ValidationBuilder()
    .setAlgorithm(ChecksumAlgorithm.LUHN)
    .setAllowableMinLength(15)
    .build()

cardNumberField.setRule(rule)

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);
PaymentCardNumberRule rule = new PaymentCardNumberRule.ValidationBuilder()
    .setAlgorithm(ChecksumAlgorithm.LUHN)
    .setAllowableMinLength(15)
    .build();

cardNumberField.setRule(rule);

For more information, please check the tutorial.

Override valid card brands

By default, popular card brands like Visa, MasterCard, American Express, etc. will be detected by the SDK. You can override this behavior and specify which brands should be detected. You can do it using setValidCardBrands(vararg cardBrand: CardBrand) function of VGSCardNumberEditText.

You can specify your custom CardBrand or use the extension function to map default cards CardType.VISA.toCardBrand()

Kotlin

val customBrandParams = BrandParams(
    "### ### ### ###",
    ChecksumAlgorithm.LUHN,
    arrayOf(4, 10, 12),
    arrayOf(3, 5)
)
val customBrand = CardBrand(
    "^878",
    "<CUSTOM_BRAND>",
    R.drawable.ic_cards,
    customBrandParams
)

cardNumberField.setValidCardBrands(customBrand, CardType.VISA.toCardBrand())

Java

BrandParams customBrandParams = new BrandParams(
    "### ### ### ###",
    ChecksumAlgorithm.LUHN,
    new Integer[]{4, 10, 12},
    new Integer[]{3, 5}
);
CardBrand customBrand = new CardBrand(
    "^777",
    "<CUSTOM_BRAND>",
    R.drawable.ic_cards,
    customBrandParams
);

cardNumberField.setValidCardBrands(customBrand, CardTypeKt.toCardBrand(CardType.VISA));

Card brand icon visibility

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

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

• always: Preview icon is visible all the time.

• ifDetected: Preview icon is visible only when the card brand is detected.

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

• never: Preview icon is never visible.

<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="cardNumber"
    app:brandIconVisibility="ifDetected"/>

Custom card brand

By default, VGSCollect supports only the default list of payment card brands. For more accurate detection, you can create a local brand or just a new custom brand that we don't support yet.

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)
val brandParams = BrandParams(
    "###### ##### ####",
    ChecksumAlgorithm.LUHN,
    arrayOf(16),
    arrayOf(3)
)

val brand = CardBrand(
    "^878",
    "VGS Brand",
    CardType.MAESTRO.resId,
    brandParams
)
cardNumberField.addCardBrand(brand);

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);
BrandParams brandParams = new BrandParams(
    "###### ##### ####",
    ChecksumAlgorithm.LUHN,
    arrayOf(16),
    arrayOf(3)
);

CardBrand brand = new CardBrand(
    "^878",
    "VGS Brand",
    CardType.MAESTRO.resId,
    brandParams
);
cardNumberField.addCardBrand(brand);

Define the number group divider

To set the symbol that will divide groups of digits in the card number, add app:numberDivider to your field's declaration in XML. By default, the widget doesn't have any pre-configured divider and all numbers will be a single line.

XML

<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:numberDivider="-"/>

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)
cardNumberField.setDivider('-')

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);
cardNumberField.setDivider('-');

Also, VGS Collect SDK gives the ability to change or remove the divider symbol before it has been submitted to the Proxy.

To set the symbol that will divide groups of digits in the card number, add app:outputNumberDivider to your field's declaration in XML. By default, Collect SDK removes the divider from the card number.

app:numberDivider and app:outputNumberDivider should contain only one character.

XML

<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:outputNumberDivider="-"/>

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)
cardNumberField.setOutputDivider('-')

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);
cardNumberField.setOutputDivider('-');

Override card brand icon

VGS Collect offers a list of default card brand resources for preview and UI identification of the 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 CardIconAdapter class to create custom Drawables as a preview image for the VGSCardNumberEditText.

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)

val adapter = object : CardIconAdapter(this) {
  override fun getIcon(cardType: CardType, name: String?, resId: Int, r: Rect): Drawable {
      return if(cardType == CardType.VISA) {
          getDrawable(R.drawable.ic_visa_light)
      } else {
          super.getIcon(cardType, name, resId, r)
      }
  }
}

cardNumberField.setCardIconAdapter(adapter)

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);

CardIconAdapter adapter = new CardIconAdapter(this) {
    @Override
    protected Drawable getIcon(@NotNull CardType cardType, @Nullable String name, int resId, @NotNull Rect r) {
        if(cardType == CardType.VISA) {
            return getDrawable(R.drawable.ic_visa_light);
        } else {
            return super.getIcon(cardType, name, resId, r);
        }
    }
};
cardNumberField.setCardIconAdapter(adapter);

Set brand icon gravity

Specifies how to align the icon with the view’s x-axis. To specify gravity programmatically, you could use the Android Gravity class. By default, gravity is in end position.

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

XML

<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBrandIconGravity="end"/>

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)
cardNumberField.setCardBrandIconGravity(Gravity.END)

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);
cardNumberField.setCardBrandIconGravity(Gravity.END);

Override card brand number mask

If you don't want to create a completely new custom card brand, but want just to change the preview number mask, VGSCollect allows you to override card number masks from already defined brands.

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)

val adapter = object : CardMaskAdapter() {

    override fun getMask(
        cardType: CardType,
        name: String,
        bin: String,
        mask: String
    ): String = when (cardType) {
        CardType.VISA_ELECTRON -> "###### ###### ####"
        else -> super.getMask(cardType, name, bin, mask)
    }
}

cardNumberField.setCardIconAdapter(adapter)

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);

CardMaskAdapter adapter = new CardMaskAdapter() {

    @NotNull
    @Override
    protected String getMask(@NotNull CardType cardType, @NotNull String name, @NotNull String bin, @NotNull String mask) {
        if (cardType == CardType.VISA_ELECTRON) {
            return "###### ###### ####";
        }
        return super.getMask(cardType, name, bin, mask);
    }
};

cardNumberField.setCardIconAdapter(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.

You must set up fieldName In another way, the input field will be ignored by VGSCollect.

XML

<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="card_number"/>

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)
cardNumberField.setFieldName("card_number")

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);
cardNumberField.setFieldName("card_number");

Define the required state

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

When app:isRequired set as true thre input data should be valid only. If app:isRequired set as false, the 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.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:isRequired="false"/>

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)
cardNumberField.isRequired(false)

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);
cardNumberField.isRequired(false);

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.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:inputType="number"/>

Kotlin

val cardNumberField = findViewById<VGSCardNumberEditText>(R.id.cardNumberField)
cardNumberField.setInputType(InputType.TYPE_CLASS_NUMBER)

Java

VGSCardNumberEditText cardNumberField = findViewById(R.id.cardNumberField);
cardNumberField.setInputType(InputType.TYPE_CLASS_NUMBER);

Additional XML attributes

app:enableValidation	Set the validation state of this view. Set true if this view has enabled validation, it's false otherwise.
app:validationRule	Adds a default behavior rule for the validation field.
app:numberDivider	Sets the symbol that will divide groups of digits in the card number.
app:outputNumberDivider	Sets the symbol that will divide groups of digits before submit to the Proxy.
app:cardBrandIconGravity	Specifies how to align the icon by the view’s x-axis. To specify gravity programmatically you could use android Gravity Plain textclass.
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 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.
app:brandIconVisibility	Specifies visibility for card brand preview icon.